vscode 需要安装 vetur , prettier, eslint ,stylelint 插件
vue项目工程安装以下插件
cnpm i eslint-plugin-prettier -S -D
cnpm i eslint-config-prettier -S -D
cnpm i prettier -S -D
cnpm i stylelint stylelint-config-standard -S -D
cnpm install stylelint-order stylelint-config-rational-order -S -D
cnpm install stylelint-config-prettier -S -D
cnpm i stylelint-declaration-block-no-ignored-properties -S -D
cnpm i stylelint-scss -S -D
package.json 最终含一下插件
全部配置:package.json
//
{ "name": "eslintdemo", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "fix": "eslint --fix --quiet --cache --ext .js,.vue src/" }, "dependencies": { "core-js": "^3.6.5", "eslint-config-prettier": "^7.1.0", "eslint-plugin-prettier": "^3.3.1", "prettier": "^2.2.1", "stylelint": "^13.8.0", "stylelint-config-prettier": "^8.0.2", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^20.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.3.0", "stylelint-order": "^4.1.0", "stylelint-scss": "^3.18.0", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-airbnb": "^5.0.2", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-config-prettier": "^7.1.0", "eslint-plugin-import": "^2.20.2", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^6.2.2", "lint-staged": "^9.5.0", "prettier": "^2.2.1", "sass": "^1.26.5", "sass-loader": "^8.0.2", "stylelint": "^13.8.0", "stylelint-config-prettier": "^8.0.2", "stylelint-config-rational-order": "^0.1.2", "stylelint-config-standard": "^20.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.3.0", "stylelint-order": "^4.1.0", "stylelint-scss": "^3.18.0", "vue-template-compiler": "^2.6.11" }, "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,jsx,vue}": [ "npm run fix", "git add" ] } }
根目录新增文件 .stylelintrc.js
module.exports = { ignoreFiles:[], extends: [ 'stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier' ], plugins: ['stylelint-scss','stylelint-order','stylelint-declaration-block-no-ignored-properties'], rules: { 'no-empty-source':null, 'plugin/declaration-block-no-ignored-properties':true, 'indentation':'tab', 'rule-empty-line-before':'never', 'no-descending-specificity':null, 'selector-combinator-space-after':'always' } }
更目录新增文件 .prettierrc.js
module.exports = { 'printWidth': 140, //一行的字符数，如果超过会进行换行，默认为140 'tabWidth': 2, //一个tab代表几个空格数，默认为80 'useTabs': true, //是否使用tab进行缩进，默认为false，表示用空格进行缩减 'singleQuote': true, //字符串是否使用单引号，默认为false，使用双引号 'semi': true, //在语句末尾打印分号，默认为true 'trailingComma': "none", //是否使用尾逗号，有三个可选值"<none|es5|all>" all效果{name:"asd",} 'bracketSpacing': true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar } /* * jSXBrackets html标签结束符号>是否换行 默认false * false换行效果:<button * id="prettier-id" * onClick={this.handleClick} * > * * true 不换行效果:<button * id="prettier-id" * onClick={this.handleClick}> * * */ 'jSXBrackets':true, /** * arrowParens 箭头函数参数是否使用() 默认avoid * always 使用 效果: (x) => x * avoid 不适用 效果: x => x */ 'arrowParens': 'always', /** * endOfLine 行结束 * "lf"–仅 换行（），在Linux和macOS以及git repos内部通用 * "crlf"-回车符+换行符（ ），在Windows上很常见 * "cr"-仅回车符（ ），很少使用 * "auto" -维持现有的行尾（通过查看第一行后的内容对一个文件中的混合值进行归一化） */ 'endOfLine':'lf' };
修改 .editorconfig
[*.{js,jsx,ts,tsx,vue}] indent_style = space #缩进方式tab/space indent_size = 2 #缩进大小 end_of_line = lf #行结束 仅 换行（），在Linux和macOS以及git repos内部通用 trim_trailing_whitespace = true #删除尾部空格 insert_final_newline = true #末尾是否添加新的一行 max_line_length = 140 #每行最大长度换行长度
修改 .eslintrc.js
module.exports = { root: true, env: { //使用的环境node环境,浏览器 如果不配置在使用全局变量时会报错如:js全局对象window,node中process对象 node: true, browser:true, es6:true }, extends: ['plugin:vue/essential', '@vue/airbnb','plugin:prettier/recommended'], parserOptions: { parser: 'babel-eslint', }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', }, };
新建.vscode文件夹 里面新建 setting.json
{ "eslint.validate":["javascript", "vue"], "vetur.validation.template": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.stylelint": true }, "javasccript.format.enable":false, "vetur.completion.autoImport":true, "vetur.experimental.templateInterpolationService":true, "vetur.format.enable":false, "css.validate":false, "scss.validate":false, "less.validate":false }