Nuxt3：如何配置eslint？

Question

Nuxt3：如何配置 eslint

npx nuxi init nuxt3-app

Answer 1

编辑 10/2024：

您现在应该使用新的 eslint nuxt 模块：

npx nuxi module add eslint

https://eslint.nuxt.com/

---

如果您使用打字稿，
您可以添加

@nuxtjs/eslint-config-typescript

作为开发依赖

并使用

 创建 

.eslintrc

{
  "extends": [
    "@nuxtjs/eslint-config-typescript"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "off"
    ]
  }
}

---

如果您不使用打字稿，
添加

@nuxtjs/eslint-config

代替

@nuxtjs/eslint-config-typescript

并用

 创建 

.eslintrc

{
  "extends": [
    "@nuxtjs"
  ],
}

---

有关 nuxt linter 的更多详细信息，请访问：https://github.com/nuxt/eslint-config

Answer 2

安装以下库。

- @nuxtjs/eslint-config
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser    
- eslint
- eslint-config-standard
- eslint-config-standard-with-typescript
- eslint-plugin-import
- eslint-plugin-n
- eslint-plugin-promise
- eslint-plugin-vue

其中一些是 eslint 默认安装的。

然后在您的

.eslintrc.js

文件中

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    'vue/setup-compiler-macros': true
  },
  extends: [
    'plugin:vue/base',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'standard'
  ],
  parser: 'vue-eslint-parser',
  overrides: [],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
}