高效的編碼：個人VS Code設置

時間 2020-03-19

標籤高效編碼個人 code 設置欄目字符編碼简体版

原文原文鏈接

代碼編輯器不少，有些是免費的，有些是付費的。其中最喜歡的代碼編輯器是 Visual Studio Code。它是免費的，並具備強大的功能，我陸續拋棄了Atom、Sublime Text以及也很強大的Webstorm。javascript

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

🎨 主題

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

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

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

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

✒ 字體

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

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

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

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

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

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

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

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

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

📃 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