可能可以使用 `--fix` 选项修复

Question

我正在使用 nuxt.js 创建一个应用程序，但每次我启动该应用程序时，都会出现 eslint 错误并提示 "potentially fixable with the --fix option."

我执行了命令 npm run lint -- --fix 并且它起作用了，但是如果我在任何 vue 文件中进行另一个更改，它会再次出现相同的错误，我必须再次执行此操作

知道如何解决这个问题吗？

Answer 1

在 nuxt 配置文件中使用以下配置：

build: {
  extend(config, ctx) {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      exclude: /(node_modules)/,
      options: {
        fix: true
      }
    })
  }
}

重要的部分是：

options: {
  fix: true
}

Answer 2

扩展 nuxt.config.js 文件中的构建

build: {
  extend(config, ctx) {
    config.module.rules.push({
      enforce: "pre",
      test: /\.(js|vue)$/,
      loader: "eslint-loader",
      exclude: /(node_modules)/,
      options: {
        fix: true
      }
    })
  }
}

Answer 3

如果您正在使用 VScode，我建议在您的项目中进行完整的 ESlint 配置，因为我已经。

在你的 settings.json 中有这个 ESlint extension 和那个（可通过命令面板访问）

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // this one will fix it on save for you
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

在像这样的简单 .eslintrc.js 文件之上

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: ['@nuxtjs']
}

在设置 UI 后面跟着这个，应该会给你一个很棒的 DX。

可能可以使用 `--fix` 选项修复

potentially fixable with the `--fix` option

eslint

vue.js

nuxt.js