10 правил ESLint, которые вам следует использовать

В мире программирования существует множество полезных инструментов, которые могут упростить, ускорить и сделать вашу работу более комфортной. Одним из таких инструментов является ESLint. ESLint — это статический анализатор вашего кода JavaScript, который помогает создавать и поддерживать стиль кода проекта, предотвращает некоторые проблемы с кодом, а также применяет лучшие практики написания кода. ESLint легко и легко настраивается, поэтому вы можете создавать свои собственные правила для конкретного проекта.

В этой статье я расскажу о 10 базовых правилах, которые лично использую в своих проектах и ​​почему они важны.

Верблюжий чехол

Это правило требует использования camelCase для ваших имен, что является обычной практикой для JavaScript.

цитаты

Двойные («») и одинарные («») кавычки в JavaScript одинаковы с точки зрения функциональности и производительности, поэтому вам нужно выбирать между ними в зависимости от правил вашего проекта и личных предпочтений. Но вы должны что-то выбрать, не смешивайте это в своей кодовой базе. Я предпочитаю одинарные кавычки

без нескольких пустых строк

Вы можете легко ограничить количество пустых строк между строками кода. Да, очень удобно делить код на логические области, но не стоит этим слишком увлекаться — достаточно одной пустой строки. Это обеспечивает согласованность кода и немного уменьшает вертикальную прокрутку.

@angular-eslint/comComponent-selector/@angular-eslint/directive-selector

Эти два правила из мира Angular и очень похожи, поэтому я объединил их в одно. Они предлагают писать селекторы для ваших компонентов и директив с префиксом проекта и в одном стиле. Например, директивы должны быть написаны в camelCase, а компоненты — в kebab-case. Префикс помогает отличить ваши компоненты/директивы от сторонних или собственных.

нет-плюс-плюс

Есть несколько причин для включения этого правила, и, пожалуй, наиболее ценной является автоматическая вставка точки с запятой (хотя ее легко можно использовать с помощью правила semi). Технически нет необходимости ставить точку с запятой в конце каждой строки - просто начните писать код с новой строки, и интерпретатор справится с этим сам (обычно он ставит точку с запятой в конце строки). И это может быть источником проблем. Например:

let i = 1;
let j = 2;

i
++
j

// will be i = 1; j = 3

let i = 1;
let j = 2;

i++
j

// will be i = 2; j = 3

Кроме того, это правило требует использования одного и того же стиля увеличения/уменьшения для всего проекта, что сохраняет ваш код в одном стиле. Вы можете добавить

{ "allowForLoopAfterthoughts": true }

для этого правила, если вы хотите использовать унарное увеличение/уменьшение для циклов for.

запретить/забанить

Это правило весьма полезно для сценариев, когда вам нужно ограничить использование устаревших функций или некоторых других. Еще один случай — fit и fdescribe в модульных тестах. Все тесты, кроме тестов с этой функцией, будут пропущены из прогона. Это полезно, когда вам нужно запустить несколько тестов в одном большом (или не очень) наборе для целей отладки, но помещать их в удаленный репозиторий — не лучшая идея.

без консоли

Все просто: мы запрещаем использование console.log, чтобы исключить вероятность его отправки в удаленный репозиторий. Все инструменты отладки следует хранить на локальном компьютере

нет неиспользуемых переменных

Правило говорит само за себя — запрещает использование неиспользуемых переменных. Иногда при разработке новой функциональности или рефакторинге существующей мы оставляем неиспользуемый код, который необходимо очистить. Если долго находиться в этом контексте, заметить такие детали довольно сложно. Это правило подскажет вам, какие места можно удалить

неиспользуемый-импорт/нет-неиспользуемый-импорт

В дополнение к указанному выше правилу — ограничьте использование неиспользуемого импорта. Да, мы легко можем заметить это локально (поскольку в большинстве IDE оно будет серого цвета), но при проверке кода это сделать сложно

без дублированного импорта

Большую часть времени нам нужно импортировать что-то из одного и того же места. Это можно сделать двумя способами:

1. Импорт в одну строку:

Javascript импортировать { a, b, c } из «модуля»; 2. В несколько строк:

Javascript импортировать {a} из «модуля»; импортировать { b } из «модуля»; импортировать { c } из "модуля";

Это правило требует импорта в одну строку, что повышает читабельность, поскольку вы можете найти всех импортированных сотрудников в одном месте

Заключение

ESLint помогает вам сделать процесс разработки немного быстрее и проще, а также поддерживает единый стиль кода, который вы можете создать самостоятельно. Это позволяет сосредоточиться на главном — бизнес-логике приложения и не обращать внимания на стиль кода (уважайте рецензентов кода). Описанные правила определенно помогут вам в этом путешествии, и помните, что у вас практически неограниченное количество правил, конфигов и вариантов настроек. Вам следует использовать правила, которые идеально подходят для вашей команды и требований проекта.

---

Оригинал