How to disable ESLint in vue-cli?

Question

How do I go about disabling ESlint in project generated with vue-cli?

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

If I remove the loader: 'eslint' line it won't compile, same with setting it to an empty string. I know I can opt out of ESLint during the initialization phase, but how can I disable it after my project has been created?

Look at the `{{#lint}}` blocks in https://github.com/vuejs-templates/webpack/blob/cbcba9268dbfb277497bcdde6409dab4398eed8e/template/build/webpack.base.conf.js - can probably drop the entire `preLoaders` block? — ceejayoz, Aug 04 '16 at 01:44

score 157 · Answer 1 · answered Jan 18 '19 at 00:24

157

There are some out-of-date answers here.

Because vue-cli 3 is using a zero configuration approach, the way to disable it is to just uninstall the module:

npm remove @vue/cli-plugin-eslint

answered Jan 18 '19 at 00:24

Wossname

2,121
2
12
9

10

Since the original question is 3 years old, this should definitely be marked as the correct answer. – db2 Nov 01 '19 at 17:59
This is only correct if you want to fully remove linting. If you just want to removing linting "ON SAVE" then use the solution provided by Aakass hand Radbyx. – TetraDev Jan 27 '21 at 22:41
Solution works and prevents from unnecessary stress – Ashwani Garg Aug 14 '21 at 08:04
I removed `@vue/cli-plugin-eslint` and now the command `vue-cli-service serve` says `Error: Cannot find module '@vue/cli-plugin-eslint'`. What else is needed? – trusktr Jan 18 '22 at 05:25

score 121 · Answer 2 · edited Oct 02 '20 at 21:15

121

As of `2019, March` :

In the vue.config.js :

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

edited Oct 02 '20 at 21:15

radbyx

9,352
21
84
127

answered Mar 21 '19 at 03:31

Aakash

21,375
7
100
81

2

This works well if you want your IDE to handle linting based on .eslintrc.js, but have linting disabled when using the dev or watch npm-scripts. – sudoqux Nov 06 '19 at 14:43
1

npm remove is better. https://cli.vuejs.org/config/#pages says This value is respected only when @vue/cli-plugin-eslint is installed. – Marius May 17 '20 at 06:57
1

Despite the name, this setting really does disable lintOnBuild. Unlike other answer of uninstalling the cli plugin, this answer lets you still use the `vue-cli-service lint` command when you want it. – W. Murphy May 20 '21 at 16:33

score 59 · Answer 3 · answered May 11 '20 at 01:41

59

in package.json change the build step:

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

answered May 11 '20 at 01:41

sfuerte

729
5
5

1

This works! Answers prior to 2020 want you to add configs to files that no longer are part of the vue-cli template. – RockyK Sep 19 '20 at 17:01
This works great, just note that if you pass in other arguments, you'll need to do this first. Example: vue-cli-service --skip-plugins @vue/cli-plugin-eslint electron:build – Sam Sep 29 '20 at 21:05
1

Thanks a lot! I am back to work and can finally focus on programming instead of removing helpful spaces and empty lines :) – itinance Sep 27 '21 at 14:34
As of end of 2022: I wanted to run `npm run serve`, not `build`. Adding `--skip-plugins @vue/cli-plugin-eslint` to `"scripts": { "serve: vue-cli-service serve }"` property in package.json worked. I'm using vue=3.2.13, @vue/cli-service=5.0.0 – crunker99 Dec 17 '22 at 18:01

score 35 · Answer 4 · edited Feb 18 '22 at 05:58

35

As of the current version (^3.0?) you can just set:

useEslint: false,

in config/index.js

edited Feb 18 '22 at 05:58

dKen

3,078
1
28
37

answered Feb 09 '18 at 18:52

Eric Grotke

4,651
3
21
19

1

