ESLint и Prettier – это два самых популярных инструмента для анализа и форматирования кода в кодовой базе разработчика. Они чрезвычайно хороши в своем деле, поэтому обычно являются неотъемлемой частью настройки проекта.
Разница между ними заключается в том, что ESLint обычно отвечает за поиск и отчет о различных паттернах в коде ECMAScript/JavaScript. ESLint предназначен для работы только с JavaScript-файлами, и он очень успешен, когда речь идет о том, чтобы убедиться, что кодовая база последовательна и не содержит заметных ошибок.
Prettier, с другой стороны, является форматировщиком кода. В отличие от ESLint, он поддерживает различные языки, такие как JavaScript, HTML, CSS, GraphQL, Markdown и многие другие. Оба инструмента достаточно хорошо поддерживаются в сообществе разработчиков, и для них доступны расширения в большинстве редакторов кода или IDE, таких как Visual Studio Code, например.
Visual Studio Code Marketplace
ESLint
Prettier
Сайт
https://prettier.io/
https://eslint.org/
Почему вы должны использовать линтер и форматер кода
Линтинг – это способ исправления проблем в коде еще в режиме разработки, пока приложение не готово к производству. Многие из этих исправлений могут быть сделаны автоматически, и вы можете настроить весь процесс в соответствии с потребностями вашей команды. При использовании Prettier вы можете автоматически форматировать код в ваших файлах, что сэкономит вам массу времени и энергии.
Кроме того, это еще одна вещь, о которой вам не нужно беспокоиться во время проверки кода, потому что он гарантированно будет одинаковым для всех. Это обеспечивает единый стиль и качество кода для всей команды, поэтому не возникает конфликтов, как при локальной настройке.
Это обычный процесс, которому следуют команды при работе над проектами. Обычно существует файл для ESLint и Prettier, а также файл игнорирования, подобный файлу .gitignore, с которым должен быть знаком каждый разработчик, использующий сервис GitHub для контроля версий. Формат вашего основного файла может быть либо JavaScript, либо YAML, либо JSON. В этих примерах я использую JSON.
Смотрите примеры файлов ниже, которые будут находиться внутри одного проекта:
.eslintignore
Создание рабочего процесса ESLint и Prettier
Файлы ESLint и Prettier могут конфликтовать друг с другом, поскольку в некоторых случаях они проверяют одни и те же правила, что может привести к дублированию. К счастью, можно заставить их работать вместе.
Настройки кода Visual Studio
Сначала вам нужно установить расширения ESLint и Prettier.
Затем перейдите в Code -> Preferences -> Settings
Вы можете использовать поисковую строку для поиска расширений ESLint и Prettier, которые вы установили. Настройки ESLint должны быть оставлены по умолчанию, но вы можете изменить их, если хотите. Prettier может потребовать изменения некоторых глобальных настроек, но вы можете настроить его по своему усмотрению.
Вот наиболее заметные из них.
- Prettier: Semi ✅
- Prettier: одиночная цитата ✅
- Красивее: Запятая в конце текста es5
На странице настроек найдите пункт “Формат”.
Убедитесь, что эти настройки верны, возможно, вам придется прокрутить страницу вниз, чтобы найти формат по умолчанию:
- Editor: Форматировать при сохранении ✅
- Редактор: Форматирование по умолчанию Prettier – Форматирование кода
Настройка обычного JavaScript/NodeJS
Откройте командную строку и перейдите в директорию, подобную вашему рабочему столу. Выполните приведенные ниже команды для настройки вашего проекта.
mkdir backend
cd backend
npm init -y
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
Теперь запустите приведенный ниже код в той же папке и выполните настройку.
npm init @eslint/config
Вот настройки, которые я выбрал:
✔ Как вы хотите использовать ESLint? – Для проверки синтаксиса, поиска проблем и соблюдения стиля кода
✔ Какой тип модулей используется в вашем проекте? – CommonJS (require/exports)
✔ Какой фреймворк используется в вашем проекте? – Ни один из перечисленных
✔ Использует ли ваш проект TypeScript? – Нет
✔ Где выполняется ваш код? – Node
✔ Как бы вы хотели определить стиль для своего проекта? – Использовать популярное руководство по стилю
✔ Какому руководству по стилю вы хотите следовать? – Airbnb
✔ В каком формате вы хотите иметь ваш конфигурационный файл? – JSON
Проверка peerDependencies для eslint-config-airbnb-base@latest
Выбранный вами конфиг требует следующих зависимостей:
eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2
✔ Хотите ли вы установить их сейчас? – Да.
✔ Какой менеджер пакетов вы хотите использовать? – npm
Теперь выполните команды в блоке кода ниже, чтобы создать файлы для Prettier.
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Откройте ваш файл .eslintrc.json и добавьте эти параметры конфигурации. Prettier должен быть последним в массиве, иначе он не будет работать должным образом.
"extends": ["airbnb-base", "plugin:prettier/recommended"],
"plugins": ["prettier"],
Затем откройте файл .prettierrc.json и скопируйте и вставьте эти настройки. Вы можете узнать об этих настройках в документации Prettier Options. Это только моя настройка, вы можете создать свою собственную в соответствии с вашими предпочтениями.
{
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "none",
"endOfLine": "auto"
}
Наконец, выполните приведенный ниже код, чтобы создать несколько файлов игнорирования для ESLint и Prettier. Они работают так же, как и файл .gitignore, поэтому все записи, которые вы туда внесете, будут проигнорированы, чтобы они не попали в отрисовку или форматирование.
touch .prettierignore .eslintignore
Просто скопируйте и вставьте тот же код в файлы .prettierignore и .eslintignore.
node_modules
package.lock.json
build
Использование ESLint и Prettier
Давайте проведем быстрый тест. Создайте файл index.js либо в редакторе, либо с помощью команды ниже в терминале.
touch index.js
Добавьте в файл этот код JavaScript.
const x = 100;
console.log(x);
const test = (a, b) => {
return a + b;
};
В редакторе кода вы должны увидеть некоторые ошибки и предупреждения на вкладке Проблемы внизу. А если вы сделаете свой код менее читабельным, добавив интервалы или табуляции по всему периметру, а затем сохраните файл. Prettier должен все вычистить и исправить.
Под console.log и именем тестовой функции должна появиться волнистая линия. Если вы наведете на них курсор мыши, вы увидите правило ESLint, назначенное для них. Перейдите к файлу .eslintrc.json и добавьте эти правила в самом низу.
"rules": {
"no-console": "off",
"no-unused-vars": "off"
}
Теперь, если вы вернетесь к файлу index.js, предупреждения должны исчезнуть! Вы можете найти все правила в документации по правилам ESLint. Также можно изменить правила/опции в файле .prettierrc.json, перейдя на страницу Prettier Options.
Перезапуск сервера ESLint
Иногда линтинг не работает после внесения изменений. Чтобы исправить это в Visual Studio Code, выполните команду Shift+CMD+P, чтобы показать палитру команд, а затем найдите ESLint: Перезапустить сервер ESLint. Это должно заставить линтинг работать правильно во всех файлах.
Помните, что вам может понадобиться перезапускать сервер ESLint каждый раз, когда вы добавляете/удаляете правила или вносите изменения. В противном случае правила могут не работать, и это может привести к конфликтам между ESLint и Prettier.
Настройка ReactJS
Такая же настройка работает и с другими JavaScript-фреймворками, например React. Вам просто нужно выбрать соответствующие настройки. Смотрите пример ниже.
Не забудьте выбрать модули JavaScript (импорт/экспорт), потому что именно это использует React, и код будет выполняться в браузере.
npx create-react-app my-app
cd my-app
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
npm init @eslint/config
Теперь выполните команды в блоке кода ниже, чтобы создать файлы для Prettier.
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Откройте ваш файл .eslintrc.json и добавьте эти параметры конфигурации. Prettier должен быть последним в массиве, иначе он не будет работать должным образом.
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended"
],
"plugins": ["react", "prettier"],
Далее откройте файл .prettierrc.json и скопируйте и вставьте эти настройки. Вы можете узнать об этих настройках в документации Prettier Options. Это только моя настройка, вы можете создать свою собственную в соответствии с вашими предпочтениями.
{
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "none",
"endOfLine": "auto"
}
Наконец, выполните приведенный ниже код, чтобы создать несколько файлов игнорирования для ESLint и Prettier. Они работают так же, как и файл .gitignore, поэтому все записи, которые вы туда внесете, будут проигнорированы, чтобы они не попали в отрисовку или форматирование.
touch .prettierignore .eslintignore
Просто скопируйте и вставьте тот же код в файлы .prettierignore и .eslintignore.
node_modules
package-lock.json
build
Теперь, если вы откроете файл App.js, вы должны увидеть предупреждения и ошибки на вкладке problems ниже. Если вы хотите отключить какое-либо правило, выполните предыдущие шаги и найдите правила в документации по правилам ESLint.