Как подключить eslint к vs code

Руководство Eslint + Prettier

В этой статье мы рассмотрим основные правила линтера и способы его настройки под проект.

Какой цели я хочу достигнуть в результате?

Иметь возможность форматировать свой код быстро, используя автоматизацию и лучшие практики программирования.

Какие проблемы решает eslint?

Линтер — это статический анализатор для языка программирования. Он сообщает о потенциально опасных выражениях в коде, которые могут привести к аварийному завершению программы. Также линтер может сообщить об устаревших участках кода, синтаксических ошибках и неиспользованных переменных. Всего существует около 300 правил, которые можно включить/выключить по желанию.

Для чего тогда нам нужен Prettier?

На большом проекте, как правило, работает несколько программистов. У каждого из них может быть свое мнение относительно качества кода и размера отступов в строке. Eslint может форматировать текст, но требует дополнительной кропотливой настройки. Облегчить задачу призвана утилита Prettier. У нее открытый исходный код и имеется хорошая поддержка сообщества. Большая часть правил оформления уже задана по умолчанию, но у пакета есть гибкая система настройки и удобный API, позволяющий описывать свои правила в конфигурационном файле формата .json/.yml. Это значит, что мы можем написать файл с едиными настройками для всей команды.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Перейдем к настройке

Начну с того, что здесь описана настройка линтера на примере VScode. Для других IDE будет разница только в поиске нужных расширений. Итак:

1. Откройте Vscode и найдите в левой боковой панели пункт Extensions ( ctrl/cmd+shift+X )
2. В строке поиска введите ESLint и установите пакет от Dirk Baeumer.
3. Проделайте аналогичную операцию для Prettier — Code formatter. (может потребоваться перезагрузка редактора после установки).
4. Дальше нам нужно установить сам линтер с помощью команды npm install eslint —save-dev
5. После установки линтера мы можем воспользоваться стандартным скриптом для базовой настройки конфигурационного файла. Для этого пишем в консоли следующую команду: eslint —init
6. Скрипт попросит ответить нас на вопросы о текущем проекте и выставит соответствующие правила:

Можете поэкспериментировать с настройками, чтобы понять, какой пункт меню за что отвечает. Итогом настройки будет являться сформированный файл .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

1. Q: Что делать, если при работе на Windows возникает следующая ошибка? [eslint] Delete ‘cr’ [prettier/prettier]. A: Чтобы её решить, нужно немного поменять настройки в файле .eslintrc.json «prettier/prettier»: [«error», < "endOfLine":"auto" >],
2. Q: Не работают правила линтера или форматирование отличается от ожидаемого. A: Возможно, это следствие наличия в проекте других конфигурационных файлов. Они имеют разный приоритет исполнения. Например, файл .editorconfig имеет высший приоритет, чем .eslintrc. , поэтому линтер будет выставлять настройки с его помощью.
3. Q: Выставляются двойные скобки, вместо одинарных. A: Чаще всего это происходит из-за конфликта настроек линтера и prettier. Некоторые пресеты (extends в файле .eslintrc.json) содержат в себе правила настройки форматирования скобок. Последний указанный пресет переписывает правила предыдущих. Убедитесь в том, что «prettier» находится последним в списке extends.

Заключение

Часто в проектах могут использовать популярный конфиг от Airbnb. Он содержит больше правил и может вас запутать, поэтому рекомендую к нему обращаться после того, как усвоите базовые принципы работы линтера. Спасибо, что дочитали до конца. Работать с кодом теперь будет более приятно и гораздо быстрее.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

ESLint. Знакомство

ESLint — линтер для javascript. Вероятно, самый лучший из существующих. Среди его достоинств стоит выделить:

• большое количество проверок. Их настолько много, что прочитать все описания и выбрать нужный набор правил может занять пару дней. Именно поэтому мы не будем этим заниматься сегодня.
  Если Вы все же любите рисковать, посмотрите полный список правил.
