搭建vite+reat+ts+eslint+prettier+husky+lint-staged脚手架

初始化项目

使用vite初始化项目:

npm init vite@latest react-starter

vite会让你选择是react还是vue，是否使用typescript。

配置eslint

1. npm i -D eslint
2. npx eslint --init

效果如下

可以看到默认的eslint模板不是很全，react-hooks的lint也没有，需要手动在模板的基础上补齐。

补齐typescript相关的lint

npm i -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.js增加airbnb-typescript：

extends: ["plugin:react/recommended", "airbnb", "airbnb-typescript"],
parserOptions: {
  ...,
  project: "./tsconfig.json",
},

补齐react-hooks相关的lint

使用react官方给出了hooks的lint插件

npm i -D eslint-plugin-react-hooks

配置.eslintrc.js

extends: [
  ...,
  'plugin:react-hooks/recommended'
]

React17之后使用JSX不需要在引入React，关闭规则

"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"

配置sort import

npm install --save-dev eslint-plugin-simple-import-sort

配置prettier

• npm i -D prettier eslint-config-prettier

配置style lint

• npm i -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-config-recess-order

配置husky + lint-staged

• npx husky-init && npm install
• npm i -D lint-staged