使用Prettier (可选)
因为在create-react-app中明确提到建议使用Prettier所以我们需要使用到Prettier
接下来我们需要当不符合Prettier的规则下报错所以我们要安装这两个依赖
yarn add prettier
yarn add eslint-plugin-prettier
修改.eslintrc.json
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
接下来创建.prettierrc.js来设置一些规则
module.exports = {
singleQuote: true
};
要在 git 中进行提交时格式化代码，我们需要安装以下依赖项
yarn add husky lint-staged prettier
- husky 使得使用 githooks 变得很容易，就好像它们是 npm 脚本一样。
- lint-staged 允许我们在 git 中的 staged 文件上运行脚本
- prettier 的是我们将在提交运行之前的 JavaScript 格式化程序。
将以下字段添加到 package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
现在，无论何时进行提交，Prettier 都会自动格式化已更改的文件。你也可以在配置完成后运行一次 ./node_modules/.bin/prettier --single-quote --write "src/*/.{js,jsx,ts,tsx,json,css,scss,md}" 来格式化整个项目。
使用Airbnb (可选)
当然我们也可以使用业内最严的Airbnb规范
我们在第一章中使用的ESLint为react-app如果我们想更加精准的定位我们书写react的style的话，建议使用airbnb。
首先在安装最新版ESLint的情况下敲出ESLint --init根据指示选择
image.png
接下来我们的package.json 就会变成
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-plugin-import": "^1.11.0",
"antd": "^3.10.7",
"customize-cra": "^0.2.12",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"node-sass": "^4.11.0",
"react": "^16.8.6",
"react-app-rewired": "^2.1.1",
"react-dom": "^16.8.6",
"react-redux": "^7.0.2",
"react-scripts": "2.1.8",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
我们的.eslintrc.js会变成
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
},
};
接下来我们就可以结合redux来拓展 并且改变目录结构 开始第三章学习
link
或者使用redux请传送至//www.greatytc.com/p/5ef98fb7f946基于本列进行拓展
