VS Code 配置详解

配图源自 Freepik

更新于 2022.03.08...

---

作为一个 JSer，可用于前端开发的工具实在是太多了，像 Atom、WebStorm、HBuilder、Sublime Text 3 等等等......可独爱 VS Code。讲真的，除了刚开始接触前端时用过 Sublime Text 来写代码，后面发现 VS Code 之后，就没换过编辑器了...

Anyway，哪个舒服用哪个，一搬砖工具而已，哈哈。但「工欲善其事，必先利其器」。

为此，本文会记录一些 VS Code 常用且建议的配置，并及时、持续地更新以适应最新版本，也会移除一些废弃的配置项。它更新得实在太频繁了...

并添加了详细的标注说明...

配置

{
  // 工作区相关
  "workbench.iconTheme": "material-icon-theme", // 文件图标主题：Material Icon Theme

  // 编辑器相关
  "editor.trimAutoWhitespace": false, // 删除自动插入的尾随空白符号
  "editor.codeActionsOnSave": {
    // 在保存时运行的代码操作类型
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true, // 在保存时格式化文件
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 定义默认格式化程序，这里指定了 Prettier。
  "editor.minimap.enabled": false, // 是否显示缩略图
  "editor.bracketPairColorization.enabled": true, // 启用括号对着色，自 version 1.60 起开始支持。
  "editor.suggest.preview": true, // 控制是否在编辑器中预览建议结果

  // 文件相关
  "files.trimTrailingWhitespace": true, // 保存文件时删除文件末尾的空白格
  "files.associations": {
    // 配置语言的文件关联
    "*.wxss": "css",
    "*.acss": "css",
    "*.wxs": "javascript",
    "*.sjs": "javascript",
    "*.axml": "html",
    "*.wxml": "html",
    "*.swan": "html",
    "*.vue": "vue"
  },
  "files.exclude": {
    // 文件资源管理器根据此设置决定要显示或隐藏的文件和文件夹
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },

  // 搜索相关
  // 在使用搜索功能时，默认将这些文件夹/文件排除在外。
  // 设置之后可在搜索框下切换“齿轮+减号”的图标来是否执行此选项
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true
  },

  // ESLint 相关
  "eslint.workingDirectories": [{ "mode": "auto" }], // 指示 ESLint 根据 package.json、.eslintignore 和 .eslintrc* 文件的位置推断工作目录。
  "eslint.options": {
    // 更多详见 https://eslint.cn/docs/developer-guide/nodejs-api#cliengine
    "extensions": [".js", ".ts", "jsx", ".tsx"] // 要检查的文件扩展名的数组
  },
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"] // 指定 ESLint 可识别的语言数组，未安装 ESLint 插件时将显示错误。

  // Prettier 相关，需配合 editor.formatOnSave 使用
  // 当没有显式指定配置文件时，插件中的配置项将作为后备。
  // 相反地，如果存在任何本地配置文件，将不会使用 VS Code 插件的配置。
  // 更多：https://github.com/toFrankie/lint-config-custom/blob/main/docs/usage-prettier.md
  "prettier.printWidth": 120,
  "prettier.semi": false,
  "prettier.arrowParens": "avoid",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
}

其他

• 推荐两款不错的 VS Code 的主题

References

• 玩转 VS Code 专栏
• 史上最全 vscode 配置使用教程
• 超实用 VS Code 插件推荐