在freeCodeCamp社區閱讀更多技術文章。

代碼編輯器這些年發展很快。一些年前，還沒有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酷斃了，因為它支持合字，下載安裝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來做更多特別棒的事。

非營利組織https://www.freecodecamp.org自2014年成立以來，以“幫助人們免費學習編程”為使命，創建了大量免費的編程教程，包括交互式課程、視頻課程、文章等。線下開發者社區遍布160 多個國家、2000 多個城市。我們正在幫助全球數百萬人學習編程，希望讓世界上每個人都有機會獲得免費的優質的編程教育資源，成為開發者或者運用編程去解決問題。

你也想成為freeCodeCamp社區的貢獻者嗎？歡迎了解【招募】freeCodeCamp翻譯計劃。