Build the project structure

Download scaffolding

npm install -g create-react-app
Copy the code

Create a project

create-react-app my-app --template typescript
Copy the code

The React template contains all the packages and configurations needed to run React properly without having to install typescript manually. It also contains automatic test files and PWA files, which can be added or deleted as required. After creation, the project structure is as follows:

My - app / ├ ─. Gitignore ├ ─ images, which s ├ ─ node_modules / ├ ─ public / ├ ─ SRC / │ └ ─... ├ ─ package. Json ├ ─ tsconfig. JsonCopy the code

Install eslint

npm install eslint -dev
Copy the code

Create an esLint configuration file

./node_modules/.bin/eslint --init
Copy the code

Choose according to your own situation

Installing related packages

yarn add eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.121. eslint-plugin-import@ ^2.221. eslint-plugin-node@^11.1. 0 eslint-plugin-promise@^4.21. @typescript-eslint/parser@latest  -D
Copy the code

Install eslint-import-resolver-alias to resolve import/unresolver errors

yarn add eslint-import-resolver-alias -D
Copy the code

Add some extensions and add-ons recommended by esliint website and eliminate some rules that are uncomfortable to use in normal development

module.exports = {
    "env": {
        "browser": true."es2021": true
    },
    "extends": [
       
        "plugin:react-hooks/recommended"."standard"]."parser": "@typescript-eslint/parser"."parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12."sourceType": "module"
    },
    "plugins": [
        "react"."@typescript-eslint"."react-hooks"]."rules": {
        "react-hooks/rules-of-hooks": "error"."react-hooks/exhaustive-deps": "warn"."react/no-unsafe": [
          "error",
          {
            "checkAliases": true}]."react/self-closing-comp": "warn"."react/sort-comp": [
          "error",
          {
            "order": [
              "static-methods"."instance-variables"."lifecycle"."everything-else"."rendering"]}],"react/prop-types": "off"."@typescript-eslint/no-useless-constructor": "error"."@typescript-eslint/array-type": "error"."@typescript-eslint/ban-types": "error"."@typescript-eslint/no-array-constructor": "error"."@typescript-eslint/naming-convention": [
          "error",
          { "selector": "variable"."format": ["camelCase"."UPPER_CASE"."PascalCase"]}],"@typescript-eslint/no-use-before-define": "error"."getter-return": "off"."no-dupe-args": "off"."no-dupe-keys": "off"."no-unreachable": "off"."valid-typeof": "off"."no-const-assign": "off"."no-new-symbol": "off"."no-this-before-super": "off"."no-undef": "off"."no-dupe-class-members": "off"."no-redeclare": "off"."no-unused-vars": "off"."no-var": "error"."no-use-before-define": "off"."no-console": "warn"."prefer-rest-params": "error"."prefer-spread": "error"."prefer-const": "error"."no-empty-function": "error"."eqeqeq": "off"."array-callback-return": "warn"."default-case": "error"."no-shadow": "warn"."no-return-await": "error"."no-await-in-loop": "error"."require-await": "error"."generator-star-spacing": ["warn"."after"]."yield-star-spacing": ["warn"."after"]."spaced-comment": ["warn"."always", { "markers": ["/"]}],"semi": ["error"."always", { "omitLastInOneLineBlock": true}]}};Copy the code

Install eslint-plugin-react-hooks support for the react-hooks check

yarn add eslint-plugin-react-hooks -D
Copy the code

Install the prettier

yarn add  prettier eslint-plugin-prettier eslint-config-prettier -D
Copy the code

Rules for configuring code formatting

Create a new. Prettierrc file under the root directory:

{
  "trailingComma": "all"."tabWidth": 2."semi": true."singleQuote": true."endOfLine": "auto"."printWidth": 100."arrowParens": "always"."useTabs": false."overrides": [{"files": "*.md"."options": {
                "tabWidth": 2}}}]Copy the code

Adjust the plugin configuration in eslintrc.js

Modify extends, plugins, rules:

module.exports = {

  extends: [..."prettier"].plugins: [..."prettier"].rules: {... ."prettier/prettier": "error",}};Copy the code

Install stylelint

Install dependency packages

yarn add stylelint stylelint-config-standard stylelint-config-css-modules stylelint-config-rational-order stylelint-config-prettier  -D

yarn add stylelint-order stylelint-scss -D
Copy the code

New in the root directory. Stylelintrc.json

{
    "extends": [ "stylelint-config-standard"."stylelint-config-css-modules"."stylelint-config-rational-order"."stylelint-config-prettier"]."plugins": ["stylelint-scss"."stylelint-order"]."rules": {
    "no-descending-specificity": null."at-rule-no-unknown": null}}Copy the code

Install Husky and Lint-staged

yarn add husky lint-staged -D
Copy the code

Configure the corresponding configuration in package.json

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "**/*.{scss,less,css}": [
      "stylelint --fix"."git add"]."src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix"."git add"]."**/*.{json,ts,tsx,js,jsx,md,scss,less,css,html}": [
      "prettier --write"."git add"]},Copy the code

Start the project

yarn start
Copy the code

Unify vscode plug-in configuration

Root directory to create.vscode folder

Create extensions. Json in vscode

Configuration is as follows

{
  "recommendations": [
   "dbaeumer.vscode-eslint"."esbenp.prettier-vscode"."steoates.autoimport"."formulahendry.auto-close-tag"."formulahendry.auto-rename-tag"."clinyong.vscode-css-modules"."quicktype.quicktype"]}Copy the code

.vscode below create settings.json

{{// # fix the code in ESLint format every time you save it
  "editor.codeActionsOnSave": {
    "source.fixAll": true."source.organizeImports": true
  },
  // When you click Save, fix it according to ESLint rules, while integrating Prettier into ESLint
  "prettier.eslintIntegration": true."editor.defaultFormatter": "esbenp.prettier-vscode".// To avoid collisions with ESLint, turn the editor's default code checking rules off (if enabled)
  "editor.formatOnSave": true.// The stylelint extension itself is sufficient for the checksum
  "css.validate": false."less.validate": false."scss.validate": false.// use locally installed TypeScript instead of VSCode's built-in smarts
  "typescript.tsdk": "./node_modules/typescript/lib".// Specify which files do not participate in the search
  "search.exclude": {
    "**/node_modules": true."dist": true."yarn.lock": true
  },
  // Specify files that are not monitored by VSCode to prevent CPU usage due to too many files being scanned when VSCode is started
  "files.watcherExclude": {
    "**/.git/objects/**": true."**/.git/subtree-cache/**": true."**/node_modules/*/**": true."**/dist/**": true
  },
  "eslint.options": {
    "configFile": "./.eslintrc.js"}}Copy the code

Create a new xx.code-snippets file in.vscode

Configure code snippets that are often repeated throughout the project. This will automatically generate the code already written by typing the keyword.

{
 "ts react function component": {
    "scope": "typescriptreact".// Language range ts
    "prefix": "tsrfc".// Match the keyword
    "body": [
      "import React from 'react';"."import styles from './${1:${TM_FILENAME_BASE}}.module.scss';".""."interface ${1:${TM_FILENAME_BASE}}Props {"." [key: string]: any;"."}".""."const ${1:${TM_FILENAME_BASE}}: React.FC<${1:${TM_FILENAME_BASE}}Props> = () => {"." return ("." 
      

       "
      ."${0}"." ".");"."};.""."export default ${1:${TM_FILENAME_BASE}};"]}}Copy the code

Now, click TSRFC in the TSX file of vscode to see the effect.