Как отключить вывод eslint ошибок во vue-cli?
Во VUE-CLI есть одна невероятно раздражающая вещь — eslint-ошибки воспринимаются, как ломающие сборку, что часто мешает что-то протестировать во время разработки (напр.: комментирование использования какой-нибудь переменной вызывает экран отладки на проекте и требует либо использовать переменную, либо убрать ее инициализацию).
Как отключить отслеживание eslint в режиме development? (чтоб, любое упоминание eslint осталось только в консоли и редакторе кода)
- Вопрос задан более трёх лет назад
- 942 просмотра
Комментировать
Решения вопроса 1
Alex @Kozack Куратор тега Vue.js
Thinking about a11y
Изменяйте правила в зависимости от окружения. Примерно так:
module.exports = < // . rules: < // override/add rules settings here, such as: 'vue/no-unused-vars': proccess.env.NODE_ENV === 'production' ? 'error' : 'warn' >>Как отключить ESLint для некоторых папок, файлов или строк
ESLint — очень удобный инструмент контроля стиля кода. Но иногда, его нужно отключить. В этой заметке, я расскажу как это сделать.
Общий случай
Для примера, представим, что ESLint ругается у нас в файле есть console.log() .
Чтобы временно отключить ESLint, нужно добавить комментарий /* eslint-disable */ перед строками, которые мы хотим проигнорировать:
/* eslint-disable */ console.log('JavaScript debug log'); console.log('eslint is disabled now'); ESLint отключится, как только увидит такой комментарий и не будет анализировать все что идет после него.
Чтобы включить ESLint обратно, используется комментарий /* eslint-enable */ .
/* eslint-disable */ console.log('JavaScript debug log'); console.log('eslint is disabled now'); /* eslint-enable */ Чтобы отключить не все правила, а только какие-то определенные, нужно перечислить их в тех же комментариях через запятую:
/* eslint-disable no-console, no-control-regex*/ console.log('JavaScript debug log'); console.log('eslint is disabled now'); Правила eslint-disable и eslint-enable должны всегда находится в блочных комментариях. Так работать не будет:
// eslint-disable no-console, no-control-regex console.log('JavaScript debug log'); console.log('eslint is disabled now'); Одна строка
Чтобы отключить ESLint для одной строки, можно использовать для варианта.
Для текущей строки — строчный комментарий после окончания строки:
console.log('eslint is disabled for the current line'); // eslint-disable-line Для следующей строки — строчный комментарий выше строки которую мы отключаем:
// eslint-disable-next-line console.log('eslint is disabled for the current line'); Весь файл или папка
Чтобы отключить ESLint во всем файле, можно добавить /* eslint-disable */ в первой строке этого файла.
Альтернативно, можно создать файл .eslintignore в корневой директории проекта. Формат этого файла совпадает с форматом .gitignore и ты можешь добавить туда не только файлы, но и папки.
build/*.js config/*.js bower_components/foo/*.js Как отключить eslint в vue-cli
Судя по активности обсуждения issue на гитхабе, у многих есть проблема с отключением линтера при работе с vue-cli.
У нас это случилось во время работы с github-actions: мы собирали проект, прогоняли тесты. Локально всё собирается, а в github падает build. Начали выяснять — ругается eslint. Можно настроить всё, но это время. Быстрое решение — отключить линтер, чтобы билд заработал, а потом уже разобраться с линтером, как будет время.
Eslint можно отключить несколькими способами: файл .eslintignore , комментирование части кода в файле webpack.base.conf.js .
С помощью файла .eslintignore
Создаём файл. eslintignore в корне. Внутри файла пишем * , либо игнорим отдельные файлы или папки:
/build/ /config/ /dist/ /*.js /test/unit/coverage/Закомменировать настройки в webpack.base.conf.js
Находим в файле build/webpack.base.conf.js настройки, относящиеся к линтеру и комментируем их:
How to disable ESLint in vue-cli?
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?
54.4k 22 22 gold badges 158 158 silver badges 151 151 bronze badges
asked Aug 4, 2016 at 1:25
Mahmud Adam Mahmud Adam
3,519 8 8 gold badges 33 33 silver badges 54 54 bronze badges
Which template are you using? Simple webpack?
Aug 4, 2016 at 1:31
full-featured Webpack
Aug 4, 2016 at 1:36
Look at the <> blocks in github.com/vuejs-templates/webpack/blob/… — can probably drop the entire preLoaders block?
Aug 4, 2016 at 1:44
@HectorLorenzo Moved it.
Aug 4, 2016 at 11:56
22 Answers 22
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
2,131 2 2 gold badges 12 12 silver badges 9 9 bronze badges
Since the original question is 3 years old, this should definitely be marked as the correct answer.
Nov 1, 2019 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.
Jan 27, 2021 at 22:41
Solution works and prevents from unnecessary stress
Aug 14, 2021 at 8: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?
Jan 18, 2022 at 5:25
As of 2019, March :
In the vue.config.js :
module.exports =
9,402 22 22 gold badges 85 85 silver badges 128 128 bronze badges
answered Mar 21, 2019 at 3:31
21.7k 7 7 gold badges 101 101 silver badges 81 81 bronze badges
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.
Nov 6, 2019 at 14:43
npm remove is better. cli.vuejs.org/config/#pages says This value is respected only when @vue/cli-plugin-eslint is installed.
May 17, 2020 at 6:57
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.
May 20, 2021 at 16:33
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
729 5 5 silver badges 5 5 bronze badges
This works! Answers prior to 2020 want you to add configs to files that no longer are part of the vue-cli template.
Sep 19, 2020 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
Sep 29, 2020 at 21:05
Thanks a lot! I am back to work and can finally focus on programming instead of removing helpful spaces and empty lines 🙂
Sep 27, 2021 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
Dec 17, 2022 at 18:01
As of the current version (^3.0?) you can just set:
useEslint: false, 3,078 1 1 gold badge 28 28 silver badges 37 37 bronze badges
answered Feb 9, 2018 at 18:52
Eric Grotke Eric Grotke
4,709 3 3 gold badges 21 21 silver badges 19 19 bronze badges
you will need to do npm run dev again after doing changes to config
Sep 16, 2019 at 4: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
Oct 22, 2021 at 23:44
Vue’s starter projects are themselves built with a templating language.
Looking at the templates (the > bits) it appears you can remove the entire preLoaders block.
answered Aug 4, 2016 at 11:56
177k 40 40 gold badges 303 303 silver badges 369 369 bronze badges
Also, a cheap fix in case OP wants to easily enable and disable it is to add paths to the .eslintignore file.
Aug 4, 2016 at 13:06
src/*.js didn’t help to disable eslint for src file . may be needed to take some extra steps? @BillCriswell
Feb 8, 2017 at 15:46
Yup. Blocking out this part works.
Mar 28, 2017 at 15:24
@Asqan you might want to use src/**/*.js and src/**/*.vue to ignore files recursively
Jun 28, 2017 at 21:14
I’m assuming this is how to disable before using the «vue create. » command? How do we disable eslint after creating a project?
Jan 26, 2020 at 21:39
In the latest version, open the «.eslintrc.js» file, and set «root: false».
answered Jul 27, 2018 at 11:08
402 6 6 silver badges 10 10 bronze badges
Of course it’s not working since root only tells ESLint that all the rules from parent folder should be dismissed.
Aug 30, 2019 at 12:04
you can comment parser property in parserOptions
Jan 14, 2021 at 21:15
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!
answered Jul 23, 2018 at 7:32
reverie_ss reverie_ss
2,436 23 23 silver badges 30 30 bronze badges
One of the most simple way is just setting an .eslintignore file with you want to disabled folders & files.
/build/ /config/ /dist/ /*.js /test/unit/coverage/ /000-xyz/ 13k 7 7 gold badges 83 83 silver badges 96 96 bronze badges
answered Jun 3, 2019 at 2:29
10.6k 1 1 gold badge 71 71 silver badges 68 68 bronze badges
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.