1. 代码规范设置
（1）安装 Vetur、ESLint、Prettier - Code formatter这三个插件，安装后重启另外这里有个坑， Beautify插件会占用格式化代码的快捷键，因此会和prettier产生冲 突，所以直接禁用掉。
（2）vscode的setting设置，这里有两个，一个是用户设置，全局的，一个是工作区的设置，建议在工作区设置，这样不影响其他，配置如下：
{ //.vue文件template格式化支持，并使用js-beautify-html插件 "vetur.format.defaultFormatter.html": "js-beautify-html", //js-beautify-html格式化配置，属性强制换行 "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, //根据文件后缀名定义vue文件类型 "files.associations": { "*.vue": "vue" }, //配置 ESLint 检查的文件类型 "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], //保存时eslint自动修复错误 "eslint.autoFixOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }}
（3）由于需要同时使用prettier和eslint，但这两个会冲突，esllint的规则配置在.eslintrc.js中，可如下配置
module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "eslint:recommended"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", "vue/no-reserved-keys": false, }, parserOptions: { parser: "babel-eslint", }, rules: { "accessor-pairs": 2, "arrow-spacing": [ 2, { before: true, after: true, }, ], "block-spacing": [2, "always"], "brace-style": [ 2, "1tbs", { allowSingleLine: true, }, ], camelcase: [ 0, { properties: "always", }, ], "comma-dangle": [2, "never"], "comma-spacing": [ 2, { before: false, after: true, }, ], "comma-style": [2, "last"], "constructor-super": 2, curly: [2, "multi-line"], "dot-location": [2, "property"], "eol-last": 2, eqeqeq: [2, "allow-null"], "generator-star-spacing": [ 2, { before: true, after: true, }, ], "handle-callback-err": [2, "^(err|error)$"], indent: [ 2, 2, { SwitchCase: 1, }, ], "jsx-quotes": [2, "prefer-single"], "key-spacing": [ 2, { beforeColon: false, afterColon: true, }, ], "keyword-spacing": [ 2, { before: true, after: true, }, ], "new-cap": [ 2, { newIsCap: true, capIsNew: false, }, ], "new-parens": 2, "no-array-constructor": 2, "no-caller": 2, "no-console": "off", "no-class-assign": 2, "no-cond-assign": 2, "no-const-assign": 2, "no-control-regex": 0, "no-delete-var": 2, "no-dupe-args": 2, "no-dupe-class-members": 2, "no-dupe-keys": 2, "no-duplicate-case": 2, "no-empty-character-class": 2, "no-empty-pattern": 2, "no-eval": 2, "no-ex-assign": 2, "no-extend-native": 2, "no-extra-bind": 2, "no-extra-boolean-cast": 2, "no-extra-parens": [2, "functions"], "no-fallthrough": 2, "no-floating-decimal": 2, "no-func-assign": 2, "no-implied-eval": 2, "no-inner-declarations": [2, "functions"], "no-invalid-regexp": 2, "no-irregular-whitespace": 2, "no-iterator": 2, "no-label-var": 2, "no-labels": [ 2, { allowLoop: false, allowSwitch: false, }, ], "no-lone-blocks": 2, "no-mixed-spaces-and-tabs": 2, "no-multi-spaces": 2, "no-multi-str": 2, "no-multiple-empty-lines": [ 2, { max: 1, }, ], "no-native-reassign": 2, "no-negated-in-lhs": 2, "no-new-object": 2, "no-new-require": 2, "no-new-symbol": 2, "no-new-wrappers": 2, "no-obj-calls": 2, "no-octal": 2, "no-octal-escape": 2, "no-path-concat": 2, "no-proto": 2, "no-redeclare": 2, "no-regex-spaces": 2, "no-return-assign": [2, "except-parens"], "no-self-assign": 2, "no-self-compare": 2, "no-sequences": 2, "no-shadow-restricted-names": 2, "no-spaced-func": 2, "no-sparse-arrays": 2, "no-this-before-super": 2, "no-throw-literal": 2, "no-trailing-spaces": 2, "no-undef": 2, "no-undef-init": 2, "no-unexpected-multiline": 2, "no-unmodified-loop-condition": 2, "no-unneeded-ternary": [ 2, { defaultAssignment: false, }, ], "no-unreachable": 2, "no-unsafe-finally": 2, "no-unused-vars": [ 2, { vars: "all", args: "none", }, ], "no-useless-call": 2, "no-useless-computed-key": 2, "no-useless-constructor": 2, "no-useless-escape": 0, "no-whitespace-before-property": 2, "no-with": 2, "one-var": [ 2, { initialized: "never", }, ], "operator-linebreak": [ 2, "after", { overrides: { "?": "before", ":": "before", }, }, ], "padded-blocks": [2, "never"], quotes: [ 2, "single", { avoidEscape: true, allowTemplateLiterals: true, }, ], semi: [2, "never"], "semi-spacing": [ 2, { before: false, after: true, }, ], "space-before-blocks": [2, "always"], "space-before-function-paren": [2, "never"], "space-in-parens": [2, "never"], "space-infix-ops": 2, "space-unary-ops": [ 2, { words: true, nonwords: false, }, ], "spaced-comment": [ 2, "always", { markers: [ "global", "globals", "eslint", "eslint-disable", "*package", "!", ",", ], }, ], "template-curly-spacing": [2, "never"], "use-isnan": 2, "valid-typeof": 2, "wrap-iife": [2, "any"], "yield-star-spacing": [2, "both"], yoda: [2, "never"], "prefer-const": 2, "no-": process.env.NODE_ENV === "production" ? 2 : 0, "object-curly-spacing": [ 2, "always", { objectsInObjects: false, }, ], "array-bracket-spacing": [2, "never"], },};
然后prettier的配置可以新建**.prettierrc或者直接在setting.json中**
{
//开启 eslint 支持
"prettier.eslintIntegration": true,
//使用单引号
"prettier.singleQuote": true,
//结尾不加分号
"prettier.semi": false,
}
两边设置一致，这样不冲突，不过后面实践证明，prettier不设置好像也没事
