项目搭建之配置规范：vite + typescrip + eslint + prettier + husky + lint-staged

以 react + vite + typescript 项目为例，集成 eslint + prettier + husky + lint-staged 规范。vue项目也是如此，只是些许配置不同。

项目仓库：github.com/iamzwq/esli…

创建项目

pnpm create vite

添加 eslint

# npm
npm init @eslint/config
# pnpm
pnpm create @eslint/config

按需选择完配置，安装成功后会自动创建.eslintrc.cjs配置文件。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: 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: {},
};

package.json 文件中添加

// package.json
"sricpts": {
  // ...
  "lint": "eslint src --ext .vue,.js,.ts,.jsx,.tsx --fix"
}

这个时候执行 pnpm lint 会报错

需要我们在 .eslintrc.cjs 加上一个 extends 配置 "plugin:react/jsx-runtime"。

如果使用react hook写法，需要安装 eslint-plugin-react-hooks 插件，在 extends 和plugins 分别加上"plugin:react-hooks/recommended"和"react-hooks"

extends: [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:react/jsx-runtime",
  "plugin:react-hooks/recommended",
  "plugin:@typescript-eslint/recommended",
],
plugins: ["react", "@typescript-eslint", "react-hooks"],

再 pnpm lint

还有一个警告，需要我们在.eslintrc.cjs中加上这样的配置

settings: {
  react: {
    version: "detect",
  },
},

以上就没有警告和报错了

添加 prettier

pnpm add prettier -D

然后再根目录创建 .prettierrc 配置文件，具体配置按需来

// .prettierrc
{
  "semi": false,
  "singleQuote": false,
  "printWidth": 90,
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true
}

添加 .prettierignore 配置文件

.DS_Store
node_modules
dist
dist-ssr

**/*.svg
**/*.sh

ESLint + Prettier

pnpm add eslint-config-prettier eslint-plugin-prettier -D

更改 .eslintrc.cjs 配置，完整配置如下

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  settings: {
    react: {
      version: "detect",
    },
  },
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "react-hooks", "prettier"],
  rules: {
    "prettier/prettier": "error"
  },
};

添加 husky 和 lint-staged

pnpm add husky lint-staged -D

# 执行以下命令会生成 .husky 文件
npx husky install

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

然后在package.json文件中加上以下代码：

"lint-staged": {
  "*.{vue,ts,js,jsx,tsx}": [
    "pnpm lint"
  ]
}

vite.config.ts 配置

安装vite-plugin-eslint插件

pnpm add vite-plugin-eslint -D

// vite.config.ts
import viteEslint from "vite-plugin-eslint"

plugins: [
  // ...
  viteEslint({
    failOnError: false,
  }),
],

全部代码见github.com/iamzwq/esli…