下载VisualStudioCode插件

打开VisualStudioCode的配置页面

打开settings.json文件

设置settings.json文件

{
 // 关闭根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 设置Tab键缩进大小
 "editor.tabSize": 2,
 // 是否开启换行
 "editor.wordWrap": "off",
 // 是否开启自动格式化粘贴后的内容
 "editor.formatOnPaste": true,
 // 保存时是否自动格式化
 "editor.formatOnSave": true,
 // 断点调试时遇到断点自动显示调试视图
 "debug.openDebug": "openOnDebugBreak",
 // 文件末尾是否加空行
 "files.insertFinalNewline": true,
 // 去掉代码结尾的分号 
 "prettier.semi": true,
 // 使用单引号替代双引号 
 "prettier.singleQuote": true,
 // 设置eslint规则生效文件. 默认为["javascript", "javascriptreact"]
 "eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   "typescript",
   "typescriptreact"
 ],
 // 自动格式化vue文件
 "[vue]": {
   // 对Vue文件使用Prettier(格式化规则)、Eslint(校验)进行格式化
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化json文件
 "[json]": {
   "editor.defaultFormatter": "vscode.json-language-features"
 },
 // 自动格式化jsonc文件
 "[jsonc]": {
   "editor.defaultFormatter": "vscode.json-language-features"
 },
 // 自动格式化html文件
 "[html]": {
   "editor.defaultFormatter": "vscode.html-language-features"
 },
 // 自动格式化javascript文件
 "[javascript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化css文件
 "[css]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化less文件
 "[less]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化scss文件
 "[scss]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化markdown文件
 "[markdown]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
 // 自动格式化jtypescript文件
 "[typescript]": {
   "editor.defaultFormatter": "vscode.typescript-language-features"
 },
 // 配置打开html文件的默认浏览器
 "open-in-browser.default": "chrome",
 // 配置文件关联
 "files.associations": {
   "*.vue": "html",
   "*.wxss": "css"
 }
}