前言
我的项目做迁徙，须要一个全新的环境，刚好是时候祭出欠缺的格局治理来对代码做校验了。
配置过程
eslint
lint 代码的次要工具，所以的一切都是基于此包.eslintrc 文件
{ "env": { "browser": true, "es6": true, "amd": true }, "extends": ["eslint:recommended", "prettier"], "parser": "babel-eslint", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins": ["react"], "rules": { "no-prototype-builtins": 0, "prefer-promise-reject-errors": 0, "no-async-promise-executor": 0, "no-misleading-character-class": 0, "no-useless-catch": 0, "no-console": "error", "no-unused-vars": 0, "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1 }}根底配置
npm i -D eslint # 装置eslintnpm i -D babel-eslint # 一个对 Babel 解析器的包装，使其可能与 ESLint 兼容。npm i -D @typescript-eslint/parser # 将 TypeScript 转换成与 estree 兼容的模式，以便在 ESLint 中应用扩大配置
npm i -D eslint-config-airbnb eslint-config-prettier eslint-config-standard- eslint-config-airbnb: 提供了所有的 Airbnb 的 ESLint 配置，作为一种扩大的共享配置，你是能够批改笼罩掉某些不须要的配置的，该工具包蕴含了 react 的相干 Eslint 规定(eslint-plugin-react 与 eslint-plugin-jsx-a11y)，所以装置此依赖包的时候还须要装置方才提及的两个插件
- eslint-config-prettier: 将会禁用掉所有那些非必须或者和 prettier 抵触的规定。这让您能够应用您最喜爱的 shareable 配置，而不让它的格调抉择在应用 Prettier 时碍事。请留神该配置只是将规定 off 掉,所以它只有在和别的配置一起应用的时候才有意义。
- eslint-config-standard: 是一个标准配置，旨在让所有开发者不须要保护 .eslintrc, .jshintrc, or .jscsrc
插件配置
npm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react- eslint-plugin-import: 该插件想要反对对 ES2015+ (ES6+) import/export 语法的校验, 并避免一些文件门路拼错或者是导入名称谬误的状况
- eslint-plugin-jsx-a11y: 该依赖包专一于查看 JSX 元素的可拜访性。
- eslint-plugin-prettier: 该插件辅助 Eslint 能够平滑地与 Prettier 一起合作，并将 Prettier 的解析作为 Eslint 的一部分，在最初的输入能够给出修改意见。这样当 Prettier 格式化代码的时候，仍然可能遵循咱们的 Eslint 规定。如果你禁用掉了所有和代码格式化相干的 Eslint 规定的话，该插件能够更好得工作。所以你能够应用 eslint-config-prettier 禁用掉所有的格式化相干的规定(如果其余无效的 Eslint 规定与 prettier 在代码如何格式化的问题上不统一的时候，报错是在劫难逃的了)
- eslint-plugin-react: React 专用的校验规定插件
prettier
一个代码格式化工具，相比于 ESLint 中的代码格局规定，它提供了更少的选项，然而却更加业余。.prettierrc.js 文件
module.exports = { printWidth: 100, // 一行最大多少字符 tabWidth: 4, // tab占用的字符数 useTabs: false, // 是否应用tab代替空格 semi: true, // 是否每句后都加分号 singleQuote: true, // 是否应用单引号 bracketSpacing: true, // { key: value } 格局 arrowParens: 'avoid', // 箭头函数参数是否应用 () quoteProps: 'as-needed', // 按需增加引号 trailingComma: 'none' // 数组尾逗号};几个工具之间的关系是：prettier 是最根底的，而后你须要用 eslint-config-prettier 去禁用掉所有和 prettier 抵触的规定，这样才能够应用 eslint-plugin-prettier 去以合乎 eslint 规定的形式格式化代码并提醒对应的批改倡议。
应用husky + lint-staged
在提交前对代码进行校验
npm i -D husky lint-staged- husky: 可能帮你阻挡住不好的代码提交和推送。是一个 git 钩子工具，咱们这里次要用 pre-commit 钩子。艰深点讲就是 husky 能够在你 commit 之前帮你做一些事件。
- lint-staged: 在你提交的文件中，执行自定义的指令。自定义指令能够是你 eslint 相干，也能够是其余命令
在 package.json 中增加以下配置
"husky": { "hooks": { "pre-commit": "lint-staged" }},"lint-staged": { "*.js": [ "prettier --write" ], "*.ts?(x)": [ "eslint", "prettier --parser=typescript --write" ]},应用 commitlint
应用 commitlint 对commit-msg进行校验
npm i -D @commitlint/cli @commitlint/config-conventional配置 commitlint.config.js
/* eslint-disable no-undef */module.exports = { extends: ['@commitlint/config-conventional']};// build：次要目标是批改我的项目构建零碎(例如 glup，webpack，rollup 的配置等)的提交// ci：次要目标是批改我的项目持续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交// docs：文档更新// feat：新增性能// merge：分支合并 Merge branch ? of ?// fix：bug 修复// perf：性能, 体验优化// refactor：重构代码(既没有新增性能，也没有修复 bug)// style：不影响程序逻辑的代码批改(批改空白字符，格局缩进，补全缺失的分号等，没有扭转代码逻辑)// test：新增测试用例或是更新现有测试// revert：回滚某个更早之前的提交// chore：不属于以上类型的其余类型在 package.json 中增加以下配置
"husky": { "hooks": { "pre-commit": "lint-staged", "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" }},应用stylelint
应用stylelint 对所有的css书写程序及格局进行校验
npm i stylelint stylelint-config-recess-order stylelint-config-standard stylelint-order stylelint-scss -D配置.stylelintrc.js
module.exports = { extends: ['stylelint-config-standard', 'stylelint-config-recess-order'], rules: { 'at-rule-no-unknown': [ true, { ignoreAtRules: ['mixin', 'extend', 'content', 'include', 'function', 'return'] } ], indentation: 4, 'no-descending-specificity': null, // 禁止特异性较低的选择器在特异性较高的选择器之后重写 'font-family-no-missing-generic-family-keyword': null, 'function-name-case': null }};配置 .stylelintignore 文件(默认不格式化node_modules)
*.min.css # 其余类型文件*.js*.jpg*.woff # 测试和打包目录/test//dist/在package.json增加如下配置
"lint-staged": { "*.js": [ "prettier --write" ], "*.ts?(x)": [ "eslint", "prettier --parser=typescript --write" ], "*.{html,css,scss}": [ "stylelint --fix", "prettier --write" ]}vscode 增加插件 stylelint-plus，在settings.json中增加如下配置
"stylelint.autoFixOnSave": true参考文档
腾讯云开发者手册 eslint
通过ESLint和Prettier对立团队代码标准.
应用 husky、commitlint 和 lint-staged 来构建你的前端工作流（vue、react、dva）
代码格调对立： 应用husky, prettier, eslint在代码提交时主动格式化，并查看代码。