vite版本的eslint配置

eslint配置

vite-pretty-lint

vite-pretty-lint库是一个为Vite创建的Vue或React项目初始化eslint和prettier的库。

该库的目的是为了让开发者在创建项目时，不需要手动配置eslint和prettier，而是通过vite-pretty-lint库来自动配置。

文档链接

初始化

进入项目目录运行命令,3种任选，这里我选择pnpm

// NPM
npm init vite-pretty-lint

// YARN
yarn create vite-pretty-lint

// PNPM
pnpm create vite-pretty-lint

这里会有一些选项，根据自己项目的实际情况选择即可，一路回车。

安装完成之后，可以发现目录下多了几个文件，分别是 .eslintrc.json 、.eslintignore、 .prettierrc.json。这就是通过以上命令生成的 eslint 和 prettier 相关配置文件。

它还会自动修改vite.config.js文件，添加eslint相关配置。

如果你的项目结构不是默认的，那么你需要手动修改vite.config.js文件，添加eslint相关配置。

修改.eslintrc.json

这里是因为vite-plugin-eslint不识别json文件，所以需要修改为js文件。

除了文件后缀名，内容也要修改，json开头就是{}, js开头是module.exports = {}

unplugin-auto-import/vite冲突问题

如果你的项目里使用了unplugin-auto-import/vite自动引入插件，那么可能会导致eslint报错。

修改unplugin-auto-import/vite配置

import autoImport from 'unplugin-auto-import/vite'

export default function createAutoImport() {
  return autoImport({
    imports: ['vue', 'vue-router', 'pinia'],
    dts: false,
    eslintrc: {
      // 平时关闭，自动引入配置更新时开启一次
      enabled: false
    }
  })
}

将eslintrc.enabled改成true后，运行项目，会在项目根目录生成文件.eslintrc-auto-import.json

将这个文件引入到.eslintrc.js中

module.exports = {
    extends: ['./.eslintrc-auto-import.json']
}

总结

至此eslint和prettier的配置就基本完成了，如果你的项目中还有其他的eslint配置，可以在.eslintrc.js中添加。

husky代码提交钩子

安装依赖

pnpm install -D husky lint-staged commitizen commitlint cz-customizable commitlint-config-cz @commitlint/config-conventional

添加初始化命令

运行命令

npm set-script prepare "husky install"

这条命令会在package.json中添加prepare脚本

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

husky初始化

运行命令

npm run prepare

初始化 husky，将 git hooks 钩子交由 husky 执行，它会在项目根目录创建文件夹.husky

git钩子配置

运行命令

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

这个命令会在 .husky 里面生成一个 pre-commit 文件，在 pre-commit 这个钩子里就可以执行 lint-staged 了

在 package.json 中添加以下内容，处理对应后缀的文件

{
    "lint-staged": {
        "*.{js,vue}": [
            "eslint --fix"
        ]
    }
}

到这里为止，提交代码的时候自动进行代码检查的功能已经实现了