• автоматическое исправление кода. ESLint берет на себя всю рутину по исправлению простых ошибок, таких как стилевые недочеты, забытый debugger, не указанный “use strict” и многие другие.
• легкую расширяемость. Существуют готовые сторонние плагины с наборами проверок. Например, есть готовые плагины для React или Node.js. Найти другие плагины можно в npm по префиксу “eslint-plugin-”. Если этого все еще мало, можно написать свои собственные проверки. Это достаточно просто.
• хорошую интеграцию с редакторами кода, системами сборки и не только. Просто загляните сюда.
• активное развитие. В блоге новости об обновлении появляются с завидной регулярностью.
• поддержку свежих стандартов не только в парсере. Особые правила для ES6 смотрите в разделе “ECMAScript 6” (ожидаемо).
• отличную документацию. Сложно найти к чему придраться.
• расшаренные конфигурации. Это обычные node.js пакеты с префиксом “eslint-config-”, которые содержат в себе только конфигурацию ESLint от конкретной компании/команды/разработчика. Например, можно легко использовать готовые конфигурации от Google или Airbnb.
• репозиторий Awesome ESLint. Путеводитель по экосистеме. Ссылки на некоторые популярные расшаренные конфигурации, парсеры, плагины, утилиты, руководства.

Теперь попробуем получить быстрый результат, не углубляясь в дебри :

1. Установите node.js (хаха, у кого его нет?)
2. Установите пакет eslint глобально. Выполните в терминале:
   npm i -g eslint
3. Создайте свой первый конфигурационный файл. Запустите команду и ответьте на пару несложных вопросов:
   eslint —init
   В текущий каталог будет записан файл конфигурации. Например, “.eslintrc.json”.

Теперь можно использовать этот файл конфигурации, запуская eslint из терминала. Например, запустим ESLint (сразу с автоматическим исправлением ошибок) для кода в папке “/Users/username/Documents/MyProject” с использованием конфигурации “/Users/username/.eslintrc.json”:

eslint --fix --config=/Users/username/.eslintrc.json /Users/username/Documents/MyProject

Если ошибок и предупреждений не обнаружено или они все были успешно поправлены, то утилита ничего не выведет. К этому нужно стремиться.

При разработке удобнее видеть проблему сразу по ходу изменения текста, поэтому нужно настроить редактор. Приведем пример настройки Visual Studio Code и WebStorm.

Visual Studio Code

1. Установите плагин ESLint, перегрузите редактор.
2. Добавьте в файл конфигурации VSCode следующие строки (замените путь в eslint.options.configFile!):

"eslint.enable": true,"eslint.autoFixOnSave": true,"eslint.options":  "configFile": "/Users/username/.eslintrc.json">

VSCode готов к работе!

WebStorm

1. Прежде всего в настройках установите версию стандарта EcmaScript, под которую будете разрабатывать.

2. Включите ESLint. Возможно, в Вашем случае потребуется указать полный путь до файла конфигурации.

3. Откройте файл конфигурации ESLint(“.eslintrc.json”) и выполните импорт code style. После этого Reformat Code из WebStorm и fix из ESLint начнут работать согласовано.
Функция появилась в WebStorm 2017.2.

4. Настройте горячие клавиши для вызова eslint —fix

WebStorm готов к работе!

Линтер ES Lint

ESLint — это инструмент, помогающий анализировать написанный на JavaScript код, находить синтаксические ошибки и автоматически их исправлять, писать аккуратный код в едином стиле по определённым правилам.

ESLint в терминале

Если у вас пока нет ESLint, его нужно установить из npm.

Давайте испытаем ESLint в действии. Попробуем написать простую функцию для вывода суммы двух чисел и с помощью ESLint проверить правильность написанного кода. Для это в терминале выполним команду

npm run lint 

ESLint показывает, что нашёл 6 ошибок в файле main.js . Цифры слева говорят на какой строке, на каком символе, была найдена ошибка. Дальше в строке идёт описание ошибки. Например:

