在 .eslintrc.js 中手动设置 ESlint 规则在 Nuxt 应用程序中不起作用，但在 Vue 应用程序中起作用

Question

我刚刚使用 npm init nuxt-app <project-name> 启动了一个新的 Nuxt 应用程序并使用 npx eslint --init 配置了 ESlint。

此外，我在 .eslintrc.js 配置文件中添加了两条规则，如下所示：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    'vue/multi-word-component-names': 'warn',
    'no-unused-vars': 'warn'
  }
}

当我运行我的应用程序并测试是否一切正常时，我注意到我在 .eslintrc.js 文件中设置的规则没有得到正确应用。例如，在使用未使用的变量时，我仍然收到错误，而不是警告。

有这方面的经验吗？或者解决方案？

它在 Vue 应用程序中一直对我有效，但现在在 Nuxt 中却不起作用。

Answer 1

我不确定你的项目的实际配置，但我已经设置了我的 ESlint 以匹配 Nuxt 的规则，并且还有其他规则可以正常工作（如预期的那样收到警告）与以下 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {},
}

这是我的 ESlint + Prettier 开发包，可以让整个东西正常工作：@babel/eslint-parser @nuxtjs/eslint-config @nuxtjs/eslint-module eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier eslint-plugin-vue prettier。

Answer 2

感谢您的回复。

通过更改，我需要全新安装我的 Nuxt 项目。我使用 npm init nuxt-app <project-name> 并且这次将 TypeScript 设置为我的语言。

出于某种原因，这一次，一切顺利。

我当前的 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    'vue/multi-word-component-names': 'warn',
    'no-unused-vars': 'warn',
    'space-in-parens': 'off',
    'computed-property-spacing': 'off'
  }
}

老实说，不确定是什么造成了差异...

在 .eslintrc.js 中手动设置 ESlint 规则在 Nuxt 应用程序中不起作用，但在 Vue 应用程序中起作用

Manually set ESlint rules in .eslintrc.js NOT working in Nuxt app, but DO work in Vue app

nuxt.js

eslint