如何在vue-cli中禁用ESLint？

Question

我该如何在使用 vue-cli 生成的项目中禁用 ESlint？

preLoaders: [
  {
    test: /\.vue$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  }
]

如果我删除loader: 'eslint'这一行，它就无法编译，将其设置为空字符串也是一样的。我知道我可以在初始化阶段选择退出ESLint，但我如何在创建项目后禁用它？

如果我删除loader: 'eslint'这一行，编译会失败；同样地，如果将其设置为空字符串也是一样的。我知道我可以在初始化阶段选择退出ESLint，但是我该如何在项目创建后禁用它呢？

- Mahmud Adam

---

你使用的是哪个模板？简单的webpack吗？ - Himmet Avsar

全功能的Webpack - Mahmud Adam

请查看 https://github.com/vuejs-templates/webpack/blob/cbcba9268dbfb277497bcdde6409dab4398eed8e/template/build/webpack.base.conf.js 中的 {{#lint}} 区块 - 可能可以删除整个 preLoaders 区块？ - ceejayoz

@HectorLorenzo 已移动。 - ceejayoz

Answer 1

这里有一些过时的答案。

由于vue-cli 3采用了零配置方法，禁用它的方式就是卸载该模块：

npm remove @vue/cli-plugin-eslint

- Wossname

---

由于原问题已经三年的历史了，因此这个回答应该被标记为正确答案。 - db2

这只有在您想要完全删除代码检查时才是正确的。如果您只想在保存时禁用代码检查，则使用Aakass和Radbyx提供的解决方案。 - TetraDev

解决方案有效并且可以防止不必要的压力。 - Ashwani Garg

我已经移除了 @vue/cli-plugin-eslint，现在执行 vue-cli-service serve 命令时会显示 Error: Cannot find module '@vue/cli-plugin-eslint'。还需要做些什么？ - trusktr

Answer 2

截至2019年3月：

在vue.config.js文件中：

module.exports = {
  ...
  lintOnSave: false
  ...
}

- Aakash

---

如果你想让你的IDE基于.eslintrc.js进行代码检查，但在使用dev或watch npm脚本时禁用代码检查，那么这个方法非常有效。 - sudoqux

npm remove 更好。https://cli.vuejs.org/config/#pages 说： 只有在安装了 @vue/cli-plugin-eslint 时才会尊重此值。 - Marius

尽管名称如此，但此设置确实会禁用lintOnBuild。与卸载cli插件的其他答案不同，此答案允许您在需要时仍然使用“vue-cli-service lint”命令。 - W. Murphy

Answer 3

在 package.json 中修改构建步骤：

...
"scripts": {
    "build": "vue-cli-service build --skip-plugins @vue/cli-plugin-eslint",
    ...
},

- sfuerte

---

这个可行！在2020年之前的答案要求你向已不再是vue-cli模板一部分的文件中添加配置信息。 - Rocky Kev

这个很好用，只需要注意如果你传入其他参数，你需要先这样做。例如：vue-cli-service --skip-plugins @vue/cli-plugin-eslint electron:build - Sam

非常感谢！我回来工作了，终于可以专注于编程而不是删除有用的空格和空行 :) - itinance

截至2022年底：我想运行 npm run serve，而不是 build。在 package.json 文件的 "scripts": { "serve: vue-cli-service serve }" 属性中添加 --skip-plugins @vue/cli-plugin-eslint 可以解决问题。我正在使用 vue=3.2.13 和 @vue/cli-service=5.0.0。 - crunker99

Answer 4

截至当前版本（^3.0？），您只需设置：

useEslint: false, 

在config/index.js中

- Eric Grotke

---

在更改配置后，您需要再次运行 npm run dev。 - Anthony Kal

这对我没有用，而且这个选项在vue cli文档中也不再有记录。对我有用的是从我的项目中简单地删除@vue/cli-plugin-eslint模块。 - light24bulbs

Answer 5

Vue的入门项目本身就使用了一个模板语言。

查看这些模板（即{{#lint}}部分），似乎可以删除整个preLoaders块。

- ceejayoz

---

另外，如果OP想要轻松启用和禁用它，一个廉价的解决方法是将路径添加到".eslintignore"文件中。 - Bill Criswell

src/*.js无法帮助禁用src文件的eslint...可能需要采取一些额外步骤？@BillCriswell - Asqan

没错。屏蔽掉这部分是有效的。 - Karl Pokus

你可以使用src/**/*.js 和 src/**/*.vue 来递归忽略文件。 - antoine

我假设这是在使用“vue create…”命令之前禁用的方法？创建项目后如何禁用eslint？ - Robin Nelson

Answer 6

在最新版本中，打开“.eslintrc.js”文件，并将“root: false”设置为真。

- Felix Jr

---

当然它不起作用，因为 root 只告诉 ESLint 忽略父文件夹中的所有规则。 - sznowicki

你可以在parserOptions中注释掉解析器属性。 - AmirRezaM75

Answer 7

这里有很多解决方案：https://github.com/vuejs-templates/webpack/issues/73。然而，最好的方法是：在 .eslintignore 文件中添加一行 **/*，这将忽略所有文件。如果是 Web 应用程序，请重新运行。

- reverie_ss

Answer 8

最简单的方法之一就是设置一个.eslintignore文件，用于禁用您不想检测的文件或文件夹。

示例

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

/000-xyz/

参考：https://github.com/vuejs-templates/webpack/issues/73#issuecomment-355149342

该问题是由于Vue CLI的版本不同而引起的，这可能导致安装依赖项时出现错误。要解决此问题，请升级Vue CLI的版本，并尝试重新安装依赖项。如果问题仍然存在，请检查您的网络连接或更改包管理器并重试。

- xgqfrms

Answer 9

对于使用 eslint 功能创建的 Vue cli v4 项目，其 package.json 文件中包含一个名为 eslintConfig 的属性。

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

extends指定一些规则预设，默认是plugin:vue/vue3-essential和eslint:recommended。像未使用的变量或未使用的导入等常见规则都在eslint:recommended中。 如果您想禁用这些规则，只需从eslintConfig中删除eslint:recommended并重新启动项目，但不要删除plugin:vue/vue3-essential否则linter将无法识别.vue文件。

- CDT

Answer 10

如果你想要禁用 Eslint 检查某一行，你可以在该行上方添加注释来实现。

// eslint-disable-next-line

为了禁用整个文件的 Eslint，您可以在文件顶部编写下面的注释。

/* eslint-disable */

要禁用某个特定文件或文件夹的 Eslint，您可以将其包含在 .eslintignore 中。

.eslintignore

/src/components

如果您想在整个项目中禁用 Eslint，只需设置下面的路径。

.eslintignore

**/*

为了禁用一些特定的规则检查，您可以在.eslintrc.js中将其“关闭”。

module.exports = {
 rules: {
    "no-console": "off",
 },
}

no-console规则将禁用使用console.log时的警告，您可以在Eslint和Vue Esint插件文档中找到所有可用的规则。

- laurisstepanovs