經過配置 VSCode 來提升生產力

代碼編輯器這些年發展很快。一些年前，尚未 Visual Studio Code（VS Code）。你可能在用 Sublime Text、Atom、Bracket 等。隨着 VS Code 的發佈，它已經變成了開發者中最受歡迎的編輯器。

爲何選擇 VS Code

開發者喜歡它由於

• 可定製
• Debug 方便
• 支持 Emmet
• 支持插件
• 集成了 Git
• 集成了終端
• 智能補全
• 主題等

VS Code 確實很強大，這篇文章會涉及 VS Code 的配置，介紹一些出色的插件，讓 VS Code 的生產力更上一個臺階。

終端

能夠用 iTerm2 和 Zsh 配置終端 2而後應用到 VS Code 終端上。

配置 Zsh 後，在 Terminal > New Terminal 啓動 VS Code 內置終端運行下面的命令

source ~/.zshrc

複製代碼

或者

. ~/.zshrc

複製代碼

在 shell 裏執行 .zshrc 配置文件裏的內容。

字體

FiraCode 酷斃了，由於它支持合字 1，下載安裝 FiraCode，在 settings.json 文件裏添加。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

複製代碼

在命令行裏啓動

在終端裏啓動 VS Code 逼格很高。按住 CMD + SHIFT + P，輸入 shell command 選擇 Install code command in path。在終端裏切換到項目路徑下，輸入 code . 在 VS Code 裏打開項目。

配置

VS Code 的工做空間設置位於 settings.json 中。可訂製性很高。

打開 settings.json 快捷鍵

CMD + ,

複製代碼

譯註：新版本須要手動打開 .vscode/settings.json

複製粘貼下列代碼到 settings.json 文件：

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "bounded",
    "editor.trimAutoWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],
    "javascript.validate.enable": true,
    "git.enableSmartCommit": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "gitlens.historyExplorer.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
}

複製代碼

插件

下面是一些有用的插件，能夠提高開發體驗

瀏覽這些插件，

• 到 View -> Extensions
• 在 marketplace 搜索插件
• 點擊安裝

1. Auto Import

有了這個插件，就不須要再手動引入文件了。若是是基於組件的項目，直接輸入組件名插件會自動處理 imported。

2. Add jsdoc comments

這個插件能夠生成代碼註釋。選中函數首行，按 CMD + SHIFT + P，選擇 Add Doc Comments。

3. ESDoc MDN

有時候，咱們可能會忘了一些 API 的用法，這個插件就派上用場了。不用打開瀏覽器查找文檔，直接輸入

//mdn [object].[method];

複製代碼

4. CSS Peek

它可以直接在上代碼顯示它的 CSS 樣式。這對於那些歷史項目頗有用。

5. GitLens

GitLens 提升了 Git 的可能性。它能作的有不少，好比無縫瀏覽 Git 倉庫，查看代碼的版本、提交人等信息。

6. ESLint

這個插件給 VS Code 集成了 ESLint 來 lint 代碼。須要在當前項目或者全局安裝 ESLint 以最大發揮這個插件的特性。

當前項目安裝 ESLint，運行

npm install eslint

複製代碼

或者，全局安裝

npm install -g eslint

複製代碼

而後在當前項目中建立一個 .eslintrc 配置文件，運行

./node_modules/.bin/eslint --init

複製代碼

或者運行

eslint --init

複製代碼

7. Debugger for Chrome

這個插件能夠直接在 Google Chrome 瀏覽器裏調試 JavaScript 代碼。

8. Google Fonts

使用這個擴展添加字體變得很簡單。不再須要再瀏覽器裏搜索字體了。按 CMD + SHIFT + P 搜索 Google fonts 訪問字體列表。

9. TODO Hightlight

有不少 TODO 是須要優先處理的，大部分時間 TODO 都被忽略了。TODO hightlight 經過高亮它們來緩解這一問題。

10. Docker

有了這個插件能夠在離線狀況下建立 Dockerfiles。它還提供了語法高亮、自動補全等功能。

按 CMD + SHIFT + P 搜索 Add Docker files。

11. Code Spell Checker

可以方便的檢查代碼拼寫錯誤。

12. Import Cost

Import Cost 顯示代碼裏導入包的代價。它能幫助查找性能瓶頸。

13. HTMLHint

這個插件能校驗 HTML，能夠方便的寫出符合標準的代碼。

14. Peacock

這個插件能夠改變 workspace 的顏色。當有多個 VS Code 窗口時，想要快速區分，這個插件就派上用場了。

在安裝完 Peacock 後，單擊設置圖標 > settings，選擇 workspace settings 標籤頁，單擊 {} 粘貼以下代碼。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#e90b8d",
        "activityBar.foreground": "#fff",
        "activityBar.inactiveForeground": "#b5b5b5",
    },
    "peacock.affectedElements": [
        "activityBar",
    ]
}

複製代碼

還能夠給 affectedElements 添加 titleBar 和 statusBar， 而後在 colorCustomizations 裏定義它們的顏色。

要使用內置顏色，按 CMD + SHIFT + P，輸入 peacock 選擇你喜歡的主題。這會覆蓋 settings.json 文件裏 workspace 的定義。

15. Prettier

寫代碼的時候敲的最多的恐怕是空格和 tab 鍵，Prettier 能夠幫你減負。它能格式化代碼使其可讀性更強。

你還可使用 Visual Studio Code 來作更多特別棒的事。

掃碼關注 freeCodeCamp 官方微信公衆號