или Как больше не беспокоиться о стилизации кода
ESLint и stylelint - действительно потрясающие инструменты, которые позволяют вам применять шаблоны кодирования в ваших командах. Это дает много преимуществ, таких как вывод лучшего и более последовательного кода, избавление от бесполезных различий в коммитах (новая строка, отступы и др.) Среди многих других.
Но со временем это может стать проблемой для разработчиков команды, которые считают лишним умственным бременем вручную добавлять точки с запятой, новые строки, отступы и т. Д. Только для того, чтобы соответствовать правилам линта. Именно здесь на помощь приходит инструмент форматирования кода, такой как Prettier.
Prettier можно настроить для автоматического форматирования вашего кода в соответствии с некоторыми указанными правилами. Если вы используете VSCode, вы даже можете форматировать свой код всякий раз, когда вы нажимаете «Сохранить» (я уверен, что должны быть способы настроить это в других редакторах, но я не изучал это).
Однако вы не хотите создавать новый файл конфигурации Prettier, поскольку у вас уже есть все правила, связанные с форматированием, указанные в файлах конфигурации ESLint и stylelint . Так что для этого нам понадобится немного магии. ✨
Давайте теперь шаг за шагом рассмотрим, как все это настроить, а также как отформатировать весь существующий код в соответствии с правилами lint. В этом руководстве предполагается, что в вашем проекте уже настроены ESLint и stylelint с их файлами .eslintrc и .stylelintrc.
ЧАСТЬ 1: Форматирование существующей кодовой базы
Шаг 1
Установите prettier-eslint, инструмент, который форматирует ваш JavaScript, используя Prettier, за которым следует eslint --fix. --fix - это функция ESLint, которая пытается автоматически исправить некоторые проблемы.
npm install --save-dev prettier-eslintЭтот инструмент определяет эквивалентные параметры конфигурации Prettier из существующего файла .eslintrc. Поэтому в большинстве случаев создавать новый файл .prettierrc не требуется.
Шаг 2
Установите prettier-eslint-cli. Это инструмент командной строки, который поможет вам запустить все ваши файлы через prettier-eslint одновременно.
npm install --save-dev prettier-eslint-cliШаг 3
Установите prettier-stylelint, инструмент, который форматирует ваш CSS / SCSS с помощью Prettier, за которым следует stylelint —-fix. Как и ESLint, --fix - это функция stylelint, которая пытается автоматически исправить некоторые проблемы.
npm install prettier-stylelint --save-dev
Этот инструмент также пытается создать конфигурацию Prettier на основе конфигурации stylelint.
Обратите внимание, что в отличие от prettier-eslint, вам не нужно устанавливать другой пакет для его интерфейса командной строки, поскольку он уже включен в него.
Шаг 4
Напишите внутри вашего package.json скрипты, нацеленные на существующие файлы в вашей кодовой базе, которые вы хотите запустить через prettier-eslint и prettier-stylelint.
"scripts": {
"fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
"fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}
Как видите, я нацелен на все мои существующие JS и JSX и все мои существующие CSS и SCSS соответственно.
Флаг --write записывает изменения на месте для текущего форматируемого файла. Поэтому будьте осторожны и убедитесь, что все ваши существующие файлы находятся под контролем источника и что нет никаких незавершенных изменений.
Шаг 5
Запускаем скрипты!
npm run fix-code npm run fix-styles
Теперь вы можете зарегистрировать все эти новые изменения как одну большую фиксацию (возможно, даже от временного пользователя git, если вы не хотите загрязнять свою собственную историю git).
Часть 2. Настройка VSCode
Теперь, когда ваша существующая кодовая база отформатирована, пришло время убедиться, что весь код, который пишется отныне, форматируется автоматически.
Шаг 1
Установите расширения Prettier, ESLint и stylelint для VSCode:
Шаг 2
Настройте несколько параметров VSCode:
"prettier.eslintIntegration": true - указывает Prettier использовать prettier-eslint вместо Prettier
"prettier.stylelintIntegration": true - указывает Prettier использовать prettier-stylelint вместо Prettier
"eslint.autoFixOnSave": false - нам не нужен ESLint, чтобы исправить наш код напрямую, так как prettier-eslint будет работать eslint --fix за нас в любом случае.
"editor.formatOnSave": true - запускает Prettier с указанными выше параметрами при каждом сохранении файла, поэтому вам никогда не придется вручную вызывать команду форматирования VSCode.
Кроме того, вы можете проверить указанные выше настройки рабочего места в системе управления версиями, чтобы другим членам команды было проще настраивать своих редакторов. Вы можете сделать это, создав папку .vscode в корне вашего проекта и поместив все вышеперечисленные правила в файл settings.json.
При желании вы можете указать Prettier игнорировать форматирование определенных шаблонов файлов. Для этого просто добавьте .prettierignore файл в корень вашего проекта, указав пути, которые следует игнорировать. Например:
strings.json scripts/*
Вот и все! Больше не беспокойтесь о стилях кода 😄
Эта статья ни в коем случае не является исчерпывающим руководством, а скорее является введением в то, что возможно с помощью упомянутых здесь замечательных инструментов. Я рекомендую открыть официальные страницы GitHub для каждой, чтобы узнать больше о том, как более эффективно использовать эти инструменты для вашего конкретного рабочего процесса.
Пожалуйста, напишите комментарий ниже для любой помощи, предложения и т. Д.
Ссылки
https://prettier.io/docs/en/
https://stylelint.io/user-guide/
https://eslint.org/
https: // github. com / prettier / prettier-vscode
https://github.com/prettier/prettier-eslint
https://github.com/prettier/prettier-eslint-cli
https: / /github.com/hugomrdias/prettier-stylelint
https://www.youtube.com/watch?v=YIvjKId9m2c
