如何從零配置 VS Code，使其成為完美的 JavaScript 開發工具

最近我買了一台新的 Mac（MacBook Air），需要安裝全新的 VS Code，所以我花了點時間記錄下來，把我的編碼體驗與使用的舊 MacBook Pro 相同，該筆記本已經使用了長達 9 年的時間。

還可以查看我的 VS Code 介紹 文章

以下是我所做的事情：

  1. 我安裝了 Fira Code 並將其設置為我的字體
  2. 我將制表符大小設置為2（這是我的習慣）。空格。2個空格。
  3. 我將 **/node_modules 添加到排除文件列表中，以防止它們顯示在文件列表中
  4. 我啟用了“粘貼時格式化”和“保存時格式化”功能
  5. 啟用了字體連接功能
  6. 停用了縮略圖功能
  7. 啟用了“修剪末尾空格”功能
  8. 我安裝了 Sublime Text 按鍵映射插件。這對於顯示/隱藏側邊欄，關閉文件等提供了快捷鍵，例如 cmd-K cmd-B。

接下來，我安裝了一些主題。這取決於你的個人喜好。我喜歡在以下主題之間切換：

  • Palenight 主題
  • Nostromo
  • Night Owl
  • Ayu

然後我安裝了以下擴展：

  • Prettier
  • IntelliSense for CSS class names
  • Intent 4-to-2
  • ESLint
  • Duplicate action
  • Bracket Pair Colorizer 2
  • Babel ES6/ES7
  • ES7 React/Redux/GraphQL/React-Native snippets
  • TODO Highlight

這是開始使用 JavaScript 和 React 的好套件集合。

在根據我的喜好和需求配置完所有設置後，這是我的用戶設置 JSON：

{
 "editor.fontFamily": "Fira Code",
 "editor.tabSize": 2,
 "editor.wordWrap": "bounded",
 "files.exclude": {
 "\*\*/node\_modules": true
 },
 "editor.formatOnPaste": true,
 "editor.formatOnSave": true,
 "editor.minimap.enabled": false,
 "workbench.colorTheme": "Tomorrow Night Blue",
 "files.trimTrailingWhitespace": true,
 "workbench.activityBar.visible": false,
 "window.zoomLevel": 2,
 "editor.cursorBlinking": "smooth",
 "editor.fontLigatures": true,
 "prettier.jsxBracketSameLine": true,
 "prettier.jsxSingleQuote": true,
 "prettier.singleQuote": true,
 "prettier.semi": false,
 "[markdown]": {
 "editor.renderWhitespace": "all",
 "editor.acceptSuggestionOnEnter": "off",
 "editor.parameterHints.enabled": false,
 "editor.quickSuggestions": false,
 "editor.snippetSuggestions": "none",
 }
}

[markdown] 部分添加了 Markdown-specific 的配置。在這種情況下，我禁用了所有在編碼時分散注意力的彈出窗口，這些彈出窗口在編程時非常有用。

就是這樣。

還可以查看 VS Code 用於 React 開發的配置！

祝編碼愉快！