npm init vite
? Project name: … vite-project // 項(xiàng)目名稱，默認(rèn) vite-project
? Select a framework: ? react  // 選擇框架
? Select a variant: ? react-ts // 選擇組合

npm i -D eslint

npx eslint --init
? How would you like to use ESLint? 
// To check syntax, find problems, and enforce code style
? What type of modules does your project use? 
// JavaScript modules (import/export)
? Which framework does your project use? 
// react
? Does your project use TypeScript? 
// Yes
? Where does your code run? 
// browser
? How would you like to define a style for your project? 
// Use a popular style guide
? Which style guide do you want to follow? 
// Airbnb
? What format do you want your config file to be in? 
// JavaScript

{
    // ...
    "react/jsx-filename-extension": [
        "error",
        {
            "extensions": [".js", ".jsx", ".tsx", ".ts"]
        }
    ]
};

{
    // ...
    rules: {
         "import/no-unresolved": "off",
         "import/extensions": "off",
         "import/no-absolute-path": "off"
    },
};

{
    // ...
    "rules": {
        "import/no-extraneous-dependencies": [
            "error", 
            {"devDependencies": true}
        ]
        // ...
    }
};

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

{
    // ...
    "extends": [
        // ...
        "plugin:prettier/recommended",
    ],
}

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

npm i -D lint-staged husky

npm set-script prepare "husky install"

npm run prepare

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:import/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "import/no-extraneous-dependencies": [
      "error", 
      {"devDependencies": true}
    ],
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx", ".tsx", ".ts"]
      }
    ],
    "import/no-unresolved": "off",
    "import/extensions": "off",
    "import/no-absolute-path": "off"
  }
}

npx husky add .husky/pre-commit "npx lint-staged"

npm i -D commitlint @commitlint/config-conventional

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

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