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

以 react + vite + typescript 项目为例,集成 eslint + prettier + husky + lint-staged 规范

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

创建项目

pnpm create vite

添加 eslint

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

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

按需选择完配置,安装成功后会自动创建.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 会报错

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

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

如果使用react hook写法,需要安装 eslint-plugin-react-hooks 插件,除了在extends加上 “plugin:react-hooks/recommended”,还要在 plugins 加上”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

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

还有一个警告,需要我们在.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"
  ],
  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,
  }),
],

原文链接:https://juejin.cn/post/7213575951116058685 作者:npmrunserver

(0)
上一篇 2023年3月25日 上午11:51
下一篇 2023年3月25日 下午7:00

相关推荐

发表评论

登录后才能评论