代码格式化可以代码保持整洁，让团队拥有统一的代码风格和规范。VSCode 上有很多代码格式化的插件，如 Beautify, Prettier 等，但我推荐使用 Vetur。
大多数同学可能只注意到 Vetur 是编辑器识别 vue 文件的必备插件，却不知道它可以用来格式化代码。你只有真的用了之后你会发现，真香。
但使用 Vetur 格式化代码时，你可能会发现 Vetur 格式化代码的规则与 ESLint 冲突，具体表现为结尾逗号，结尾分号，函数后无空格。
解决方案是修改 setting.json 配置（文件 => 首选项 => 设置 => 搜索setting.json），贴下个人 setting.json 配置。
{ "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "[javascript]": { "editor.defaultFormatter": "octref.vetur" }, // 注意：加了下面的设置后，在函数前加空格的的配置才生效 "vetur.format.defaultFormatter.js": "vscode-typescript", // 在函数名称前加一个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 保存时自动格式化代码 "editor.formatOnSave": true, // 保存时自动修复 eslint 报错 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
效果如下：
注意，修改 setting.json 配置后重启下VSCode软件。
期间遇到vetur缩进switch的格式与eslint不一致 需要在.eslintrc.js文件中的indent里增加{ SwitchCase: 1 }
const isPro = process.env.NODE_ENV === "production"; module.exports = { root: true, parserOptions: { parser: "babel-eslint", ecmaVersion: true }, env: { browser: true, es6: true, }, extends: ['plugin:vue/essential'], plugins: ["vue"], // "off"或者0 关闭规则关闭 // "warn"或者1 在打开的规则作为警告（不影响退出代码） // "error"或者2 把规则作为一个错误（退出代码触发时为1） rules: { "vue/no-use-v-if-with-v-for": ["error", { "allowUsingIterationVar": true }], // 代码风格规范 "quotes": [2, "single"], //字符串使用单引号 "space-infix-ops": 2, // 操作符周围要有空格 "spaced-comment": 2, //注释风格要有空格 "comma-spacing": 2, //逗号后要有空格 "comma-style": [2, "last"], //逗号风格，换行时在行首还是行尾 "consistent-this": [2, "_this"], //this别名 "curly": [2, "all"], //必须使用 if(){} 中的{} "brace-style": [2, "1tbs"], // 大括号和关键字在同一行 "no-unused-vars": [0, { "vars": "all", "args": "after-used" }], //不能有声明后未被使用的变量或参数 "no-use-before-define": 0, //未定义前不能使用 "arrow-parens": 2, //箭头函数用小括号括起来 "no-multiple-empty-lines": [1, { "max": 2 }], //空行最多不能超过2行 "operator-linebreak": [2, "after"], //换行时运算符在行尾还是行首 "indent": [2, 2, { SwitchCase: 1 }], //缩进风格,缩进两格 "comma-dangle": [2, "never"], //对象字面量项尾不能有逗号 "dot-location": 2, //对象访问符的位置，换行的时候在行首还是行尾 "func-call-spacing": 2, //函数调用不要空格 "key-spacing": [2, { "afterColon": true, "mode": "strict" }], // key的冒号后面要有空格 "no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1} "no-duplicate-case": 2,//switch中的case标签不能重复 "no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3. "no-multi-spaces": 2,//不能用多余的空格 "no-multi-str": 2, //字符串不能用\换行 "object-property-newline": 0, //对象属性换行时注意统一代码风格。 "padded-blocks": 0,//块语句内行首行尾是否要空行 "vue/v-bind-style": ["error", "shorthand"], "vue/v-on-style": ["error", "shorthand"], "prefer-destructuring": 0, "class-methods-use-this": 0, "no-mixed-operators": 0, "max-len": 0, //字符串最大长度 "no-unused-expressions": 2, //禁止无用的表达式 "import/no-dynamic-require": 0, "func-names": 0, //函数表达式必须有名字 "no-underscore-dangle": 0, //标识符不能以_开头或结尾 "no-restricted-properties": 0, "no-restricted-syntax": 0, "no-prototype-builtins": 0, "no-plusplus": 0, //禁止使用++，-- "one-var": 0, //连续声明 "no-tabs": 0, "prefer-const": 0, //首选const "global-require": 0, "guard-for-in": 0, //for in循环要用if语句过滤 "import/extensions": 0, "no-console": 0, "no-return-assign": 0, //return 语句中不能有赋值表达式 "no-param-reassign": 0, //禁止给参数重新赋值 "no-nested-ternary": 0, //禁止使用嵌套的三目运算 "camelcase": 0, //强制驼峰法命名 "eqeqeq": 0,//必须使用全等 "import/no-extraneous-dependencies": 0, "no-debugger": isPro ? "error" : "off" } }