本文中已安装的插件：
- Vetur：vue2专用插件
- Vue Language Features (Volar)：vue3专用插件（某些功能与vetur 冲突，如校验根节点是否符合规范）
- Prettier - Code formatter：美化代码格式的插件
- One Dark Pro：VS Code 主题插件
- GitLens — Git supercharged：Git插件
- Code Spell Checker：单词拼写检查插件
这些插件都是常用的插件：VS Code 常用的插件，让你的 VS Code 好用到飞起，开发必备
详情查看 setting.json，朋友们可以选择使用哪些配置，几乎都已经标明了配置是做什么用的。
setting.json：
{
/*
工作区的相关配置
*/
"workbench.iconTheme": "vscode-icons",
"workbench.colorCustomizations": {
// 设置行号的字体颜色
"editorLineNumber.foreground": "#17a346",
// 设置光标颜色
"editorCursor.foreground": "#fff",
// 点中的当前行的背景色
"editor.lineHighlightBackground": "#445",
// 设置选中的代码片的背景色
"editor.selectionBackground": "#666"
},
"workbench.startupEditor": "none",
"workbench.colorTheme": "One Dark Pro",
/*
编辑区相关配置
*/
"editor.hover.delay": 5000, // 延迟标签介绍信息
"editor.suggestSelection": "first",
"editor.formatOnSave": false, // 设置为true时，每次保存的时候自动格式化；
"editor.tabCompletion": "on",
"editor.tabSize": 4,
"editor.fontSize": 16,
"editor.wordWrap": "on",
"editor.codeActionsOnSave": {
// 自动格式化代码：不使用，设置为true之后 tab键的某些缩进或者自动补齐标签会失效
"source.fixAll.eslint": true
},
// 鼠标双击的时候选中单词，将原有的中横线删除了，这样就可以选中中横线连接的单词了
"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
/*
One Dark Pro 插件相关配置
*/
"oneDarkPro.editorTheme": "One Dark Pro",
"oneDarkPro.vivid": true,
"emmet.triggerExpansionOnTab": true,
// 自动填充闭合标签包括语言
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"javascript": "html",
"wxml": "html"
},
// 显示缩写建议
"emmet.showAbbreviationSuggestions": true,
// 显示扩大缩写
"emmet.showExpandedAbbreviation": "always",
/**
vscode-icons 插件相关配置
*/
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"gitlens.advanced.messages": {
"suppressImproperWorkspaceCasingWarning": false
},
"vsicons.dontShowNewVersionMessage": true,
"search.followSymlinks": false, // 关闭rg.exe进程
"merge-conflict.autoNavigateNextConflict.enabled": true,
"bracketPairColorizer.depreciation-notice": false,
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
// "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true, // 括号两边加空格，包括中括号、大括号等
// "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true, // 匿名函数后面加空格，比如箭头函数
// "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #让函数(名)和后面的括号之间加个空格
/*
vue2 插件 vetur，相关配置
*/
// "vetur.validation.templateProps": false,
// "vetur.validation.template": false, // 不校验 template ，vue3 支持多根节点
"vetur.ignoreProjectWarning": true,
"vetur.format.options.tabSize": 4, // 缩进
"vetur.format.defaultFormatter.html": "js-beautify-html", // 设置html的格式化模板为 js-beautify-html
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 不加分号
"arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"trailingComma": "es5" // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
// "singleQuote": true // 用单引号
},
"js-beautify-html": {
"wrap_line_length": 120, // 换行长度，当前行的代码长度超过120个字符后就会换行（受单词影响，误差2个字符左右）
"wrap_attributes": "auto", // 换行设置自动
"end_with_newline": false // 结尾添加新行
}
},
/*
格式化文件
对应文件使用什么插件进行格式化代码
*/
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}, // vue文件格式化工具
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}, // js文件格式化工具: 插件 Prettier - Code formatter
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
/*
code spell checker 单词拼写检查插件相关配置
*/
"cSpell.languageSettings": [],
"cSpell.userWords": [
// 将数组中的字段添加到 code spell checker 单词拼写检查插件的字典中去，这样在代码里面这些单词就不会有蓝色波浪线提示
"vuex"
],
/**
插件 Prettier - Code formatter 相关配置
*/
// 缩进
"prettier.tabWidth": 4,
// 超过最大值换行
"prettier.printWidth": 120,
// 是否对vue文件中的 script块和 style块的缩进设置
"prettier.vueIndentScriptAndStyle": true,
// 句尾不添加分号
"prettier.semi": false,
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.proseWrap": "preserve",
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.arrowParens": "avoid",
// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.bracketSpacing": true,
// 结尾是 \n \r \n\r auto
"prettier.endOfLine": "auto",
// html 空白区域的敏感度
"prettier.htmlWhitespaceSensitivity": "ignore",
// 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.ignorePath": ".prettierignore",
// 在jsx中把'>' 是否单独放一行
"prettier.jsxBracketSameLine": false,
// 是否需要 'prettierconfig' 配置文件去格式化代码
"prettier.requireConfig": false, //
// 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.trailingComma": "es5",
// 缩进不使用tab，使用空格
// "prettier.useTabs": false,
// 使用单引号代替双引号
// "prettier.singleQuote": true,
// 不让 prettier使用 eslint的代码格式进行校验
// "prettier.eslintIntegration": false,
// 不让 prettier使用 tslint的代码格式进行校验
// "prettier.tslintIntegration": false,
// 不让 prettier使用 stylelint的代码格式进行校验
// "prettier.stylelintIntegration": false,
// 在jsx中使用单引号代替双引号
// "prettier.jsxSingleQuote": false,
// 格式化的解析器，默认是babylon
// "prettier.parser": "babylon",
/*
终端的相关设置
*/
// 是否允许使用菜单栏快捷键
"terminal.integrated.allowMnemonics": true
}
如有不足，望大家多多指点！ 谢谢！