目前项目中使用的 vetur 插件内置有 prettier 格式化,也能够安装 prettier code formatter 插件,eslint 也包含部分代码风格检查的功能,eslint 和 prettier 自己就有部分规则是冲突的,致使格式化混乱,因此必须统一代码格式化规范css
为了统一你们的代码风格,统一使用项目中的配置文件做为配置项。因为 ESLint 的主要功能是代码质量检查,Prettier 的主要功能是代码风格检查,因此不要在 ESLint 中去配置代码风格相关的规则。html
npm i eslint-config-prettier eslint-plugin-prettier -D
eslint-config-prettier 关闭 Eslint 中与 Prettier 冲突的选项,eslint-plugin-prettier 将 prettier 的规则设置为 eslint 的规则,对不符合规则的进行提示vue
//.prettierrc.js module.exports = { printWidth: 160, //编辑器每行的长度,默认80 tabWidth: 4, //制表符tab的宽度,默认值是2 useTabs: false, //代码缩进是否用制表符tab,默认false semi: true, //是否使用分号,默认true,使用分号 singleQuote: true, //是否使用单引号,默认为false quoteProps: 'as-needed', //对象属性的引号使用 as-needed 仅在须要的时候使用 consistent 有一个属性须要引号,就都须要引号 preserve 保留用户输入的状况 jsxSingleQuote: false, trailingComma: 'none', //末尾逗号 none 末尾没有逗号 es5 es5有效的地方保留 all 在可能的地方都加上逗号 bracketSpacing: true, //字面量对象括号中的空格,默认true true - Example: { foo: bar }. false - Example: {foo: bar}. jsxBracketSameLine: false, arrowParens: 'avoid', //箭头函数中的括号always avoid htmlWhitespaceSensitivity: 'ignore', vueIndentScriptAndStyle: false,//是否给vue中的 <script> and <style>标签加缩进 endOfLine: 'auto', //行末尾标识 eslintIntegration: true, //不让prettier使用eslint的代码格式进行校验 }
//.eslintrc.js module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', "plugin:prettier/recommended", // '@vue/standard' ], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 'vue/script-indent': ['error', 4, { 'baseIndent': 1 }], // "quotes": [2, "single", { "avoidEscape": true }], // 使用prettier来替换eslint的规则 "prettier/prettier": "error", "no-var": 2,//禁用var,用let和const代替 "no-unused-vars": [2, { "args": "none" }], //消除未使用的变量 不检查函数的参数 "no-redeclare": 2, //禁止屡次声明同一变量 "no-dupe-keys": 2,//在建立对象字面量时不容许键重复 'eqeqeq': ['error', 'always', { null: 'ignore' }], // 强制使用全等 }, parserOptions: { parser: 'babel-eslint', "ecmaVersion": 6, "sourceType": "module" } }
//husky新版本配置方法彻底不同,这里锁定版本号 npm i husky@4.2.5 lint-stage -D
Husky 可以阻止不规范的代码提交和推送,确保本地的代码已经经过检查才能 push 到远程。node
lint-stage 的做用是只对当前修改后的文件进行扫描,即进行 git add 加入到 stage 区的文件进行扫描便可,完成对增量代码进行检查webpack
npm i @commitlint/cli @commitlint/config-conventional -D
//commitlint.config.js // https://commitlint.js.org/#/ module.exports = { extends: [ "@commitlint/config-conventional" ], rules: { // 'name:[level, 'always', 72]',level可选0, 1, 2,0为disable,1为warning,2为error,第二位为应用与否,可选always| never,第三位该rule的值 // update: 更新某功能(不是feat, 不是fix) // feat: 新增功能(feature) // fix: bug 修复 // style: 样式调整 // merge:分支合并 // revert:回滚某个更早以前的提交 // build:主要目的是修改项目构建系统(例如 glup,webpack,rollup 的配置等)的提交 // ci:主要目的是修改项目继续集成流程(例如 Travis,Jenkins,GitLab CI,Circle等)的提交 // docs:文档更新 // perf:性能, 体验优化 // refactor:重构代码(既没有新增功能,也没有修复 bug) // test:新增测试用例或是更新现有测试 // chore:不属于以上类型的其余类型 'type-enum': [2, 'always', ['update', 'feat', 'fix', 'style', 'merge', 'revert', 'build', 'ci', 'docs', 'perf', 'refactor', 'test', 'chore']], 'type-case': [0], //type小写 'type-empty': [0], //type不为为空 'scope-empty': [0], 'scope-case': [0], 'subject-full-stop': [0, 'never'], 'subject-case': [0, 'never'], 'header-max-length': [0, 'always', 72] } };
{ "name": "name", "version": "0.1.0", "description": "description", "author": "author", "private": true, "scripts": { "dev": "vue-cli-service serve", "build": "vue-cli-service build" }, "husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" } }, "lint-staged": { "src/**/*.{js,jsx,vue,json,css,less,scss,sass}": [ "prettier --write", "eslint --fix", "git add" ] }, "dependencies": { "axios": "^0.19.0", "core-js": "^2.6.5", "element-ui": "^2.12.0", "md5": "^2.2.1", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@commitlint/cli": "^12.1.4", "@commitlint/config-conventional": "^12.1.4", "@vue/cli-plugin-babel": "^3.5.0", "@vue/cli-plugin-eslint": "^3.5.0", "@vue/cli-plugin-unit-mocha": "^3.5.0", "@vue/cli-service": "^3.5.3", "@vue/eslint-config-standard": "^4.0.0", "@vue/test-utils": "1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-dynamic-import": "^6.18.0", "compression-webpack-plugin": "^2.0.0", "eslint": "^5.8.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-vue": "^5.0.0", "husky": "^4.2.5", "lint-staged": "^11.0.0", "node-sass": "^4.9.0", "sass-loader": "^7.1.0", "uglifyjs-webpack-plugin": "^2.1.2", "vue-template-compiler": "^2.5.21" } }
husky 会在你提交前,调用 pre-commit 钩子,执行 lint-staged,若是代码不符合 prettier 配置的规则,会进行格式化;而后再用 eslint 的规则进行检查,若是有不符合规则且没法自动修复的,就会中止这次提交。若是都经过了就会讲代码添加到 stage,而后 commit。ios
git add . git commit -m "feat: commit内容" git push