高效編碼？我的VS Code設(shè)置

代碼編輯器很多，有些是免費(fèi)的，有些是付費(fèi)的。其中最喜歡的代碼編輯器是 Visual Studio Code。它是免費(fèi)的，并具有強(qiáng)大的功能，我陸續(xù)拋棄了Atom、Sublime Text以及也很強(qiáng)大的WebStorm。

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

?? 主題

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

此主題基于 hyper-snazzy 并針對(duì)與 Operator Mono 字體一起使用進(jìn)行了優(yōu)化。我喜歡 ?? 這個(gè)主題。

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

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

? 字體

對(duì)我的代碼編輯器來說，另一個(gè)重要的事情是，我用于代碼編輯器的字體是 JetBrains Mono。這是帶有連字支持的免費(fèi)字體。

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

在使用 JetBrains Mono 之前，我使用了Operator Mono。這也是一個(gè)不錯(cuò)的字體。

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

• Operator Mono - 支持連字。
• Fira Code - 免費(fèi)并支持連字。
• Dank Mono - 付費(fèi)并支持連字。

?????? 您要使用我的設(shè)置，使用我的 VS Code 字體嗎？在 VS Code 中，按 Ctrl + P，輸入 settings.json 并打開該文件?，F(xiàn)在，用我的給定值替換下面的屬性值。

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

?? 圖標(biāo)

文件圖標(biāo)增強(qiáng)了 VS Code 的外觀，主要是它可以幫助我們通過給定的圖標(biāo)區(qū)分不同的文件和文件夾。對(duì)于我的 VS Code，我使用兩個(gè)文件圖標(biāo)：

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

我使用的擴(kuò)展

Auto Rename Tag

自動(dòng)重命名配對(duì)的 HTML / XML 標(biāo)簽，也可以在 JSX 中使用。

在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一項(xiàng)以設(shè)置擴(kuò)展名將被激活的語言。默認(rèn)情況下，它是**[“ *”]**，將為所有語言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

Bracket Pair Colorizer 2

此擴(kuò)展名允許用顏色標(biāo)識(shí)匹配的括號(hào)，用戶可以定義要匹配的符號(hào)，以及要使用的顏色。

Color Highlight

此擴(kuò)展程序設(shè)置在文檔中找到的 css / web 顏色的樣式。

CSS Peek

• Peek：內(nèi)聯(lián)加載 css 文件并在那里進(jìn)行快速編輯。（Ctrl + Shift + F12）
• Go to：直接跳轉(zhuǎn)到 CSS 文件或在新的編輯器（F12）中打開
• Hover：在符號(hào)上懸停顯示定義（Ctrl + hover）

DotENV

在 .env 文件中高亮顯示鍵值對(duì)。

ES7 React/Redux/GraphQL/React-Native snippets

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

Highlight Matching Tag

突出顯示匹配的開始或結(jié)束標(biāo)簽。

我使用的擴(kuò)展的樣式：

"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

懸停時(shí)顯示圖像預(yù)覽。

Indent Rainbow

此擴(kuò)展使文本前面的縮進(jìn)著色，在每個(gè)步驟上交替使用四種不同的顏色。

REST Client

REST Client 允許您發(fā)送 HTTP 請(qǐng)求并直接在 Visual Studio Code 中查看響應(yīng)。

Settings Sync

使用 GitHub Gist 在多臺(tái)機(jī)器上同步設(shè)置，代碼片段，主題，文件圖標(biāo)，啟動(dòng)，鍵綁定，工作區(qū)和擴(kuò)展。具體操作可以看我的這篇文章《小技巧|同步你的 VSCode 設(shè)置及擴(kuò)展插件，換機(jī)不用愁！》

TODO Highlight

在代碼中突出顯示 TODO，F(xiàn)IXME 和其他注釋。

Version Lens

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

?? Terminal 設(shè)置

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

"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 ：轉(zhuǎn)到文件，您可以在 Visual Studio Code 中移動(dòng)到打開的文件/文件夾的任何文件。
• Ctrl + ` ：在 VS Code 中打開 terminal
• Alt + Down：下移一行
• Alt + Up：上移一行
• Ctrl + D：將選定的字符移動(dòng)到下一個(gè)匹配字符串上
• Ctrl + Space：觸發(fā)建議
• Shift + Alt + Down：向下復(fù)制行
• Shift + Alt + Up：向上復(fù)制行
• Ctrl + Shift + T：重新打開最新關(guān)閉的窗口