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',
        },
    },
]);
相关推荐
泉城老铁11 分钟前
vue实现前端excel的导出
前端·vue.js
用户516816614584113 分钟前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫41 分钟前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
_志哥_1 小时前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js
૮・ﻌ・2 小时前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往3 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
BumBle3 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
JA+4 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js