Руководство по стилю Airbnb — это набор рекомендаций по написанию чистого и согласованного кода. Он был выпущен в 2012 году и с тех пор стал одним из самых популярных руководств по стилю для проектов JavaScript.
Он предоставляет набор рекомендаций по написанию согласованного кода, который легко поддерживать, применяя различные стили. правила относительно отступов, комментариев, максимальной длины строки, соглашений об именах переменных, кавычек и определений функций. Чтобы настроить руководство по стилю Airbnb в проекте JavaScript, вам нужно использовать инструмент проверки, такой как ESLint.
Установить ESLint
ESLint — это JavaScript с открытым исходным кодом. инструмент для ворса который помогает разработчикам писать чистый код, находя и устраняя проблемы. Он может обнаруживать проблемы в вашем коде, такие как синтаксические ошибки, недопустимые параметры и неопределенные переменные. Когда вы запускаете ESLint с
- -исправить тег, он автоматически идентифицирует и устраняет любые исправимые проблемы в коде, что экономит ваше время.Вы можете использовать ESLint для обеспечения соблюдения руководств по стилю, таких как руководство по стилю Airbnb.
Для начала выполните следующую команду в терминале, чтобы установить ESLint как зависимость от разработчиков:
npm установить --save-dev eslint eslint-config-airbnb
Затем инициализируйте ESLint.
npx eslint --init
Вам будут задавать вопросы о вашем проекте. При появлении запроса:
? Как бы вы хотели использовать EsLint?
Выберите этот вариант:
> Чтобы проверить синтаксис, найти проблемы и применить стиль кода
Отвечайте на следующие вопросы в соответствии с вашим проектом, пока не встретите следующую подсказку.
? Как бы вы хотели определить стиль для вашего проекта?
Тогда ответьте следующим образом.
> Воспользуйтесь популярным руководством по стилю
Выберите руководство по стилю Airbnb для следующего запроса.
? Какому руководству по стилю вы хотите следовать?
> Airbnb:
Наконец, установите необходимые зависимости, выбрав «Да» в следующем запросе.
После завершения установки вы должны иметь .eslintsrc.json файл в корне вашей папки.
Настройка руководства по стилю Airbnb
Руководство по стилю Airbnb позволяет настраивать. Вы можете добавить дополнительные правила или переопределить существующие правила в .eslintsrc.json Файл конфигурации.
Например, чтобы разрешить не более 80 символов в строке, вы можете добавить это правило в раздел правил.
{
"расширяется": [
"плагин: реагировать/рекомендуется",
"аэрбнб"
],
"правила": {
"макс-лен": ["ошибка", { "код": 80 }]
}
}Запуск ESLint в package.json
Добавьте скрипт в пакет.json файл для запуска ESLint.
"скрипты": {
"ворс": "Эслинт"
}
Запустите скрипт lint, чтобы проверить наличие ошибок lint, выполнив эту команду.
npm запустить линт
Вы также можете добавить скрипт для устранения проблем в коде, используя --исправить флаг.
"скрипты": {
"ворс": "Эслинт",
"ворс: исправить": "npm запустить lint -- --fix"
},
Бег npm run lint: исправить на терминале автоматически исправит любые проблемы, которые может исправить линтер.
Включить линтинг при сохранении в VS Code
Запуск скрипта каждый раз, когда вы хотите проверить свой код, может стать утомительным. Выполните следующие действия, чтобы включить линтинг при сохранении в VS Code.
- Перейдите на вкладку «Расширения» в левой части окна VS Code.
- Найдите Расширение ESLint и установите его.
- После установки расширения откройте настройки VS Code («Файл» > «Настройки» > «Настройки» или нажмите Ctrl +,).
- В редакторе настроек найдите «код действий при сохранении».
- Нажмите «Изменить в settings.json» и добавьте следующие настройки в настройки.json файл.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": истинный
},
"eslint.validate": ["джаваскрипт"],
"eslint.run": "при сохранении",
}
Это позволяет расширению ESLint автоматически исправлять ваш код при сохранении.
Преимущества использования руководства по стилю
Основное преимущество использования руководства по стилю, такого как руководство по стилю Airbnb, заключается в том, что оно помогает поддерживать согласованную базу кода. Это полезно в команде, так как разработчики могут легко понять и внести свой вклад в кодовую базу. Это также поможет вам применять лучшие практики и избегать распространенных ошибок кодирования.
