Зачем форматировщик кода

const foo=()=>{for(let i = 0 ; i < 10; i++)console.log('Hello!')}

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

const foo = () => {
for (let i = 0; i < 10; i ++)
    console.log('Hello!')
}

Но тут возникает проблема. Во-первых, выполнение каждого форматирования самостоятельно требует много времени. Во-вторых, если вы работаете в команде, вы не можете гарантировать, что у каждого программиста будет одинаковый «вкус» в форматировании кода.

Вот почему нам нужен Code Formatter — настраиваемый инструмент, помогающий автоматически форматировать код. Одним из самых популярных форматировщиков кода является Prettier. Но не волнуйтесь, это не изменит ваш контент и логику. Это только меняет внешний вид вашего кода.

Возможно, вы слышали о похожем инструменте под названием ESLint. Линтер, как и ESLint, не только заботится о форматировании кода, но и проверяет его качество. Другими словами, это может помешать вам совершать ошибки и создавать ошибки. ESLint устанавливается по умолчанию при использовании create-react-app.

Однако, когда дело доходит до форматирования кода, Prettier может автоматически исправлять больше проблем, чем ESLint, без указания правил вручную, не позволяя разработчикам видеть кучу ОШИБОК в консоли при попытке запустить приложение. Как сказано в документе, мы будем использовать Prettier для форматирования кода и ESLint для поиска потенциальных ошибок.

Быстрый старт

Установка

Сначала установите Prettier в свой проект.

yarn add -D prettier

Конфигурация

Следующим шагом будет настройка Prettier. Prettier использует cosmiconfig для поиска и загрузки файлов конфигурации в вашем проекте, здесь мы создадим файл .prettierrc.json с базовой конфигурацией в корневом каталоге. Вы можете обратиться к документу, чтобы получить более подробную информацию о конфигурации.

{ 
  "trailingComma": "all",
  "tabWidth": 2, 
  "singleQuote": true, 
  "jsxBracketSameLine": true 
}

Интеграция с ESLint

По сути, мы завершили процесс настройки Prettier. Однако, поскольку проект create-react-app применяет ESLint по умолчанию, нам необходимо интегрировать с ним Prettier.

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

Вкратце, мы будем использовать ESLint для обработки качества кода и Prettier для обработки форматирования кода. Проблема может быть решена путем отключения некоторой части правил в ESLint с помощью eslint-config-prettier.

yarn add -D eslint-config-prettier

В package.json добавьте красивее к eslintConfig

"eslintConfig": { 
  "extends": [ 
    "react-app", 
    "react-app/jest", 
    "prettier" 
  ] 
},

Установите расширения VSCode

В VSCode перейдите на вкладку «Расширение», найдите красивее и установите расширение красивее.

Настройка формата при сохранении

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

Сначала нажмите CMD+Shift+P (для Mac) или CTRL+Shift+P (для Windows) и выберите «Открыть настройки рабочей области».

Затем найдите «форматировать при сохранении» и установите флажок, чтобы включить форматирование при сохранении.

В качестве альтернативы, если вы предпочитаете не использовать графический интерфейс, вы можете выбрать «Открыть настройки рабочей области (JSON)», а затем отредактировать settings.json следующим образом.

{
    "editor.formatOnSave": true
}

Если вы хотите отключить форматирование при сохранении для определенного языка, вы можете просто отредактировать свой settings.json, как показано ниже.

{
  "[javascript]": {
    "editor.formatOnSave": false
  }
}

Выводы

В этой статье я иллюстрирую шаги по интеграции Prettier с ESLint для вашего проекта create-react-app. Надеюсь, теперь у вас есть базовые знания о Prettier и вы можете применить их в своем проекте. Приготовьтесь поразиться эффекту, когда вы сохраните файл в следующий раз!