個人VS Code擴展

點贊再看，養成習慣

如今愈來愈多的人使用的代碼編輯器是 Visual Studio Code。陸續放棄了Atom、Sublime Text以及也很強大的WebStorm。

🎨 主題

VS Code 主題是Dark+ Material

⭐ 我以前使用過的其餘一些主題：

• Oceanic Next - 我使用了 Oceanic Next (dimmed bg)
• emedy - 我使用了 Remedy Dark (straight)
• Snazzy Operator
• One Dark Pro

📁 圖標

文件圖標加強了 VS Code 的外觀，主要是它能夠幫助咱們經過給定的圖標區分不一樣的文件和文件夾。對於個人 VS Code，我使用兩個文件圖標：

• Material Icon Theme - VS Code 最受歡迎的圖標主題之一。
• Material Theme Icons - 目前正在使用。
• vscode-icons

✒ 字體

推薦用於代碼編輯器的字體是 JetBrains Mono。這是帶有連字支持的免費字體。

⭐ 我之前使用過的其餘一些字體：

• Operator Mono - 支持連字。
• Fira Code - 免費並支持連字。
• Dank Mono - 付費並支持連字。

⭐ 您要使用個人設置，使用個人 VS Code 字體嗎？在 VS Code 中，按 Ctrl + P，輸入 settings.json 並打開該文件。如今，用個人給定值替換下面的屬性值。

{
  "workbench.colorTheme": "Snazzy Operator",
  "editor.fontFamily": "'JetBrains Mono', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5,
  "editor.fontWeight": "400",
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid"
}
複製代碼

一些使用的擴展

⭐ Git Graph

查看存儲庫的Git圖，並從圖中執行Git操做。

⭐ Debugger for Chrome

調試您的JavaScript代碼在Chrome瀏覽器，或任何其餘目標，支持Chrome調試協議。

⭐ GitLens — Git supercharged

加強Visual Studio代碼中內置的Git功能——經過Git blame註釋和代碼透鏡，一眼就能看到代碼做者的身份，無縫導航和探索Git存儲庫，經過強大的比較命令得到有價值的看法

⭐ Auto Close Tag

自動添加HTML/XML關閉標籤，與isual Studio IDE或SublimeText相同。當咱們填寫了開始標籤，結束標籤就會被自動加上。這個很是實用，減小不少咱們寫html和xml的時間。

⭐ Auto Rename Tag

自動重命名配對的 HTML / XML 標籤，也能夠在 JSX 中使用。

在settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一項以設置擴展名將被激活的語言。默認狀況下，它是**[「 *」]**，將爲全部語言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
複製代碼

⭐ BPath Intellisense

補全文件路徑，自動完成文件名的插件

⭐ Bracket Pair Colorizer 2

此擴展名容許用顏色標識匹配的括號，用戶能夠定義要匹配的符號，以及要使用的顏色。

⭐ CSS Peek

• Peek：內聯加載 css 文件並在那裏進行快速編輯。（Ctrl + Shift + F12）
• Go to：直接跳轉到 CSS 文件或在新的編輯器（F12）中打開
• Hover：在符號上懸停顯示定義（Ctrl + hover）

⭐ DotENV

在 .env 文件中高亮顯示鍵值對。

⭐ Browser Preview

VSCode的瀏覽器預覽插件讓咱們可以在編輯器中打開一個能夠真正的瀏覽器預覽。瀏覽器預覽是由Chrome Headless提供的，它的工做原理是在一個新進程中啓動一個Headless Chrome實例。

⭐ JavaScript (ES6) code snippets

ES6語法中的JavaScript代碼片斷

⭐ language-stylus

stylus語言支持

⭐ Local History

將文件保存到本地歷史記錄中

⭐ Markdown Preview Enhanced

Markdown預覽加強移植到vscode

⭐ Vetur

用於 VSCode的Vue工具

⭐ Simple React Snippets

React代碼片斷和命令的基本集合。

⭐ minapp

微信小程序標籤、屬性的智能補全（同時支持原生小程序、mpvue 和 wepy 框架，並提供 snippets）

⭐ Bracket Pair Colorizer

一個可定製的擴展，用於給匹配的方括號着色

⭐ Highlight Matching Tag

突出顯示匹配的開始或結束標籤。

⭐ Image preview

⭐ Settings Sync

使用 GitHub Gist在多臺機器上同步設置，代碼片斷，主題，文件圖標，啓動，鍵綁定，工做區和擴展。

具體操做能夠看擴展說明

⭐ npm 擴展

這個擴展支持運行包中定義的npm腳本。並根據包中定義的依賴項驗證已安裝的模塊。

⭐ Terminal 設置

個人操做系統是 Windows，我經過命令行使用 Git，因此我有一個 Git terminal，我用這個終端做爲個人集成 terminal。個人 terminal 設置以下：

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.fontFamily": "FuraMono Nerd Font",
"terminal.integrated.fontSize": 12,
"terminal.integrated.rightClickCopyPaste": true
複製代碼

⭐ 其餘語言支持

✔ 有用的 VS Code 快捷鍵

在平時中使用了一些重要的鍵盤快捷鍵，這些快捷方式使 Visual Studio Code 提升了個人工做效率。

• Ctrl + P ：轉到文件，您能夠在 Visual Studio Code 中移動到打開的文件/文件夾的任何文件。
• Ctrl + ` ：在 VS Code 中打開 terminal
• Alt + Down：下移一行
• Alt + Up：上移一行
• Ctrl + D：將選定的字符移動到下一個匹配字符串上
• Ctrl + Space：觸發建議
• Shift + Alt + Down：向下複製行
• Shift + Alt + Up：向上複製行
• Ctrl + Shift + T：從新打開最新關閉的窗口
• Shift + Alt + 配合鼠標一塊兒使用： 選中一大串代碼多行進行編輯