前言
我的项目做迁徙,须要一个全新的环境,刚好是时候祭出欠缺的格局治理来对代码做校验了。
配置过程
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 # 装置 eslint
npm 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 在代码提交时主动格式化,并查看代码。