Как использовать ESLint и Prettier для анализа и форматирования кода

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

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

Prettier, с другой стороны, является самоуверенным форматировщиком кода. В отличие от ESLint, он поддерживает различные языки, такие как JavaScript, HTML, CSS, GraphQL, Markdown и многие другие. Оба инструмента достаточно хорошо поддерживаются сообществом разработчиков, и для них обоих доступны расширения в большинстве редакторов кода или IDE, таких как, например, Visual Studio Code.

Visual Studio Code Marketplace
ESLint
Красивее

Веб-сайт
https://prettier.io/
https://eslint.org/

Почему вы должны использовать линтер и средство форматирования кода

Линтинг — это способ исправить проблемы в вашем коде, пока он еще находится в режиме разработки, до того, как ваше приложение будет готово к работе. Многие из этих исправлений могут быть сделаны автоматически, и вы можете настроить весь процесс в соответствии с потребностями вашей команды. При использовании Prettier вы можете автоматически форматировать код в своих файлах, что экономит массу времени и энергии.

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

Это общий процесс, которому следуют команды при работе над проектами. Обычно рядом с файлом игнорирования находится файл для ESLint и Prettier, очень похожий на файл .gitignore, с которым должен быть знаком каждый разработчик при использовании такого сервиса, как GitHub, для контроля версий. Формат вашего основного файла может быть JavaScript, YAML или JSON. Я использую JSON в этих примерах.

Посмотрите примеры файлов ниже, которые все будут внутри одного проекта:

.eslintignore
.eslintrc.json
.prettierignore
.prettierrc.json

Создание настройки рабочего процесса ESLint и Prettier

Файлы ESLint и Prettier могут конфликтовать друг с другом, потому что бывают случаи, когда они в конечном итоге проверяют одни и те же правила, что может привести к дублированию. К счастью, их можно заставить работать вместе.

Настройки кода Visual Studio

Во-первых, вам нужно установить расширения ESLint и Prettier.

Затем перейдите в «Код» -> «Настройки» -> «Настройки».

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

Это самые заметные из тех, что у меня есть.

• Красивее: полу ✅
• Красивее: одиночная цитата ✅
• Красивее: запятая в конце es5

На странице настроек найдите format.

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

• Редактор: Форматировать при сохранении ✅
• Редактор: средство форматирования по умолчанию 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? — Нет
✔ Где работает ваш код? — Узел
✔ Как бы вы хотели определить стиль для своего проекта? — Используйте популярное руководство по стилю
✔ Какому руководству по стилю вы хотите следовать? — Airbnb
✔ В каком формате должен быть файл конфигурации? — JSON

Проверка одноранговых зависимостей eslint-config-airbnb-base@latest

Для выбранной вами конфигурации требуются следующие зависимости:

eslint-config-airbnb-base@latest eslint@⁷.32.0 || ^ 8.2.0 eslint-plugin-import@².25.2

✔ Хотите установить их сейчас? — Да
✔ Какой менеджер пакетов вы хотите использовать? — нпм

Теперь запустите команды в блоке кода ниже, чтобы создать файлы для 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;
};

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

Под 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 Server. Это должно обеспечить правильную работу линтинга во всех файлах.

Помните, что вам может потребоваться перезапускать сервер 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, вы должны увидеть предупреждения и ошибки на вкладке проблем ниже. Если вы хотите отключить правило, выполните шаги, описанные выше, и найдите правила в документации ESLint rules.