手把手教你如何利用VS Code設置提高編碼效率
代碼編輯器很多，有些是免費的，有些是付費的。其中最喜歡的代碼編輯器是 Visual Studio Code。它是免費的，并具有強大的功能，我陸續拋棄了Atom、Sublime Text以及也很強大的WebStorm。
今天，我將分享我最喜歡的代碼編輯器設置，用于我的 Web 開發。我將從代碼編輯器的外觀開始。畢竟外觀顏值很重要。
主題
我最常用的 VS Code 主題是Snazzy Operator，目前正在使用。
此主題基于 hyper-snazzy 并針對與 Operator Mono 字體一起使用進行了優化。我喜歡 這個主題。
⭐ 我之前使用過的其他一些主題：
- Oceanic Next - 我使用了 Oceanic Next (dimmed bg)
- emedy - 我使用了 Remedy Dark (straight)
✒ 字體
對我的代碼編輯器來說，另一個重要的事情是，我用于代碼編輯器的字體是 JetBrains Mono。這是帶有連字支持的免費字體。
連字是一種新的字體格式，支持符號裝飾，而不是= >、< =。
在使用 JetBrains Mono 之前，我使用了Operator 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"
- }
圖標
文件圖標增強了 VS Code 的外觀，主要是它可以幫助我們通過給定的圖標區分不同的文件和文件夾。對于我的 VS Code，我使用兩個文件圖標：
- Material Icon Theme - VS Code 最受歡迎的圖標主題之一。
- Material Theme Icons - 目前正在使用。
我使用的擴展
Auto Rename Tag
自動重命名配對的 HTML / XML 標簽，也可以在 JSX 中使用。
在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一項以設置擴展名將被激活的語言。默認情況下，它是**[“ *”]**，將為所有語言激活。
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
Bracket Pair Colorizer 2
此擴展名允許用顏色標識匹配的括號，用戶可以定義要匹配的符號，以及要使用的顏色。
Color Highlight
此擴展程序設置在文檔中找到的 css / web 顏色的樣式。
CSS Peek
- Peek：內聯加載 css 文件并在那里進行快速編輯。（Ctrl + Shift + F12）
- Go to：直接跳轉到 CSS 文件或在新的編輯器（F12）中打開
- Hover：在符號上懸停顯示定義（Ctrl + hover）
DotENV
在 .env 文件中高亮顯示鍵值對。
ES7 React/Redux/GraphQL/React-Native snippets
該擴展為您提供 ES7 中的 JavaScript 和 React / Redux 片段，以及 VS Code 的 Babel 插件功能。
Highlight Matching Tag
突出顯示匹配的開始或結束標簽。
我使用的擴展的樣式：
- "highlight-matching-tag.styles": {
- "opening": {
- "left": {
- "custom": {
- "borderWidth": "0 0 0 1.5px",
- "borderStyle": "solid",
- "borderColor": "yellow",
- "borderRadius": "5px",
- "overviewRulerColor": "white"
- }
- },
- "right": {
- "custom": {
- "borderWidth": "0 1.5px 0 0",
- "borderStyle": "solid",
- "borderColor": "yellow",
- "borderRadius": "5px",
- "overviewRulerColor": "white"
- }
- }
- }
- }
Image preview
懸停時顯示圖像預覽。
Indent Rainbow
此擴展使文本前面的縮進著色，在每個步驟上交替使用四種不同的顏色。
REST Client
REST Client 允許您發送 HTTP 請求并直接在 Visual Studio Code 中查看響應。
Settings Sync
使用 GitHub Gist 在多臺機器上同步設置，代碼片段，主題，文件圖標，啟動，鍵綁定，工作區和擴展。具體操作可以看我的這篇文章《小技巧|同步你的 VSCode 設置及擴展插件，換機不用愁！》
TODO Highlight
在代碼中突出顯示 TODO，FIXME 和其他注釋。
Version Lens
顯示 package.json 文件中每個軟件包的最新版本。
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：重新打開最新關閉的窗口
