初始化 npx create-react-app . --typescript
1. 初始化配置
npm run eject
2. 安装依赖
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
3. Eslint 配置
AppRoot 表示根目录
// {AppRoot}/.eslintrc.js
module.exports = {
parser: '@typescript-eslint/parser',
extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'], //使用推荐的React代码检测规范
plugins: ['@typescript-eslint'],
env: {
browser: true,
node: true,
},
settings: {
//自动发现React的版本,从而进行规范react代码
react: {
pragma: 'React',
version: 'detect',
},
},
parserOptions: {
//指定ESLint可以解析JSX语法
ecmaVersion: 2019,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
rules: {},
}
{AppRoot}/.eslintignore
/lambda/
/scripts
/config
.history
4. Prettier 配置
// {AppRoot}/.prettierrc.js
module.exports = {
printWidth: 120, // 每行代码不超过120个字符长度
semi: true, // 在语句末尾打印分号。
singleQuote: true, // 单引号
trailingComma: 'none', // 尾随逗号
bracketSpacing: true, // 在对象的括号之间需要括号分割
jsxBracketSameLine: false, // 将>多行JSX元素的放在最后一行的末尾,而不是一个>放在下一行
arrowParens: 'avoid', // 箭头函数参数周围是否需要使用括号包裹,avoid 尽可能不用括号包裹
tabWidth: 4, // 指定每个缩进级别的空格数。
useTabs: false, // 使用制表符而不是空格缩进行
endOfLine: 'auto' // 解决跨平台下代码行结束不一致的问题
};
// {AppRoot}/.prettierignore
**/*.svg
package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
serviceWorker.*
5. Webpack 配置修改[如需要修改Prettier或者eslint配置时需要设置这个,如不需要修改规则则可以跳过这步]
{AppRoot}/webpack.config.js
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: false, // 这里改为false ,经常会因为eslint的缓存导致你修改了代码也没有及时更新检测的问题
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
}
6. 提交时的校验git hook
- 安装依赖
npm i lint-staged husky -D
- 修改 package.json
{AppRoot}/package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/*.{js,jsx,mjs,ts,tsx}": [
"node_modules/.bin/prettier --write",
"node_modules/.bin/eslint --fix",
"git add"
],
"src/*.{css,scss,less,json,html,md,markdown}": [
"node_modules/.bin/prettier --write",
"git add"
]
}
...
}
- 测试 commit 命令
git add .
git commit -m 'test commit'
7. IDE 配置[可选]
7.1 VSCode 配置
7.1.1 安装 ESLint
检查代码错误
7.1.2 安装 prettier
用来格式化代码
安装成功后,可以设置项目 vscode 配置来实现保存代码自动格式化
{AppRoot}/.vscode/settings.json
{
"editor.formatOnSave": true // 开启保存格式化
}