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