Nuxt3 实战 ：配置 Eslint、Prettierrc、Husky等项目提交规范

// nuxt.config.js
 
export default defineNuxtConfig({
  // 其他配置...
 
  // 添加 ESLint 配置
  eslint: {
    ignore: ['node_modules/'],
    fix: true,
    config: {
      extends: [
        '@nuxtjs/eslint-config-typescript',
        'plugin:prettier/recommended',
        // 更多 ESLint 插件配置
      ],
    },
  },
 
  // 添加构建时的钩子，确保代码格式化和单元测试在构建之前通过
  build: {
    extend(config, { isDev, isClient }) {
      // 添加 Prettier 插件
      config.module.rules.push({
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        exclude: /node_modules/,
        options: {
          fix: true,
        },
      });
    },
  },
 
  // 添加 Git Hooks 配置
  hooks: {
    'build:done'(nuxt) {
      const { exec } = require('child_process');
      exec('npx lint-staged', (error, stdout, stderr) => {
        if (error) {
          console.error(`执行 lint-staged 出错: ${error}`);
          return;
        }
        console.log(`lint-staged 输出: ${stdout}`);
      });
    },
  },
});

在这个代码实例中，我们在 Nuxt 的配置文件 nuxt.config.js 中添加了 ESLint 的配置，包括要忽略检查的目录、是否自动修复问题以及扩展的规则集。我们还通过 build.extend 方法添加了一个新的模块规则，用于在构建过程中对 .js 和 .vue 文件进行 ESLint 检查和自动修复。最后，我们定义了一个钩子 hooks.build:done，在构建完成后执行 npx lint-staged 命令，以确保暂存（staged）的代码符合规范。