1.1 Настройка ESLint
Линтинг и форматирование кода играют достаточно важную роль в поддержании качества и однородности кодовой базы, что облегчает чтение и сопровождение кода. Давайте еще раз повторим, как настроить ESLint и Prettier для проекта на TypeScript, чтобы обеспечить соответствие кодовых стандартов и автоматическое форматирование кода.
Почему важны линтеры и форматтеры?
- Единообразие кода: автоматическое форматирование кода и проверка соответствия кодовым стандартам обеспечивают единообразие кода во всем проекте.
- Обнаружение ошибок: линтеры помогают находить ошибки и потенциальные проблемы на ранних этапах разработки.
- Повышение производительности команды: устранение необходимости ручного форматирования и соблюдения стиля кода освобождает время для решения более важных задач.
- Соблюдение лучших практик: линтеры помогают следовать общепринятым стандартам и рекомендациям по написанию кода.
Настройка ESLint
ESLint — это популярный инструмент для анализа кода, который помогает находить и исправлять проблемы в JavaScript и TypeScript коде.
1. Установка ESLint
Установите ESLint и необходимые плагины для TypeScript:
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
2. Создание конфигурационного файла ESLint
Создайте файл .eslintrc.json в корне вашего проекта:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "single"],
"@typescript-eslint/no-unused-vars": ["error"]
}
}
В этом файле мы настроили ESLint для использования с TypeScript и включили несколько базовых правил.
Добавление скрипта для запуска ESLint
Добавьте скрипт для запуска ESLint в package.json:
"scripts": {
"lint": "eslint 'src/**/*.{js,ts}'"
}
Теперь вы можете запускать ESLint с помощью команды:
npm run lint
1.2 Настройка Prettier
Prettier — это инструмент для форматирования кода, который обеспечивает единообразие стиля кода, автоматически форматируя его. В большом проекте критично, чтобы весь код был написан в едином стиле.
1. Установка Prettier
Установите Prettier и интеграцию с ESLint:
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
2. Создание конфигурационного файла Prettier
Создайте файл .prettierrc в корне вашего проекта:
{
"semi": true,
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
Этот файл содержит базовые настройки Prettier, которые можно настроить в соответствии с вашими предпочтениями.
3. Интеграция Prettier с ESLint
Обновите файл .eslintrc.json для интеграции Prettier с ESLint:
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["@typescript-eslint", "prettier"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier",
"plugin:prettier/recommended"
],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "single"],
"@typescript-eslint/no-unused-vars": ["error"],
"prettier/prettier": "error"
}
}
4. Добавление скрипта для запуска Prettier
Добавьте скрипт для запуска Prettier в package.json:
"scripts": {
"lint": "eslint 'src/**/*.{js,ts}'",
"format": "prettier --write 'src/**/*.{js,ts,json,md}'"
}
Теперь вы можете запускать Prettier с помощью команды:
npm run format
1.3 Настройка VSCode для ESLint и Prettier
Visual Studio Code (VSCode) — это популярный редактор кода, который предоставляет отличные возможности для интеграции с ESLint и Prettier.
1. Установка расширений
Установите расширения ESLint и Prettier для VSCode:
- ESLint: найдите и установите расширение ESLint от Dirk Baeumer
- Prettier: найдите и установите расширение Prettier - Code formatter от Prettier
2. Настройка VSCode для автоматического форматирования
Добавьте следующие настройки в файл settings.json вашего проекта (или в глобальные настройки VSCode):
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Эти настройки обеспечат автоматическое форматирование кода при сохранении и автоматическую проверку ESLint.
1.4 Дополнительные рекомендации
1. Используйте git hooks для автоматизации: настройте git hooks с помощью Husky, чтобы автоматически запускать линтеры и форматтеры перед коммитами.
Установка Husky:
npm install husky --save-dev
Добавление git hook:
Добавьте следующие строки в package.json:
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
}
2. Регулярно обновляйте зависимости: убедитесь, что вы используете актуальные версии ESLint, Prettier и связанных плагинов для получения последних улучшений и исправлений ошибок.
3. Обучение команды: убедитесь, что все члены команды понимают важность линтинга и форматирования, и знают, как использовать инструменты.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