大家好，我是做工程師不做碼農！聚焦大前端技術和程序員成長的乾貨公眾號，點擊關注，每天給你精彩！

代碼編輯器很多，有些是免費的，有些是付費的。其中最喜歡的代碼編輯器是Visual Studio Code。它是免費的，並具有驚人的功能。我從Web開發旅程的開始就開始使用它。

這篇文章你將看到以下內容：

目錄

今天，我將分享我最喜歡的代碼編輯器設置，用於我的Web開發。我將從代碼編輯器的外觀開始。畢竟外觀顏值很重要。

主題

我最常用的VS Code主題是Snazzy Operator，目前正在使用。

Snazzy Operator 主題

此主題基於 hyper-snazzy 並針對與 Operator Mono 字體一起使用進行了優化。我喜歡 這個主題。

⭐ 我之前使用過的其他一些主題：

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

✒ 字體

對我的代碼編輯器來說，另一個重要的事情是，我用於代碼編輯器的字體是 JetBrains Mono。這是帶有連字支持的免費字體。

JetBrains Mono 字體

連字是一種新的字體格式，支持符號裝飾，而不是 = >、< =。

在使用 JetBrains Mono 之前，我使用了Operator Mono。這也是一個不錯的字體。

⭐ 我以前使用過的其他一些字體：

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

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

<code>{
  "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"
}/<code>

圖標

文件圖標增強了VS Code的外觀，主要是它可以幫助我們通過給定的圖標區分不同的文件和文件夾。對於我的VS Code，我使用兩個文件圖標：

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

Material Theme Icons

我使用的擴展

Auto Rename Tag

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

在

<code>"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]/<code>

Bracket Pair Colorizer 2

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

Color Highlight

此擴展程序設置在文檔中找到的css / web顏色的樣式。

CSS Peek

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

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

ES7 React/Redux/GraphQL/React-Native snippets

該擴展為您提供ES7中的JavaScript和React / Redux片段，以及VS Code的Babel插件功能。

Highlight Matching Tag

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

我使用的擴展的樣式：

<code>"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"
      }
    }
  }
}/<code>

Image preview

懸停時顯示圖像預覽。

Indent Rainbow

此擴展使文本前面的縮進著色，在每個步驟上交替使用四種不同的顏色。

REST Client

REST Client允許您發送HTTP請求並直接在Visual Studio Code中查看響應。

Settings Sync

使用GitHub Gist在多臺機器上同步設置，代碼片段，主題，文件圖標，啟動，鍵綁定，工作區和擴展。具體操作可以看我的這篇文章《小技巧|同步你的VSCode設置及擴展插件，換機不用愁！》

閱讀《小技巧|同步你的VSCode設置及擴展插件，換機不用愁！》：https://dwz.cn/kx0kwMlz

TODO Highlight

在代碼中突出顯示TODO，FIXME和其他註釋。

Version Lens

顯示package.json文件中每個軟件包的最新版本。

Terminal 設置

我的操作系統是Windows，我通過命令行使用Git，所以我有一個Git terminal，我用這個終端作為我的集成terminal。我的terminal設置如下：

<code>"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/<code>

✔ 有用的 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：重新打開最新關閉的窗口

如果對你有一點點幫助，可以點個關注。

閱讀更多 做工程師不做碼農 的文章

關鍵字: 編輯器 XML 碼農