写在前面:
- ESLint: Find and fix problems in your JavaScript code.
- Prettier: Prettier is an opinionated code formatter.
- Husky: Husky can prevent bad git commit, git push and more.
- Lint-staged: Run linters against staged git files and don't let 💩 slip into your code base!
- EditorConfig: EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
- Stylelint: A mighty, modern linter that helps you avoid errors and enforce - conventions in your styles.
- 开发工具:VS Code、插件: Prettier,ESLint
- 开发框架:React V16+、React CLI
- 版本控制:Git
- 参考资料:
- git hooks
- eslint-plugin-react: React specific linting rules for ESLint
- Configuring Prettier Options
- VS Code Docs
- line endings: 配置 Git 处理行结束符
- eslint-plugin-react-hooks: React Hook 规则 ESLint 插件
搭建项目:
npx create-react-app [your-project-name]
cd [your-project-name]
# npm run eject
初始化 ESLint 配置文件:
./node_modules/.bin/eslint --init
根据问题选择自己喜欢的配置(选错也没事,后面可以在配置文件里修改)完成以后会在项目根目录生成 .eslintrc.js 文件。
.eslintrc.js:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: 'eslint:recommended',
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
_: true,
},
parser: 'babel-eslint', // 解决 实验性的 public class fields 语法 报错问题
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['react', 'react-hooks'],
rules: {
'react-hooks/rules-of-hooks': 'error', // 检查 Hook 的规则
'react-hooks/exhaustive-deps': 'warn', // 检查 effect 的依赖
indent: [
'error',
2,
{
SwitchCase: 1,
},
],
// 'linebreak-style': ['error', 'unix'], // 换行符 Mac:'unix' -> LF,win:'windows' -> CRLF
quotes: ['error', 'single'],
semi: ['error', 'always'],
'multiline-ternary': ['error', 'always-multiline'], // 三目运算符换行
'react/jsx-uses-react': 'error', // Prevent React to be incorrectly marked as unused
'react/jsx-uses-vars': 'error', // Prevent variables used in JSX to be incorrectly marked as unused
'no-console': 'off',
},
};
初始化 Prettier 配置:
在根目录下新建 .prettierrc.js
文件:
module.exports = {
trailingComma: 'all',
printWidth: 80,
tabWidth: 2,
semi: true,
singleQuote: true,
jsxBracketSameLine: true,
jsxSingleQuote: true,
arrowParens: 'always',
};
安装 Prettier、husky、lint-staged:
npm install --save-dev --save-exact prettier
npm install --save-dev husky
npm install --save-dev lint-staged
注意
:一定要使用 --save-dev
安装在 devDependencies
下。
初始化 lint-staged 配置:
npx mrm lint-staged
完成后会在 package.json 中生成 husky 和 lint-staged 配置(以下为手动修改后的配置):
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,css,less,json,md}": [
"prettier --write",
"git add"
],
"**/*.less": "stylelint --syntax less",
"**/*.{js,jsx}": "npm run lint-staged:js"
},
配置 stylelint:
npm install stylelint --save-dev
在根目录下新建 .stylelintrc.js
文件:
module.exports = {
extends: 'stylelint-config-standard',
rules: {
'block-no-empty': true,
'comment-empty-line-before': [
'always',
{
ignore: ['stylelint-commands', 'after-comment'],
},
],
indentation: [2],
'max-empty-lines': 2,
},
};
可能会遇到以下报错:
Could not find "stylelint-config-standard". Do you need a `configBasedir`?
解决方案:
npm install stylelint-config-standard --save-dev
配置 package.json 中的脚本命令:
"scripts": {
"lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "check-prettier lint",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"prettier": "prettier -c --write \"**/*\""
},
VS Code 安装 Prettier、ESLint 插件(不会的自行 Google)
配置 VS Code 编辑器:
这里只示例配合 prettier 插件使用的配置,当保存文件的时候将自动格式化代码:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
创建可移植的自定义编辑器设置:
在根目录下新建 .editorconfig
文件,配置如下:
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
其他配置:
如果不需要 ‘行结束符’
配置,则 把 .editorconfig
中的 end_of_line
和 .eslintrc.js
文件中 rules
下的 linebreak-style
注释掉,或者干脆不配置editorconfig文件,使用默认配置。
在项目根目录新建 .gitattributes
文件,配置如下:
* text=auto
'linebreak-style': ['error', 'unix'],
// 换行符。 Mac 使用 'unix' 对应 LF,Win 使用 'windows' 对应 CRLF
如果需要 ‘行结束符’ 配置,例如使用 LF 。则 .editorconfig
中配置 end_of_line = lf
,.eslintrc.js
中 rules
配置 linebreak-style: ['error', 'unix']
另外再给 VS Code 配置 "files.eol": "\n"
,最好再给 .gitattributes
添加配置 *.js text eol=lf
, *.jsx text eol=lf
等等,全部提交之后,把本地项目文件全删除,重新 clone。
.gitattributes 配置参考网上的。一般不用这个 行结束符 配置。
参考:line endings
写在最后:
以上配置均可在 写在最前 的链接中找到,可以根据自己的风格进行配置。