you will need to do `npm run dev` again after doing changes to config – Anthony Kal Sep 16 '19 at 04:59
This didn't work for me, and this option is no longer documented in the vue cli docs. What did work for me was simply deleting the `@vue/cli-plugin-eslint` module from my project – light24bulbs Oct 22 '21 at 23:44

score 16 · Accepted Answer · answered Aug 04 '16 at 11:56

16

Vue's starter projects are themselves built with a templating language.

Looking at the templates (the {{#lint}} bits) it appears you can remove the entire preLoaders block.

answered Aug 04 '16 at 11:56

ceejayoz

176,543
40
303
368

15

Also, a cheap fix in case OP wants to easily enable and disable it is to add paths to the .eslintignore file. – Bill Criswell Aug 04 '16 at 13:06
`src/*.js` didn't help to disable eslint for src file ... may be needed to take some extra steps? @BillCriswell – Asqan Feb 08 '17 at 15:46
Yup. Blocking out [this part](https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L33-L41) works. – Karl Pokus Mar 28 '17 at 15:24
3

@Asqan you might want to use ```src/**/*.js``` and ```src/**/*.vue``` to ignore files recursively – antoine Jun 28 '17 at 21:14
2

I'm assuming this is how to disable before using the "vue create..." command? How do we disable eslint after creating a project? – Robin Nelson Jan 26 '20 at 21:39

score 9 · Answer 6 · answered Jul 27 '18 at 11:08

9

In the latest version, open the ".eslintrc.js" file, and set "root: false".

answered Jul 27 '18 at 11:08

Felix Jr

402
6
10

1

Of course it's not working since `root` only tells ESLint that all the rules from parent folder should be dismissed. – sznowicki Aug 30 '19 at 12:04
you can comment parser property in parserOptions – AmirRezaM75 Jan 14 '21 at 21:15

reverie_ss · Answer 7 · 2018-07-23T07:47:57.303

7

There's a hell lot of solutions here: https://github.com/vuejs-templates/webpack/issues/73

However the best one is :
To add a line of **/* to .eslintignore, which will ignore all files. And then re-run, if it's a web app!

edited Jul 23 '18 at 07:47

answered Jul 23 '18 at 07:32

reverie_ss

2,396
23
30

score 6 · Answer 8 · edited Aug 01 '19 at 17:34

6

One of the most simple way is just setting an .eslintignore file with you want to disabled folders & files.

demo

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

/000-xyz/

Ref: https://github.com/vuejs-templates/webpack/issues/73#issuecomment-355149342

edited Aug 01 '19 at 17:34

james.garriss

12,959
7
83
96

answered Jun 03 '19 at 02:29

xgqfrms

10,077
1
69
68

score 5 · Answer 9 · answered Nov 28 '21 at 07:04

For Vue cli v4 and project created with eslint feature selected, there's a eslintConfig property in package.json:

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

extends specifies some rule presets and default is plugin:vue/vue3-essential and eslint:recommended. Common rules like unused variables or unused imports are in eslint:recommended. If you want to disable such rules, just remove eslint:recommended in eslintConfig and restart the project, but don't remove plugin:vue/vue3-essential otherwise linter will not be able to recognise .vue files.

score 4 · Answer 10 · answered Sep 05 '21 at 03:33

4

At first you need to create a file name of

vue.config.js

then write bellow line

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

This process worked for me. Thanks

answered Sep 05 '21 at 03:33

Eahiya

931
1
6
12

Panayiotis Hiripis · Answer 11 · 2019-02-21T13:22:40.230

3

Go inside file "tslint.json" and exclude all files in linterOptions. Default settings only excludes folder node_modules. You may also set "strict": false, inside tsconfig.json

  "linterOptions": {
    "exclude": [
      "*/**"
    ]
  },

instead of

  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },

edited Feb 21 '19 at 13:22

answered Feb 20 '19 at 07:11

Panayiotis Hiripis

620
6
10

laurisstepanovs · Answer 12 · 2022-08-12T15:04:50.983

