How to completely remove eslint from project
I would like to get rid of Eslint on my project, but I can’t figure out how. My package.json does not have any mention of eslint inside:
"dependencies": < "axios": "^0.27.2", "body-parser": "^1.20.0", "cors": "^2.8.5", "express": "^4.18.1", "firebase": "^9.7.0", "firebase-admin": "^10.2.0", "moment": "^2.29.3", "morgan": "^1.10.0", "plaid": "^10.3.0", "uniqid": "^5.4.0" >, "devDependencies": < "@types/jest": "^28.1.2", "dotenv": "^16.0.0", "jest": "^28.1.1", "nodemon": "^2.0.16", "ts-node": "^10.7.0", "typescript": "^4.6.4" >
There are no eslint files inside my project, and my global npm installs does not contain eslint.
$ npm list -g C:\Users\sales\AppData\Roaming\npm ├── [email protected] ├── [email protected] └── [email protected] What else should I do so eslint is not on my project?
Brace Sproul
asked Jun 21, 2022 at 6:01
Brace Sproul Brace Sproul
613 1 1 gold badge 7 7 silver badges 17 17 bronze badges
1 Answer 1
Just delete .eslintrc and any other eslint config files, if any, from the project.
Also, check your package.json and delete all eslint packages and do npm install on your project.
If you are using vscode, you can disable it with a simple setting.
17.8k 7 7 gold badges 42 42 silver badges 76 76 bronze badges
answered Jun 21, 2022 at 6:15
458 1 1 gold badge 3 3 silver badges 8 8 bronze badges
Hey, I stated in my question I don’t have it inside my package.json or any eslint files in my project directory, and I checked out that link you provided and it still didn’t work. Any other ideas? Thanks
Jun 21, 2022 at 18:29
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
@vue/cli-plugin-eslint #
Проверяет и исправляет файлы. Если не указаны конкретные файлы для проверки, то будут проверяться все файлы в src и tests , а также все файлы JavaScript в корневом каталоге (чаще всего это файлы конфигурации, например babel.config.js или .eslintrc.js ). Также поддерживаются и другие настройки ESLint CLI.
Совет По умолчанию vue-cli-service lint проверяет файлы, именуемые с точки .*.js . Если вместо этого требуется поведение ESLint по умолчанию, то следует добавить в проект файл .eslintignore .
Конфигурация #
ESLint можно настраивать через .eslintrc или поле eslintConfig в файле package.json . Подробнее см. в документации конфигурации ESLint.
Следующая опция находится в разделе vue.config.js . Это соблюдается только при установке @vue/cli-plugin-eslint .
Линтинг при сохранении (Lint-on-save) при разработке с помощью eslint-loader включён по умолчанию. Это можно отключить с помощью опции lintOnSave в файле vue.config.js :
module.exports = lintOnSave: false > Если установлено true , eslint-loader будет показывать ошибки линтинга в виде предупреждений. По умолчанию предупреждения только логируются в терминале и не завершают компиляцию ошибкой.
Чтобы показывать ошибки линтинга в браузере, можно использовать lintOnSave: ‘error’ . Это заставит eslint-loader всегда генерировать ошибки. Это также означает, что ошибки линтинга будут завершать компиляцию ошибкой.
Кроме того, можно настроить отображение в браузере как предупреждений, так и ошибок:
// vue.config.js module.exports = devServer: overlay: warnings: true, errors: true > > > Когда значение lintOnSave приводится к истине, eslint-loader будет применяться как в разработке, так и в production. Если необходимо отключить eslint-loader при сборке production, можно использовать следующую конфигурацию:
// vue.config.js module.exports = lintOnSave: process.env.NODE_ENV !== 'production' > Установка в уже созданный проект #
vue add eslint Внедряемые правила webpack-chain #
- config.module.rule(‘eslint’)
- config.module.rule(‘eslint’).use(‘eslint-loader’)
Как отключить 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 настройки, относящиеся к линтеру и комментируем их:
Руководство Eslint + Prettier
В этой статье мы рассмотрим основные правила линтера и способы его настройки под проект.
Какой цели я хочу достигнуть в результате?
Иметь возможность форматировать свой код быстро, используя автоматизацию и лучшие практики программирования.
Какие проблемы решает eslint?
Линтер — это статический анализатор для языка программирования. Он сообщает о потенциально опасных выражениях в коде, которые могут привести к аварийному завершению программы. Также линтер может сообщить об устаревших участках кода, синтаксических ошибках и неиспользованных переменных. Всего существует около 300 правил, которые можно включить/выключить по желанию.
Для чего тогда нам нужен Prettier?
На большом проекте, как правило, работает несколько программистов. У каждого из них может быть свое мнение относительно качества кода и размера отступов в строке. Eslint может форматировать текст, но требует дополнительной кропотливой настройки. Облегчить задачу призвана утилита Prettier. У нее открытый исходный код и имеется хорошая поддержка сообщества. Большая часть правил оформления уже задана по умолчанию, но у пакета есть гибкая система настройки и удобный API, позволяющий описывать свои правила в конфигурационном файле формата .json/.yml. Это значит, что мы можем написать файл с едиными настройками для всей команды.
Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев
- Постоянная поддержка от наставника и учебного центра
- Помощь с трудоустройством
- Готовое портфолио к концу обучения
- Практика с первого урока
Вы получите именно те инструменты и навыки, которые позволят вам найти работу
Перейдем к настройке
Начну с того, что здесь описана настройка линтера на примере VScode. Для других IDE будет разница только в поиске нужных расширений. Итак:
- Откройте Vscode и найдите в левой боковой панели пункт Extensions ( ctrl/cmd+shift+X )
- В строке поиска введите ESLint и установите пакет от Dirk Baeumer.
- Проделайте аналогичную операцию для Prettier — Code formatter. (может потребоваться перезагрузка редактора после установки).
- Дальше нам нужно установить сам линтер с помощью команды npm install eslint —save-dev
- После установки линтера мы можем воспользоваться стандартным скриптом для базовой настройки конфигурационного файла. Для этого пишем в консоли следующую команду: eslint —init
- Скрипт попросит ответить нас на вопросы о текущем проекте и выставит соответствующие правила:
Можете поэкспериментировать с настройками, чтобы понять, какой пункт меню за что отвечает. Итогом настройки будет являться сформированный файл .eslintrc.json. Вы можете создать файл с настройками самостоятельно и поместить его на один уровень с package.json.
Для того, чтобы наша проверка работала, нам нужно установить необходимые пакеты:
Если вы создали файл конфигурации с помощью eslint —init, скрипт предложит вам автоматически установить пакет для работы с React. Если вы хотите сделать это самостоятельно — пропишите:
Пример настройки файлов для работы ESLint:
[0]=off // выключает правило
[1]=warn // выводит предупреждение в консоль
[2]=error // выводит error и останавливает исполнение программы
, /* Пресет с настройками. prettier должен быть последним. Он удаляет некоторые правила eslint из-за которых могут возникать конфликты. */ "extends": [ "eslint:recommended", "plugin:react/recommended", "prettier" ], "parser": "babel-eslint", // Парсер для обработки jsx кода "parserOptions": < "ecmaFeatures": < "jsx": true >, "ecmaVersion": 11, // версия стандарта JavaScript. Последний 12 (2021). "sourceType": "module" // Позволяет использовать import/export >, // Здесь мы подключаем используемые плагины. "plugins": [ "react", "prettier" ], /* Правила для отслеживания линтером. Если пресеты покрывают не все ситуации, вы можете прописать нужные правила вручную. */) "rules": < "prettier/prettier": "error", . // Обязательно!! Подсвечивает ошибки из Prettier. "react/prop-types": 0 // Отключаем правило проверки передаваемых типов. >> *Правила оформления кода. Полный список настроек вы можете найти здесь .
Чтобы исключить из проверки директории/файлы указываем их в виде списка
Основная настройка закончена. Теперь нам нужно, чтобы при сохранении файла наша IDE форматировала код и исправляла ошибки. Стоит уточнить, что ESLint умеет исправлять не всё и иногда вам придется править конфликты вручную.
Для автоматического форматирования нам нужно
- Зайти в настройки — Ctrl/Cmd +Shift + P
- В строку поиска вписать — settings
- Выбрать пункт — Preferences: Open Settings (JSON) В файле settings.json добавляем:
, >, "editor.formatOnSave": true > Tip. Если у вас возникли проблемы во время работы с ESLint, перейдите во вкладку Output и посмотрите вывод об ошибках.
TROUBLESHOOTING
- Q: Что делать, если при работе на Windows возникает следующая ошибка? [eslint] Delete ‘cr’ [prettier/prettier]. A: Чтобы её решить, нужно немного поменять настройки в файле .eslintrc.json «prettier/prettier»: [«error», < "endOfLine":"auto" >],
- Q: Не работают правила линтера или форматирование отличается от ожидаемого. A: Возможно, это следствие наличия в проекте других конфигурационных файлов. Они имеют разный приоритет исполнения. Например, файл .editorconfig имеет высший приоритет, чем .eslintrc. , поэтому линтер будет выставлять настройки с его помощью.
- Q: Выставляются двойные скобки, вместо одинарных. A: Чаще всего это происходит из-за конфликта настроек линтера и prettier. Некоторые пресеты (extends в файле .eslintrc.json) содержат в себе правила настройки форматирования скобок. Последний указанный пресет переписывает правила предыдущих. Убедитесь в том, что «prettier» находится последним в списке extends.
Заключение
Часто в проектах могут использовать популярный конфиг от Airbnb. Он содержит больше правил и может вас запутать, поэтому рекомендую к нему обращаться после того, как усвоите базовые принципы работы линтера. Спасибо, что дочитали до конца. Работать с кодом теперь будет более приятно и гораздо быстрее.
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS