TypeScript、ESLint、Prettier、Babel代码规范集成

以React17为例子

Babel

bashCopy
yarn add @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime -D

babel.config.json

jsonCopy
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

Eslint

.eslintrc.json

jsonCopy
{
    "env": {
        "browser": true,
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:promise/recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "plugins": [
        "promise",
        "react",
        "@typescript-eslint",
        "react-hooks",
        "prettier"
    ],
    "rules": {
      //0 关闭 1 警告 2 错误
        "prettier/prettier": 2,
        "react-hooks/rules-of-hooks": 2,
        "react-hooks/exhaustive-deps": 1,
        "react/display-name": 0,
        "react/prop-types":0,
        "@typescript-eslint/no-var-requires": 0
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

tsconfig.json

jsonCopy
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react",
    "declaration": false,
    "downlevelIteration": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "api/*": ["services/*"]
    },
    "types": ["node", "webpack-env"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["config", "commitlint.config.js"]
}

.prettierrc

jsonCopy

lint-staged和husky

在package.json添加

jsonCopy