代码规范

Vite 中集成 ESLint

bash

pnpm i vite-plugin-eslint -D

然后在 vite.config.ts 中接入:

ts

// vite.config.ts
import viteEslint from 'vite-plugin-eslint';

// 具体配置
{
  plugins: [
    // 省略其它插件
    viteEslint(),
  ]
}

由于这个插件采用另一个进程来运行 ESLint 的扫描工作，因此不会影响 Vite 项目的启动速度，这个大家不用担心。

Vite 中集成 Stylelint

社区中提供了 Stylelint 的 Vite 插件，实现在项目开发阶段提前暴露出样式代码的规范问题。我们来安装一下这个插件:

bash

pnpm i @amatlash/vite-plugin-stylelint -D

然后在 Vite 配置文件中添加如下的内容:

ts

import viteStylelint from '@amatlash/vite-plugin-stylelint';

// 具体配置
{
  plugins: [
    viteStylelint({
      // 对某些文件排除检查
      exclude: /windicss|node_modules/
    }),
  ]
}

接下来，你就可以在命令行界面看到对应的 Stylelint 提示了:

Husky + lint-staged 的 Git 提交工作流集成