在nuxt开发中使用eslint

安装 #

直接安装@nuxt/eslint，会有很多诡异的错误。

一次次的调整解决很麻烦，可以手动安装来规避一些问题。

step 1 #

先安装 @nuxt/eslint:

pnpm add -D eslint typescript @nuxt/eslint

进行相关配置

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
   eslint: {
    config: {
      stylistic: true,
      standalone: false,
    },
  },
})

step 2 #

在安装vue规则。

pnpm i -D eslint @antfu/eslint-config

进行相关配置

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

export default withNuxt(
  antfu({}),
)

step 2’ #

快捷安装

pnpm dlx @antfu/eslint-config@latest
pnpm i

然后再删除 eslint.config.js 即可。

配置IDE自动格式化 #

pnpm dlx @antfu/eslint-config@latest

在过程中选择formatter。

如果不想使用@antfu/eslint-config，可以修改为如下配置

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

export default withNuxt(
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],
  },
)

问题 #

不进行格式化 #

有可能是rules配置不正确，可以先自行检查一下

pnpm exec eslint .

module preserve报错 #

在 tsconfig.app.json 中会报如下错误：

Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'.

原因就是，IDE的ts版本过低，可以设置下，让IDE采用当前项目的ts版本。

可以在ide中设置，也可以在项目中设置。

// settings.json
{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
}

设置完之后，选择命令，reload window。

如果还是不成功，手动执行命令，选择typescript版本。