To disable Eslint for one line you can put a comment above the line you want to disable Eslint check.

// eslint-disable-next-line

To disable Eslint for the whole file you can write a comment below on top of the file.

/* eslint-disable */

To disable Eslint for one specific file or folder you can include it to .eslintignore.

.eslintignore

/src/components

Same way if you want to disable Eslint in the entire project just set the path below.

.eslintignore

**/*

To disable some specific rule check you can "off" it in .eslintrc.js.

.eslintrc.js

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

no-console rule will disable warnings when using console.log, you can find all available rules in Eslint and Vue Esint plugin docs.

score 2 · Answer 13 · answered Mar 15 '20 at 03:22

2

setEslint: false work for me!

module.exports = {
  dev: {
     ...
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: false,
    ...
  },
}

answered Mar 15 '20 at 03:22

ZWHmepsy

21
4

no, that stops eslint running in webstorm — I don't get red squiggles. – Simon Dec 06 '20 at 23:38
`setEslint` or `useEslint`? – Amir Asyraf Mar 26 '21 at 02:04
Works great for me! I do not want to remove eslint, just to shut it up while I do dev work. – Kalnode Jul 13 '22 at 20:11

score 2 · Answer 14 · answered Jul 31 '22 at 06:20

2

You can either delete it using the command

npm remove @vue/cli-plugin-eslint

Or Disable it for a particular file by using the below command in that file's script tag

/* eslint-disable */

answered Jul 31 '22 at 06:20

Sandeep Rana

179
2
6

score 1 · Answer 15 · edited Jul 31 '18 at 06:51

1

Set useEslint: false, in config/index.js

see this image

edited Jul 31 '18 at 06:51

Alien

15,141
6
37
57

answered Jul 31 '18 at 05:03

Santosh P

125
1
3

Add some description – Mathews Sunny Jul 31 '18 at 05:25

score 1 · Answer 16 · edited Apr 08 '20 at 19:27

1

Go to .eslintrc.js and add this:

dev: {
   useEslint: false
},

edited Apr 08 '20 at 19:27

Paul Roub

36,322
27
84
93

answered Apr 08 '20 at 19:23

Nick Vasilakopoulos

33
4

score 1 · Answer 17 · answered Jun 03 '22 at 17:42

1

to easily to this just uninstall using the following commands

npm remove @vue/cli-plugin-eslint
yarn remove @vue/cli-plugin-eslint

answered Jun 03 '22 at 17:42

Gabriel soft

432
3
7

score 1 · Answer 18 · answered Jul 17 '22 at 08:09

1

I personaly in order to get over that problem, created a new project and manually emited the Linter / Formatter option from the setup

i dont solve the problem i just try avoid it. Hope this helps someone

answered Jul 17 '22 at 08:09

Dim John

11
4

score 0 · Answer 19 · answered Mar 05 '21 at 07:40

For vue3 users, just comment out the parserOptions in the eslintrc.js file. it works for me cos sometimes linting can become frustrating

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  // parserOptions: {
  //   parser: 'babel-eslint'
  // },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

score 0 · Answer 20 · answered Jun 09 '21 at 16:20

in vueCli go to package json remove eslint from dependencies at end your package json must like this

{
  "name": "vuecompesation",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"

  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0"
  
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

score 0 · Answer 21 · answered Jul 05 '22 at 01:07

0

In .eslintignore, add

/*/

Lint will no longer complain

answered Jul 05 '22 at 01:07

Artur

1,125
11
17

score -1 · Answer 22 · answered Sep 08 '21 at 20:27

-1

This should work

in vue.config.js add this

module.exports = {
    lintOnSave: false
}

answered Sep 08 '21 at 20:27

MD SHAYON

7,001
45
38

How to disable ESLint in vue-cli?

22 Answers22

As of `2019, March` :

Linked

How to disable ESLint in vue-cli?

22 Answers22

As of 2019, March :

Linked

As of `2019, March` :