prettier：代码格式化工具，解决 代码风格 的问题eslint：代码检查工具，解决 代码质量 的问题editorconfig：跨编辑器基本配置husky：git 钩子工具Lint-staged：在 git 暂存空间运行的 liters 工具，eslint-plugin-prettier：让 eslint 使用 prettier 规则进行检查eslint-config-prettier: 关闭所有不必要可能跟 prettier 产生冲突的规则.prettierrc
{
printWidth: 80, //单行长度
tabWidth: 2, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: true, //句末使用分号
singleQuote: true, //使用单引号
quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
jsxSingleQuote: true, // jsx中使用单引号
trailingComma: 'all', //多行时尽可能打印尾随逗号
bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
requirePragma: false, //无需顶部注释即可格式化
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
proseWrap: 'preserve', //不知道怎么翻译
htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
endOfLine: 'lf', //结束行形式
embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
}
.eslintrc
{
"extends": ["airbnb", "plugin:prettier/recommended"], // eslint扩展规则
"parser": "babel-eslint",// 向后兼容的解析器
"parserOptions": {
"ecmaVersion": 7, // 指定 ESMAScript 版本
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": { // eg如果不配置browser，window就会被eslint报undefined的错
"es6": true,
"browser": true,
"node": true
},
"plugins": ["react", "jsx-a11y", "import"],
"rules": {
// off 或 0：关闭规则
// warn 或 1：开启规则，warn 级别的错误 (不会导致程序退出)
// error 或 2：开启规则，error级别的错误(当被触发的时候，程序会退出)
"class-methods-use-this": 0,
"import/no-named-as-default": 0,
"react/jsx-filename-extension": [
"error",
{
"extensions": [".js", ".jsx"]
}
]
}
}
husky 钩子 pre-commit 配置：
"husky": {
"hooks": {
"pre-commit": "lint-staged" // pre-commit，提交前的钩子
}
},
"lint-staged": {
// 此处可以配置文件夹和文件类型的范围
"src/**/*.{jsx,tsx,ts,js,json,css,md}": [
"prettier --write", // 先使用prettier进行格式化
"eslint --fix", // 再使用eslint进行自动修复
"git add" // 所有通过的话执行git
]
},