一、代码格式化标准
目前我的项目中应用的 vetur 插件内置有 prettier 格式化，也能够装置 prettier code formatter 插件，eslint 也蕴含局部代码格调查看的性能，eslint 和 prettier 自身就有局部规定是抵触的，导致格式化凌乱，所以必须对立代码格式化标准
1、vscode 中的配置优先级
- 默认配置文件（优先级最低）
- 用户配置文件（优先级次之）
- 工程配置文件 （优先级最高）
为了对立大家的代码格调，对立应用我的项目中的配置文件作为配置项。因为 ESLint 的次要性能是代码质量检查，Prettier 的次要性能是代码格调查看，所以不要在 ESLint 中去配置代码格调相干的规定。
- prettier。 一个很风行的代码格式化工具，你很容易在编辑器找到实现它的各种插件，这里用它在代码提交前做代码格式化。
- eslint。 代码查看工具。eslint 也能够负责一部分代码格局查看的工作，然而 prettier 曾经做的很好了，所以我便没用 eslint 的代码格局查看，只让其负责代码谬误查看。
2、解决配置抵触
npm i eslint-config-prettier eslint-plugin-prettier -Deslint-config-prettier 敞开 Eslint 中与 Prettier 抵触的选项，eslint-plugin-prettier 将 prettier 的规定设置为 eslint 的规定，对不合乎规定的进行提醒
3、prettierrc 配置文件阐明
//.prettierrc.jsmodule.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的代码格局进行校验}4、eslint 配置文件阐明
//.eslintrc.jsmodule.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" }}三、代码提交标准
1、装置 husky 和 lint-stage
//husky新版本配置办法齐全不一样，这里锁定版本号npm i husky@4.2.5 lint-stage -DHusky 可能阻止不标准的代码提交和推送，确保本地的代码曾经通过查看能力 push 到近程。
lint-stage 的作用是只对以后批改后的文件进行扫描，即进行 git add 退出到 stage 区的文件进行扫描即可，实现对增量代码进行查看
2、配置 commitlint 提交规定
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] }};3、配置 package.json 文件
{ "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" }}4、提交代码
husky 会在你提交前，调用 pre-commit 钩子，执行 lint-staged，如果代码不合乎 prettier 配置的规定，会进行格式化；而后再用 eslint 的规定进行查看，如果有不合乎规定且无奈主动修复的，就会进行此次提交。如果都通过了就会讲代码增加到 stage，而后 commit。
git add .git commit -m "feat: commit内容"git push本文由博客一文多发平台 OpenWrite 公布！