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 github.com/vuejs-templates/webpack/blob/… - can probably drop the entire preLoaders block? — ceejayoz
– ceejayoz, Commented Aug 4, 2016 at 1:44

Wossname · Accepted Answer · 2019-01-18 00:24:46Z

162

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, 2019 at 0:24

Wossname

2,1812 gold badges12 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

db2 Over a year ago

Since the original question is 3 years old, this should definitely be marked as the correct answer.

TetraDev Over a year ago

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.

Ashwani Garg Over a year ago

Solution works and prevents from unnecessary stress

trusktr Over a year ago

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?

radbyx · Accepted Answer · 2020-10-02 21:15:26Z

127

As of `2019, March` :

In the vue.config.js :

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

edited Oct 2, 2020 at 21:15

radbyx

9,72022 gold badges93 silver badges133 bronze badges

answered Mar 21, 2019 at 3:31

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

3 Comments

sudoqux Over a year ago

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.

Marius Over a year ago

npm remove is better. cli.vuejs.org/config/#pages says This value is respected only when @vue/cli-plugin-eslint is installed.

W. Murphy Over a year ago

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.

sfuerte · Accepted Answer · 2020-05-11 01:41:36Z

60

in package.json change the build step:

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

answered May 11, 2020 at 1:41

sfuerte

7496 silver badges5 bronze badges

4 Comments

RockyK Over a year ago

This works! Answers prior to 2020 want you to add configs to files that no longer are part of the vue-cli template.

Sam Over a year ago

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

itinance Over a year ago

Thanks a lot! I am back to work and can finally focus on programming instead of removing helpful spaces and empty lines :)

crunker99 Over a year ago

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

dKen · Accepted Answer · 2022-02-18 05:58:16Z

35

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

useEslint: false,

in config/index.js

edited Feb 18, 2022 at 5:58

dKen

3,1471 gold badge30 silver badges39 bronze badges

answered Feb 9, 2018 at 18:52

Eric Grotke

5,1453 gold badges23 silver badges19 bronze badges

2 Comments

Anthony Kal Over a year ago

you will need to do npm run dev again after doing changes to config

light24bulbs Over a year ago

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

ceejayoz · Accepted Answer · 2016-08-04 11:56:12Z

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 4, 2016 at 11:56

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

5 Comments

Bill Criswell Over a year ago

Also, a cheap fix in case OP wants to easily enable and disable it is to add paths to the .eslintignore file.

Asqan Over a year ago

src/*.js didn't help to disable eslint for src file ... may be needed to take some extra steps? @BillCriswell

Karl Pokus Over a year ago

Yup. Blocking out this part works.

antoine Over a year ago

@Asqan you might want to use src/**/*.js and src/**/*.vue to ignore files recursively

Robin Nelson Over a year ago

I'm assuming this is how to disable before using the "vue create..." command? How do we disable eslint after creating a project?

Felix Jr · Accepted Answer · 2018-07-27 11:08:17Z

10

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

answered Jul 27, 2018 at 11:08

Felix Jr

4606 silver badges10 bronze badges

2 Comments

sznowicki Over a year ago

Of course it's not working since root only tells ESLint that all the rules from parent folder should be dismissed.

AmirRezaM75 Over a year ago

you can comment parser property in parserOptions

reverie_ss · Accepted Answer · 2018-07-23 07:47:57Z

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, 2018 at 7:47

answered Jul 23, 2018 at 7:32

reverie_ss

2,70425 silver badges30 bronze badges

Comments

james.garriss · Accepted Answer · 2019-08-01 17:34:49Z

7

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 1, 2019 at 17:34

james.garriss

13.4k7 gold badges86 silver badges101 bronze badges

answered Jun 3, 2019 at 2:29

xgqfrms

12.4k1 gold badge81 silver badges73 bronze badges

Comments

CDT · Accepted Answer · 2021-11-28 07:04:02Z

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.

Eahiya · Accepted Answer · 2021-09-05 03:33:26Z

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 5, 2021 at 3:33

Eahiya

1,3312 gold badges9 silver badges12 bronze badges

Comments

laurisstepanovs · Accepted Answer · 2022-08-12 15:04:50Z

4

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.

edited Aug 12, 2022 at 15:04

answered Aug 12, 2022 at 14:58

laurisstepanovs

5465 silver badges21 bronze badges

Comments

Panayiotis Hiripis · Accepted Answer · 2019-02-21 13:22:40Z

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, 2019 at 13:22

answered Feb 20, 2019 at 7:11

Panayiotis Hiripis

7207 silver badges10 bronze badges

Comments

ZWHmepsy · Accepted Answer · 2020-03-15 03:22:39Z

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, 2020 at 3:22

ZWHmepsy

214 bronze badges

3 Comments

Simon Over a year ago

no, that stops eslint running in webstorm — I don't get red squiggles.

Amir Asyraf Over a year ago

setEslint or useEslint?

Kalnode Over a year ago

Works great for me! I do not want to remove eslint, just to shut it up while I do dev work.

Paul Roub · Accepted Answer · 2020-04-08 19:27:42Z

2

Go to .eslintrc.js and add this:

dev: {
   useEslint: false
},

edited Apr 8, 2020 at 19:27

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered Apr 8, 2020 at 19:23

Nick Vasilakopoulos

431 silver badge4 bronze badges

Comments

Artur · Accepted Answer · 2022-07-05 01:07:37Z

2

In .eslintignore, add

/*/

Lint will no longer complain

answered Jul 5, 2022 at 1:07

Artur

1,18311 silver badges17 bronze badges

Comments

Sandeep Rana · Accepted Answer · 2022-07-31 06:20:11Z

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, 2022 at 6:20

Sandeep Rana

3093 silver badges6 bronze badges

Comments

Alien · Accepted Answer · 2018-07-31 06:51:05Z

1

Set useEslint: false, in config/index.js

see this image

edited Jul 31, 2018 at 6:51

Alien

16k8 gold badges43 silver badges64 bronze badges

answered Jul 31, 2018 at 5:03

Santosh P

1551 silver badge3 bronze badges

1 Comment

Mathews Sunny Over a year ago

Add some description

Gabriel soft · Accepted Answer · 2022-06-03 17:42:25Z

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 3, 2022 at 17:42

Gabriel soft

5877 silver badges11 bronze badges

Comments

Dim John · Accepted Answer · 2022-07-17 08:09:58Z

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, 2022 at 8:09

Dim John

114 bronze badges

Comments

i-wizard · Accepted Answer · 2021-03-05 07:40:30Z

0

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'
  }
}

answered Mar 5, 2021 at 7:40

i-wizard

3142 silver badges5 bronze badges

Comments

kiarash shamaii · Accepted Answer · 2021-06-09 16:20:07Z

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"
  ]
}

MD SHAYON · Accepted Answer · 2021-09-08 20:27:00Z

-1

This should work

in vue.config.js add this

module.exports = {
    lintOnSave: false
}

answered Sep 8, 2021 at 20:27

MD SHAYON

8,11156 silver badges43 bronze badges

Collectives™ on Stack Overflow

How to disable ESLint in vue-cli?

22 Answers 22

4 Comments

As of `2019, March` :

3 Comments

4 Comments

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

22 Answers 22

4 Comments

As of 2019, March :

3 Comments

4 Comments

2 Comments

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

As of `2019, March` :