lint在webpack及vite中使用场景

一、ESLint 安装和配置

1. 安装 ESLint

   npm install eslint --save-dev
   

2. 初始化 ESLint 配置

   npx eslint --init
   

   按提示选择适合你项目的配置选项。

3. 在 package.json 中添加 lint 脚本

   "scripts": {
     "lint": "eslint "src/**/*.{js,jsx,ts,tsx}" --quiet"
   }
   

二、ESLint 使用方式

1. 命令行运行 执行 npm run lint 在控制台显示 lint 结果。

2. 开发过程中实时 lint

   2.1 Webpack + Vue 项目 在 vue.config.js 中配置：

   module.exports = {
     lintOnSave: true
   }
   

   2.2 Vite 项目 在 vite.config.ts 中配置：

   import eslintPlugin from 'vite-plugin-eslint';
   
   export default defineConfig({
     plugins: [
       eslintPlugin({
         cache: false,
         include: ['src/**/*.ts', 'src/**/*.tsx'],
         exclude: ['node_modules'],
       }),
     ],
   });
   

三、ESLint 错误提示方式

1. 编辑器内提示

   • 安装 VSCode ESLint 插件（由 Microsoft 开发）
   • 插件会自动读取项目根目录的 ESLint 配置文件（.eslintrc.js, .eslintrc.json 等）
   • 在编辑器中实时显示红色波浪线提示 lint 错误

2. 控制台提示

   • 适用于所有编辑器
   • 执行 npm run lint 在控制台查看完整的 lint 报告
   • 在 CI/CD 流程中集成 lint 检查

四、最佳实践

1. 结合 Prettier 使用 安装 prettier 和相关插件：

   npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
   

2. 配置 Git Hooks 使用 husky 和 lint-staged 在提交代码前自动运行 lint：

   npm install --save-dev husky lint-staged
   

3. 持续集成 在 CI 流程中添加 lint 检查步骤，确保所有提交的代码都符合规范。

通过以上配置，你可以在开发过程中实时获得 ESLint 反馈，提高代码质量，并在团队中保持一致的编码风格。