npx create-react-app demo-framework --template typescript

npm i eslint -D

npx eslint --init

You can also run this command directly using 'npm init @eslint/config'.
npx: installed 41 in 3.304s
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes ✔
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No ✔ / Yes
A config file was generated, but the config file itself may not follow your linting rules.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {},
};

npm i eslint-config-airbnb -D

//  .eslintrc.js
{
    ...
    "extends": [
        "airbnb",
        ...
    ]
    ...
}

...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src --ext .ts,.jsx,.tsx --fix --quiet"
  },
...

npm i eslint-import-resolver-typescript -D

// .eslintrc
...
  rules: {},
  settings: {
    "import/resolver": {
      typescript: {
        directory: "./tsconfig.json",
      },
    },
  },
...

// .eslintrc
...
  rules: {
    "react/jsx-filename-extension": [
      2,
      {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
    ],
  },
...

// .eslintrc
  rules: {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      },
    ],
  },

// .eslintrc
  rules: {
    "@typescript-eslint/triple-slash-reference": "warn",
  }

// .eslintrc
  rules: {
    "react/react-in-jsx-scope": "off",
  }

{
  ...
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   ...
}

"use strict";

const { esNextPaths } = require("./scripts/shared/pathsByLanguageVersion");

module.exports = {
  bracketSpacing: false,
  singleQuote: true,
  jsxBracketSameLine: true,
  trailingComma: "es5",
  printWidth: 80,
  parser: "babel",

  overrides: [
    {
      files: esNextPaths,
      options: {
        trailingComma: "all",
      },
    },
  ],
};

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "proseWrap": "never",
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ]
}

{
  "printWidth": 100,
  "tabWidth": 2,
  "tabs": false,
  "singleQuote": true,
  "semicolon": true,
  "quoteProps": "preserve",
  "bracketSpacing": false
}

semi: false
singleQuote: true
printWidth: 80
trailingComma: 'none'
arrowParens: 'avoid'

npm i prettier -D

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

...
"scripts": {
    ...
    "prettier": "prettier --write **/*.{js,jsx,ts,tsx,json}"
    ...
}
...

npm i eslint-config-prettier -D # 关闭可能与prettier冲突的规则
npm i eslint-plugin-prettier -D # 使用prettier代替eslint格式化

...
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  ...

npm install --save-dev stylelint stylelint-config-standard

// .stylelintrc
{
  "extends": "stylelint-config-standard"
}

npm install --save-dev stylelint-config-prettier

// .stylelintrc
{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

...
 "scripts": {
    ...
    "lint:style": "stylelint src/**/*.less",
    ...
 },
...

npm i -D @craco/craco

const path = require("path");

const pathResolve = (pathUrl) => path.join(__dirname, pathUrl);

module.exports = {
  webpack: {
    alias: {
      "@": pathResolve("src"),
      "@assets": pathResolve("src/assets"),
      "@components": pathResolve("src/components"),
      "@utils": pathResolve("src/utils"),
    },
  },
};

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  }
  //   ...
}

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
...

npm run eject

...
    alias: {
    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    "react-native": "react-native-web",
    // Allows for better profiling with ReactDevTools
    ...(isEnvProductionProfile && {
        "react-dom$": "react-dom/profiling",
        "scheduler/tracing": "scheduler/tracing-profiling",
    }),
    ...(modules.webpackAliases || {}),
    "@utils": path.resolve(__dirname, "../src/utils"),
    },
...

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  }
  //   ...
}

npm i husky -D

npx husky install

  "scripts": {
    "prepare": "husky install"
  },

npx husky add .husky/pre-commit "npm run lint"

npm install --save-dev lint-staged

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npm run lint
npx lint-staged

...
  "scripts": {
    ...
  },
  "lint-staged": {
    "**/*.{jsx,ts,tsx}": "npm run lint"
  },
  //  "lint-staged": {
  //   "**/*": "prettier --write --ignore-unknown", //格式化
  //   "src/**.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx", //对js文件检测
  //   "**/*.{less,css}": "stylelint --fix", //对css文件进行检测
  //   "**/*.{jsx,ts,tsx}": "npm run lint",
  //   "**/*.{less,css}": "npm run lint:style"
  // },
...

npm i @commitlint/cli @commitlint/config-conventional -D

{
  "extends": ["@commitlint/config-conventional"]
}

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'