Текст 5 errors and 0 warnings potentially fixable with the —fix option после списка ошибок говорит о том, что пять из шести найденных ошибок ESLint сможет исправить автоматически.

Обратите внимание, что требования, по которым ESLint проверяет код, на каждом проекте могут быть свои, всё зависит от правил, принятых в команде. Например, в команде может быть принято использование двойных кавычек, в таком случае ESLint не будет ругаться на двойные кавычки, а вот при использовании одинарных возникнет ошибка. Такие правила описываются в специальном файле .eslintrc .

Исправление ошибок

Для исправления ошибок у ESLint есть опция fix . Чтобы воспользоваться этой опцией, выполним в терминале команду

npm run lint -- --fix 

Ключ —fix говорит о том, что мы хотим исправить ошибки автоматически, а два подчёркивания — перед ключом помогают понять терминалу, что ключ относится не к команде npm run lint , а к тому, что за ней скрывается — к eslint .

ESLint исправил 5 ошибок: поправил пробелы, заменил кавычки на одинарные, удалил ненужную точку с запятой — теперь код выглядит чище. Осталось вызвать функцию, чтобы исправить последнюю ошибку. Здесь ESLint нам не поможет.

ESLint в редакторе

А что, если нам хочется сразу, в момент написания кода, знать, какие ошибки мы совершаем, и исправлять их на лету? Для этого в редактор можно установить расширение для ESLint, которое будет подсвечивать найденную ошибку прямо в файле, а при наведении подсказывать, в чём именно ошибка.

Установка расширения для ESLint в VS Code

Расширение для ESLint в VS Code может попросить подтвердить его запуск, если пакет eslint установлен локально (наш случай). Когда расширение спросит, откуда брать пакет eslint , нужно нажать «Allow», чтобы разрешить использовать eslint в текущем проекте.

С помощью расширения для ESLint в редакторе можно автоматически исправить ошибки. Для этого нужно навести на подсвеченную ошибку, нажать кнопку Quick fix во всплывающем окошке и выбрать один из предложенных вариантов. Например, можно исправить только конкретную ошибку, а можно и все доступные разом. Если ошибка не может быть автоматически исправлена, вместо кнопки Quick fix появится текст No quick fixes available или будут предложены альтернативные варианты решения.

Установка расширения для ESLint в Atom

В Atom тоже требуется специальное расширение linter-eslint для работы ESLint. Чтобы в Atom установить расширение, нужно перейти в раздел настроек «Install Packages». Открыть его можно из окна команд (сочетание клавиш Ctrl + Shift + P на Windows и Command + Shift + P на macOS), введя в поиске «Install Packages».

Также нужный раздел настроек можно открыть через меню: Edit → Preferences → Install — на Windows, Atom → Preferences → Install — в macOS.

Далее ищем нужное расширение и устанавливаем его:

После установки расширения может появиться всплывающее окно с предложением установить нужные зависимости, то есть другие расширения, с помощью которых работает linter-eslint . Для правильной работы линтера нужно установить все предложенные зависимости.

Теперь можно приступить к исправлению ошибок, исправить большинство ошибок можно автоматически, наведя на ошибку и нажав «Fix» или снова использовать окно команд, где выполнить Linter Eslint: Fix File .

Включение поддержки ESLint в WebStorm

В WebStorm не нужно устанавливать отдельное расширение, ESLint работает в этом редакторе «из коробки», достаточно только включить поддержку ESLint. Откройте окно Preferences с настройками, перейдите на вкладку ESLint (Languages and Frameworks → JavaScript → Code Quality Tools → ESLint) и выберете автоматическую конфигурацию ESLint — Automatic ESLint configuration. При автоматической конфигурации ESLint всегда будет искать в директории проекта файл .eslintrc с правилами оформления кода и ориентироваться на него.

