配图源自 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",
}
网友评论