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',
        },
    },
]);
相关推荐
一个处女座的程序猿O(∩_∩)O2 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』2 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
web135085886352 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
陈大爷(有低保)3 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
cronaldo913 小时前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
百罹鸟4 小时前
【vue高频面试题—场景篇】:实现一个实时更新的倒计时组件,如何确保倒计时在页面切换时能够正常暂停和恢复?
vue.js·后端·面试
Java_慈祥4 小时前
慈様や 前端学习导航👩🏻‍🚀🚀
前端·javascript·vue.js
编程百晓君5 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy6 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se6 小时前
Vue中使用a标签下载静态资源文件(比如excel、pdf等),纯前端操作
前端·vue.js·excel