DEV Community

GuiJiangHeng
GuiJiangHeng

Posted on

搭建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

效果如下
Screenshot from 2021-10-10 18-10-56
可以看到默认的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",
},
Enter fullscreen mode Exit fullscreen mode

补齐react-hooks相关的lint

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

npm i -D eslint-plugin-react-hooks

配置.eslintrc.js

extends: [
  ...,
  'plugin:react-hooks/recommended'
]
Enter fullscreen mode Exit fullscreen mode

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

"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
Enter fullscreen mode Exit fullscreen mode

配置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

Top comments (0)