Первый шаг — установить Prettier в ваш проект. Вы можете сделать это с помощью npm или пряжи:
npm install --save-dev --save-exact prettier
or
yarn add --dev --exact prettier
Это устанавливает Prettier как зависимость разработки в вашем проекте и гарантирует, что у вас установлена определенная версия Prettier, которая не изменится неожиданно.
Шаг 2: Создайте глобальный файл конфигурации Prettier
Далее вам нужно создать глобальный файл конфигурации для Prettier. Этот файл сообщает Prettier, как форматировать ваш код, и позволяет настроить параметры форматирования в соответствии с вашими предпочтениями.
Создайте файл с именем .prettierrc в корне вашего проекта и добавьте следующее содержимое:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
Эта конфигурация указывает, что Prettier должен использовать запятую после последнего элемента в массиве или объекте (используя параметр «es5»), использовать 2 пробела для отступа, добавлять точку с запятой в конце операторов и использовать одинарные кавычки для строк.
Вы можете настроить эти параметры в соответствии со стилем кодирования и соглашениями вашего проекта. Полный список опций и их значений смотрите в Документации Prettier.
Шаг 3: Создайте локальный файл конфигурации Prettier
При работе над проектом с существующей .prettierrc конфигурацией вы можете обнаружить, что форматирование трудно читать и с ним работать, или оно не соответствует вашим личным предпочтениям. Например, ширина строки может быть установлена равной 80, что может быть мало для некоторых размеров экрана и вызывать дискомфорт при чтении кода. Чтобы решить эту проблему, вы можете создать локальный файл конфигурации, который позволит вам переопределить глобальную конфигурацию Prettier и настроить параметры форматирования в соответствии с вашими предпочтениями.
Чтобы создать локальный файл конфигурации, создайте файл с именем .prettierrc.local.json в корне вашего проекта и укажите нужные параметры форматирования. Например, вы можете установить ширину вкладки равной 4 пробелам вместо 2 пробелов, указанных в глобальной конфигурации. Это гарантирует, что ваш код будет отформатирован в соответствии с вашими предпочтениями, не влияя на форматирование других файлов в проекте.
{
"tabWidth": 4,
"printWidth": 120
}
Эта конфигурация указывает, что Prettier должен использовать 4 пробела для отступа вместо 2 пробелов, указанных в глобальной конфигурации, и изменить ширину строки на 120 вместо 80 символов по умолчанию.
Кроме того, чтобы гарантировать, что ваши изменения в коде не вызовут ненужных изменений форматирования при фиксации кода, мы будем использовать хук перед фиксацией. Этот хук запускает Prettier для файлов, которые должны быть зафиксированы, и гарантирует, что они отформатированы в соответствии с файлом .prettierrc configuration. Таким образом, ваш код форматируется в соответствии с вашими предпочтениями, сохраняя при этом соответствие общим стандартам форматирования проекта.
Шаг 4. Настройте VS Code для использования локального файла конфигурации
Чтобы использовать локальный файл конфигурации в VS Code, вам нужно добавить параметр prettier.configPath в настройки VS Code. Это говорит расширению Prettier использовать локальный файл конфигурации вместо глобального файла конфигурации.
Для этого откройте настройки VS Code (Файл › Настройки › Настройки или с помощью сочетания клавиш Ctrl+,) и добавьте в настройки следующую строку:
{
"prettier.configPath": "./.prettierrc.local.json"
}
Эта конфигурация указывает путь к локальному файлу конфигурации.
Шаг 5: Установите расширение Prettier в VS Code
Чтобы использовать Prettier в VS Code, вы также должны установить расширение Prettier. Расширение обеспечивает интеграцию с Prettier и позволяет легко запускать Prettier в вашем коде прямо из редактора.
Чтобы установить расширение Prettier, откройте представление «Расширения» в VS Code (Вид › Расширения или с помощью сочетания клавиш Ctrl+Shift+X), найдите «Prettier — Code formatter» и нажмите кнопку «Установить».
Шаг 6: Создайте хук перед фиксацией
Теперь, когда Prettier установлен и настроен, вы можете создать хук перед фиксацией, который будет автоматически запускать Prettier в вашем коде перед каждой фиксацией и обеспечивать правильное форматирование всего кода.
Создайте в своем проекте файл с именем .git/hooks/pre-commit (без расширения файла) и добавьте следующее содержимое:
#!/bin/bash # Get the list of files added or modified in this commit files=$(git diff --cached --name-only --diff-filter=ACM | grep "\.js$") # If there are no JavaScript files, exit without doing anything if [ -z "$files" ]; then exit 0 fi # Run Prettier on the changed files using the shared configuration file echo "Running Prettier on the following files:" echo "$files" for file in $files; do npx --no-install prettier --config .prettierrc --write "$file" git add "$file" done
Этот скрипт делает следующее:
- Он использует Git, чтобы определить, какие файлы были изменены и подготовлены для фиксации, и фильтрует список, чтобы включить только файлы JavaScript и JSX.
- Он запускает Prettier на промежуточных файлах, используя как глобальный файл конфигурации, так и локальный файл конфигурации, и записывает исправленное форматирование обратно в файлы.
- Он использует Git для добавления измененных файлов обратно в индекс, чтобы исправленное форматирование было включено в фиксацию.
- Он выводит на консоль сообщение о том, что Prettier отформатировал код.
- Этот сценарий обеспечивает автоматическое форматирование всех промежуточных файлов JavaScript и JSX с помощью Prettier перед каждой фиксацией с использованием как глобальных, так и локальных файлов конфигурации.
Обязательно сделайте исполняемый хук pre-commit, выполнив следующую команду в терминале bash:
chmod +x .git/hooks/pre-commit
Шаг 7: протестируйте хук Pre-Commit
Чтобы протестировать хук перед фиксацией, вы можете создать тестовую фиксацию, которая вводит некоторые ошибки форматирования в ваш код, и посмотреть, обнаружит ли хук и исправит ли их до того, как фиксация будет сделана.
Вот пример рабочего процесса для тестирования хука предварительной фиксации:
1. Создайте новый файл с именем test.js в каталоге вашего проекта и добавьте в него намеренно неправильное форматирование. Например:
const test=()=>{console.log('test');}
2. Подготовьте файл для фиксации, используя git add test.js .
3. Попытайтесь зафиксировать изменения с помощью git commit -m “Test commit”.
4. Если хук предварительной фиксации работает правильно, он должен обнаружить ошибки форматирования в test.js и исправить их автоматически. Вывод в вашем терминале должен выглядеть примерно так:
Running Prettier on the following files: test.js [warn] test.js Code formatted with 1 warning
Сообщение [warn] указывает, что Prettier обнаружила ошибку форматирования в файле, а сообщение Code formatted with 1 warning указывает, что Prettier исправил ошибку форматирования.
Заключение
Выполняя шаги, описанные в этом руководстве, вы можете убедиться, что весь ваш код отформатирован последовательно, без необходимости тратить время на ручное форматирование каждого файла. Это сэкономит ваше время и снизит риск появления в коде ошибок, связанных с форматированием.
Если вам нравится автоматизировать задачи в рабочем процессе разработки, вас также может заинтересовать другой мой пост Автоматизация создания компонентов React.
Я надеюсь, что это руководство было полезным. Если у вас есть какие-либо вопросы или отзывы, пожалуйста, дайте нам знать в комментариях!
