搭配一个 react-ts +eslint的一个框架

搭配一个 react-ts +eslint的一个框架： 首先下载一个react-ts的模板:npx create-react-app demo01 --template typescript 然后会在package.json里面看到一个 reject 然后 yarn reject 或者 npm run reject

然后开始 配置eslint 下载eslint yarn add -D eslint 初始化eslint npx eslint --init 继续执行下面的步骤 yarn add -D eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest yarn add -D eslint-plugin-import @typescript-eslint/parser eslint-import-resolver-typescript

关于eslint的来文件 跟src平级 .eslintignore .eslintrc.json 这两个文件分别是 .idea

.storybook

.config

node_modules/*

config/*

public/*

scripts/*

src/react-app-env.d.ts

src/reportWebVitals.ts

{

"parser": "@typescript-eslint/parser",

"parserOptions": {

"ecmaFeatures": {

  "jsx": true,
  
  "useJSXTextNode": true
  
},

"ecmaVersion": 2018,

"sourceType": "module",

"project": "./tsconfig.json"

},

"extends": [

"eslint:recommended",

"plugin:react/recommended",

"plugin:@typescript-eslint/recommended",

"prettier" // Add this line!

], "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],

"env": {

"browser": true,  
"es6": true,
"jest": true

}, "globals": {

"Atomics": "readonly",
"SharedArrayBuffer": "readonly"

}, "rules": {

"react/react-in-jsx-scope": "off",
"camelcase": "error",
"spaced-comment": "error",
"quotes": ["error", "single"],
"no-duplicate-imports": "error"

}, "settings": {

"import/resolver": {
  "typescript": {}
}

} }

代码格式化工具Prettier安装 跟src平级 yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

.prettierignore .prettierrc

.idea

.storybook

.config

node_modules/*

config/*

public/*

scripts/*

src/react-app-env.d.ts

src/reportWebVitals.ts

{ "semi": false,

"tabWidth": 2,

"printWidth": 100,

"singleQuote": true,

"trailingComma": "all",

"jsxSingleQuote": true,

"bracketSpacing": true }