Исправляются ошибки так же просто, достаточно нажать правой кнопкой мыши в файле с ошибками и выбрать из списка «Fix ESLint problems».

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Настройка проекта TypeScript с помощью ESLint, Prettier и VS Code

TypeScript сегодня является одним из самых популярных языков благодаря удобству и надежности его системы набора текста.

Очень важно настроить подходящую среду для разработки на Typescript, поскольку она дает возможность воспользоваться всеми возможностями, которые он может предложить.

В этой статье мы покажем, как настроить чистую и простую среду разработки на основе следующих элементов:

• VS Code: функциональный редактор, который можно превратить в IDE по своему вкусу.
• ESLint: настраиваемый линтер для проверки кода на предмет проблем и использования при его написании плохих практик.
• Prettier: настраиваемый форматировщик кода, позволяющий вам и вашей команде следовать единым правилам оформления кода.
• Yarn: менеджер пакетов; он предпочтительнее стандартного npm, так как работает намного быстрее.

Короткий путь

Вы можете найти окончательный вариант настройки проекта в этом репозитории GitHub и клонировать его:

git clone https://github.com/Myreage/typescript-starter
yarn install

1. Настройка проекта

Инициализируйте новый репозиторий:

mkdir typescript-starter && cd typescript-starter && npm init

yarn add typescript —dev

Добавьте намеренно плохо отформатированный файл-образец в src/index.ts :

type Book= title:string 
author: string>const book:Book = title: 'Cool Book', 
author:"John Doe">

2. Конфигурация ESLint

Установите ESLint, его плагин Typescript и соответствующий парсер:

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

Добавьте базовую конфигурацию ESLint для Typescript в новый файл .eslintrc.json :

 “env”: “browser”: true, 
“es2021”: true 
>, 
“extends”: [ 
“eslint:recommended”, 
“plugin:@typescript-eslint/recommended” 
], 
“parser”: “@typescript-eslint/parser”, 
“parserOptions”: “ecmaVersion”: “latest”, 
“sourceType”: “module” 
>, 
“plugins”: [ 
“@typescript-eslint” 
]
>

Создайте новую папку .vscode в корне вашего проекта. Теперь вы можете отредактировать файл конфигурации настроек рабочего пространства .vscode/settings.json , чтобы ESLint автоматически исправлял устранимые проблемы при сохранении:

 "editor.codeActionsOnSave": "source.fixAll.eslint": true 
>,
>

3. Конфигурация Prettier

yarn add prettier eslint-config-prettier —dev

eslint-config-prettier гарантирует отсутствие конфликтов между ESLint и Prettier, поскольку он отключает правила ESLint, которые могут создавать проблемы.

Отредактируйте конфигурацию ESLint так, чтобы значение «extends” выглядело следующим образом:

“extends”: [ 
“eslint:recommended”, 
“plugin:@typescript-eslint/recommended”, 
“prettier”
],

Установите расширение Prettier VS Code и отредактируйте ваш файл .vscode/settings.json , чтобы включить автоформатирование при сохранении:

“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.formatOnSave”: true

Добавьте базовую конфигурацию Prettier по вашему выбору в файл .prettierrc.json :

 "semi": true, 
"trailingComma": "all", 
"singleQuote": true
>

4. Следите за магией!

Вернитесь к файлу index.ts и пересохраните его.

Если все прошло по плану, ваш файл должен был быть отформатирован при сохранении, а ESLint должен был автоматически исправить все, что мог! У вас осталась ошибка в const book :

Теперь вам предстоят часы перепечатки!

Но если вы готовы довериться магии, то выполните следующие шаги:

• Настройте правила ESLint/Prettier или создайте свои собственные!
• Поищите классные плагины в VS Code Marketplace.
• Добавьте пользовательские сниппеты VS Code.

• Как настроить Next.js на TypeScript, чтобы получить оценку в 100% от Google Lighthouse и Vercel Analytics
• 8 пунктов по стилю React + TypeScript
• Индексация строк в Rust и TypeScript в сравнениях