Nuxt.js代码风格配置

因为 Nuxt 官方有自带的 Nuxt ESLint 模块，该模块使用扁平化配置，不再使用 extends，使每个eslint配置都独立可控，故此处不使用传统的代码风格配置。

正文开始：

第一步

使用 npx nuxi module add eslint 命令快速添加 @nuxt/eslint 模块到项目中，运行此命令之后会自动生成 eslint.config.mjs 配置文件并且会自动在 nuxt.config.ts 文件中的 modules 加入 '@nuxt/eslint'。

如果你使用的是TypeScript，则需要单独进行安装，此处我选择使用npm： npm i -D typescript

第二步

完成以上步骤之后，可以在项目根目录下看到一个名为 eslint.config.mjs 的配置文件，然后就可以进行相应的扁平化配置。

扁平化配置的说明如下：

js 复制代码

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt({
    // 配置名称，通常用于标识此 ESLint 配置
    name: 'my-eslint-config', // 示例：自定义名称

    // 指定要被 ESLint 处理的文件，可以是文件名或路径的数组
    files: ['src/**/*.js', 'src/**/*.vue'], // 示例：处理 src 目录下的所有 JS 和 Vue 文件

    // 忽略的文件或目录，不会被 ESLint 检查
    ignores: ['.nuxt/', 'node_modules/'], // 示例：忽略 .nuxt 目录和 node_modules 目录

    // 语言类型，通常为 'javascript'、'typescript' 或 'vue'
    language: 'javascript', // 示例：使用 JavaScript

    // 语言选项，允许您为特定语言提供额外配置
    languageOptions: {
        ecmaVersion: 2021, // 示例：指定 ECMAScript 版本
        sourceType: 'module', // 示例：使用模块化
    },

    // Linter 选项，可以配置 ESLint 的行为
    linterOptions: {
        reportUnusedDisableDirectives: true, // 示例：报告未使用的禁用指令
    },

    // 处理器，通常用于处理特定文件类型的解析器
    processor: {
        vue: 'vue-eslint-parser', // 示例：使用 Vue 解析器
    },

    // 设置，供插件和规则使用的全局设置
    settings: {
        react: {
            version: 'detect', // 示例：自动检测 React 版本
        },
    },

    // 插件数组，ESLint 支持的插件，可以添加额外的 ESLint 功能
    plugins: {
        'simple-import-sort': simpleImportSort, // 示例：添加简单导入排序插件
    },

    // 规则配置，可以指定每条规则的错误级别
    rules: {
        'prettier/prettier': 'error', // 示例：启用 Prettier 规则并设置为错误级别
        'simple-import-sort/imports': 'error', // 示例：启用简单导入排序规则并设置为错误级别
    },
});

如果你只需要简单配置一项的话，我们可以这么写：

js 复制代码

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt({
    name: '',
    files: [],
    ignores: [],
    language: '',
    languageOptions: {},
    linterOptions: {},
    processor: {},
    settings: {},
    plugins: {},
    rules: {},
});

如果你需要配置多项的话，我们可以这么写：

js 复制代码

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';
import customConfig from 'customConfig'

export default withNuxt([
    customConfig, // 此处为自定义配置或者依赖库提供的eslint配置
    {
        name: '',
        files: [],
        ignores: [],
        language: '',
        languageOptions: {},
        linterOptions: {},
        processor: {},
        settings: {},
        plugins: {},
        rules: {},
    },
    {
        name: '',
        files: [],
        ignores: [],
        language: '',
        languageOptions: {},
        linterOptions: {},
        processor: {},
        settings: {},
        plugins: {},
        rules: {},
    }
]);

基本内容就如上所述，具体细节可以参照 NuxtEslint官方文档进一步了解。

下面我提供一份 Nuxtjs 的简单配置给大家参考：

该配置主要加入了导入语句排序和 prettier 配置校验

js 复制代码

// @ts-check
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import simpleImportSort from 'eslint-plugin-simple-import-sort';

import withNuxt from './.nuxt/eslint.config.mjs';

export default withNuxt([
    eslintPluginPrettierRecommended,
    {
        plugins: {
            'simple-import-sort': simpleImportSort,
        },
        rules: {
            'simple-import-sort/imports': 'error',
            'simple-import-sort/exports': 'error',
        },
    },
]);