前言
由于使用ACR的方式创建react工程时,并不会像vue一样有每一步的安装提示,需要我们在创建工程后自己手动添加需要的基础库,例如我们今天要使用的eslint、prettier等。
所以写个博客记录下如何添加。
记得vscode该装的插件都要装上。
创建
旧官网现在只提供了next.js的创建方式,其实把next换成react就可以了(新官网)
## 使用 npx
npx create-react-app my-app
npx create-react-app my-app --template typescript
## 使用 npm
npm init react-app my-app --template typescript
## 使用 yarn
yarn create react-app my-app --template typescript
eslint安装
首先提前安装我们需要的eslint关于ts校验的依赖。
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -save-dev
如果最后一个安装不了(有可能是node版本问题),要么用nvm换低版本,就是不想换可以单独安装
npm i @typescript-eslint/eslint-plugin -save-dev --legacy-peer-deps
此时可以看到
然后初始化eslint
npx eslint --init
跟着步骤操作(第一个问题选第二个,这样我们后面就不会被问要什么默认风格了;ts的我们前面装了,这里步骤里就不需要加了)
完成后会生成一些相关的东西:
有可能你的node版本问题,会提示安装不了对应的库,可强行手动安装
npm i eslint-plugin-react -save-dev --legacy-peer-deps
然后我们写个执行脚本"lint": " eslint 'src/**/*.+(js|ts|jsx|tsx)' "
这我们以后可以通过执行npm run lint
看到错误信息有哪些,还可以通过npm run lint --fix
来自动修复所有的文件(先不着急)。
prettier安装
同样,安装我们需要的依赖
eslint-config-prettier
禁用所有和 Prettier 产生冲突的规则eslint-plugin-prettier
把 Prettier 应用到 Eslint,配合 rules"prettier/prettier": "error"
实现 Eslint 提醒。
npm install prettier eslint-config-prettier eslint-plugin-prettier -save-dev
同样的,安装失败的试试单独安装后面加上
--legacy-peer-deps
同样,我们可以加个执行脚本"format": " prettier --write 'src/**/*.+(js|ts|jsx|tsx)' "
这样可以通过运行npm run format
格式化所有文件(先不着急)
接着在根目录下创建.prettierrc.js文件:
module.exports = {
// 箭头函数只有一个参数的时候可以忽略括号
arrowParens: 'avoid',
// 括号内部不要出现空格
bracketSpacing: true,
// 行结束符使用 Unix 格式
endOfLine: 'lf',
// true: Put > on the last line instead of at a new line
jsxBracketSameLine: false,
// 行宽
printWidth: 100,
// 换行方式
proseWrap: 'preserve',
// 分号
semi: false,
// 使用单引号
singleQuote: true,
// 缩进
tabWidth: 2,
// 使用 tab 缩进
useTabs: false,
// 后置逗号,多行对象、数组在最后一行增加逗号
trailingComma: 'es5',
parser: 'typescript',
}
另外附带其他规则以供参考:
/**
* https://prettier.io/docs/en/options.html:请确保先执行了 yarn add prettier
* 项目代码风格优先级
* 1. .perttierc.js
* 2. .editorconfig
* 3. vscode中的设置
*/
module.exports = {
// 指定打印机将换行的行长度。默认 80
printWidth: 100,
// 指定每个缩进级别的空格数。默认 2
// tabWidth: 2,
// 指定使用制表符缩进行。 默认 false
// useTabs: false,
// 在语句末尾打印分号。默认 true
// semi: true,
// 使用单引号而不是双引号。默认 false
singleQuote: true,
// 引用对象中的属性时更改:默认 as-needed-仅在需要时在对象属性周围添加引号。可选"consistent" - 如果对象中至少有一个属性需要引号,则引用所有属性。"preserve" - 尊重对象属性中引号的输入用法。
// quoteProps: 'as-needed',
// 在jsx中使用单引号。默认 false
jsxSingleQuote: true,
// 多行时尽可能打印尾随逗号。默认 none-没有尾随逗号。可选:es5:在ES5中有效的尾随逗号(对象、数组等)。例如本文件,设置成 es5,就算你最后一个属性-属性值没有加逗号,也会帮你自动加上逗号
trailingComma: 'es5',
// 在对象文字中打印括号之间的空格。默认 true
// bracketSpacing: true,
// 将>多行JSX元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。默认false
// jsxBracketSameLine: false,
// 在单个箭头函数参数周围加上括号。默认 avoid-尽可能的省略parens。例 x => x。可选 "always"-使用包括parens。例 (x) => x
arrowParens: 'avoid',
// 指定格式化文件的开始行。默认 0
// rangeStart: 0,
// 指定格式化文件的结束行。默认 Infinity
// rangeEnd: Infinity
// 指定要使用的解析器。prettier会自动从输入文件路径中推断出解析器。因此不必更改此设置。默认 babylon
// parser: 'babylon'
// 指定用于推断要使用的解析器的文件名
// filepath: ''
// 需要编译指示。默认 false
// requirePragma: false
// 插入Pragma。默认 false
// insertPragma: false
// 散文包裹。默认 preserve-按原样包装散文。可选,always-如果超过打印宽度就包装。never-不要包装
// proseWrap: 'preserve'
// HTML空白灵敏度 默认 css-尊重css display属性的默认值。可选:strict-空格被认为是敏感的,ignore-空格被认为是不敏感的
// htmlWhitespaceSensitivity: 'css',
// 行结尾:默认 auto-维护现有的行结尾,可选 lf-(\n),在Linux和macOS以及git repos 内部很常见 crlf-回车符+换行符(\r\n), 在Windows上很常见 cr-仅限回车符,很少使用
// endOfLine: 'auto',
};
然后还可以设置不需要格式化的文件,也在根目录中创建文件.prettierignore
:
# Ignore artifacts:
build
coverage
.eslintrc.js完善
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"overrides": [
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
独立的vscode设置
在根目录创建:
需要在这个文件设置什么下面配置git提交钩子时会说。
为什么不直接全局做vscode设置:
- 因为每个项目可能需要的配置是不一样的
- 每个人都有自己的设置习惯,不要破坏别人的习惯
到这一步要重启vscode
记得重启vscode确保所有操作都生效,可以执行npm run format
格式化所有文件了。
如果执行npm run lint
和npm run format
出现以下报错
目前我不知道咋搞,等后面我再研究下。
如果出现因为eslint存在多个版本问题项目无法启动的情况,就把react-scripts依赖更新一下就可以了。如果有推荐执行修复指令不要执行哦!
建议也安装@craco/craco,方便改webpack配置,具体百度下。
husky
这个工具能保证提交到git仓库的代码都是符合eslint规范的。
安装依赖
npm install husky -save-dev
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run format"
npx husky add .husky/pre-commit "git add ."
可以看到新增了文件:
当我们用git提交代码的时候,会自动执行脚本(上面我们添加的)。
参考文档 https://github.com/typicode/husky
commit-lint
这个能保证每次提交的备注都是符合规范的
安装
# mac
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
会给我们生成一个文件:
添加husky钩子
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
会新增了
以后我们提交git的备注提示只能遵循git commit -m "xxx: 修复某某"
,其中xxx有以下可选:
参考文档 https://github.com/conventional-changelog/commitlint#getting-started
环境区分
就举例开发和生产环境,首先在最外层目录创建.env.development
和.env.production
然后分别写上你要配置的区分变量,例如dev的:
REACT_APP_ENV = 'development'
记得一定要REACT_APP
开头哦。接着安装cross-env:
npm install cross-env
然后你就可以在package.json中修改脚本了,例如启动项目(我的是用了craco):
"start": "cross-env REACT_APP_ENV=development craco start",
在文件中访问process.env.REACT_APP_ENV
,就能拿到你设置的'development'
值了