ESLINT: вы когда-нибудь слышали об ESLINT? или вам было интересно, как начать работу с ESLINT, но вы понятия не имеете, как начать работу с ESLINT, но через несколько минут с этой статьей вы начнете использовать ESLINT в своем следующем проекте. Да через несколько минут

ESLINT — это подключаемая утилита для анализа Javascript и JSX, помогающая обнаруживать возможные ошибки.

VS Code — один из лучших редакторов для разработки. Он был разработан и поддерживается Microsoft. Он помогает повысить производительность, а также имеет множество функций, одна из которых, на которой я собираюсь сделать акцент, — это расширение. Расширения — это внешние пакеты в VS Code, которые позволяют расширить функциональные возможности вашего редактора.

вы можете скачать VS Code с их официального сайта VS Code Download

Примечание. Я не буду углубляться в VS Code. Все, что касается VS Code в этом посте, будет связано только с ESLINT.

шаги:

  • создать проект javascript
  • установите eslint как расширение в редакторе кода VS
  • Установите eslint как глобальный пакет, используя npm
  • инициализируйте eslint в вашем проекте javascript
  • измените файл конфигурации eslint в своем проекте.

давайте создадим простой проект javascript, используя

npm init --yes

после успешного завершения операции будет создан файл package.json, который будет управлять всей конфигурацией нашего проекта.

давайте попробуем установить расширение ESLINT в редакторе vs code

как только мы установили расширение eslint в нашем редакторе кода vs, давайте установим eslint как глобальный пакет через npm, используя приведенный ниже код.

npm install eslint -g

вам нужно инициализировать eslint в вашем проекте, чтобы вы могли использовать возможности eslint. В корневом проекте введите приведенный ниже код для инициализации eslint.

eslint --init

во время инициализации eslint задаст вам несколько вопросов, больше похожих на настройку файла конфигурации.

Как бы вы хотели использовать ESLint?

  • Проверка только синтаксиса =› помогает исправить синтаксис и убедиться, что он соответствует стандарту.
  • Чтобы проверить синтаксис и найти проблемы =›, чтобы помочь вам проверить правильность синтаксиса, а также помочь найти любые проблемы в вашей кодовой базе
  • Чтобы проверить синтаксис, найти проблемы и применить стиль кода_ =›, чтобы помочь вам проверить синтаксис, найти проблемы и применить стиль, обеспечение стиля означает соответствие определенному стандарту кодирования, такому как Airbnb, Google и другой Стандартный стиль кодирования. Но я всегда выбираю последний вариант с синтаксисом, поиском проблем и соблюдением стиля кода.

Какие типы модулей используются в вашем проекте?

  • Модуль Javascript (импорт/экспорт) =› если в вашем проекте установлен Babel, вам обязательно нужно выбрать этот вариант. Если вы работаете над таким проектом, как React, Vue, Angular и т. д., все они используют babel, поэтому вам нужно выбрать этот вариант.
  • CommonJS (require/exports) => эта опция предназначена для commonJS, который не имеет ничего общего с babel, может быть, ваш проект nodejs и любой другой проект javascript

Какая платформа используется в вашем проекте?

  • React => если вы используете реакцию в/для своего проекта, то этот вариант для вас
  • Vue =› если вы используете Vue в/для своего проекта, то этот вариант для вас
  • Ничего из этого => если вы не используете в своем проекте ни React, ни Vue, выберите этот вариант.

Где работает ваш код?

  • Браузер => если ваш проект работает в браузере, например React, Angular, Vue и т. д., выберите этот вариант.
  • Узел => если ваш проект основан на узле, с удовольствием выберите этот вариант.

Как бы вы хотели определить стиль для своего проекта?

  • Использовать популярное руководство по стилю => Это позволяет вам выбирать из набора популярных стилей, таких как руководство по стилю Airbnb, Standard и Google. Рекомендуется выбрать этот вариант, чтобы вы могли следовать популярным и наиболее использовал руководство по стилю, и я выберу этот вариант в этом посте.
  • Ответьте на вопросы о своем стиле: Это руководство по пользовательскому стилю
  • Проверьте свои файлы JavaScript: руководство по пользовательскому стилю

В каком формате должен быть файл конфигурации?

  • Javascript =› хотите ли вы, чтобы файл конфигурации eslint находился в файле .js
  • YAML =› хотите ли вы, чтобы файл конфигурации eslint находился в файле .yaml
  • JSON => если вы хотите, чтобы ваш файл конфигурации eslint находился в файле .json, вы можете выбрать любой вариант в этом разделе.

после того, как вы выбрали предпочитаемый тип файла конфигурации, вам будет предложено установить все необходимые зависимости. после того, как все необходимые зависимости были успешно установлены, теперь будет сгенерирован файл конфигурации с «.eslintrc». «js/json/yaml».

пример файла конфигурации показан ниже

ниже небольшое анимированное изображение, показывающее, как vs code работает с eslint, чтобы уведомить вас об ошибках в вашем проекте javascript.

Настройка правил для ESLINT в вашем проекте

Определение правил для ESLINT в вашем проекте сообщает eslint, какие правила вы хотите добавить или удалить. вы можете изменить/установить свои правила в разделе правил в файле конфигурации

Пример правил для установки:

"rules" : {
  no-console: 0; 
  no-empty: 0;
  no-irregular-whitespace:0;
}

вы можете определить как можно больше правил, вы можете прочитать больше о правилах ESLINT в их официальной документации ESLINT Rules Documentation

Наконец, я собираюсь показать вам, как вы можете связать свой eslint с вашим компилятором/транспилером проекта javascript.

шаги ниже

  • Перейдите к вашему файлу package.json, в сегменте скрипта в вашем файле добавьте следующее
script:{
    "lint":"eslint"
}

Примечание: "ворс" – это просто обычное слово, вы можете использовать любое слово, которое вам удобно

затем в вашем корневом проекте вы можете запустить скрипт linting с помощью

npm run lint

Заключение

ESLINT поможет вам повысить производительность, писать код в соответствии со стандартом и отмечать ошибки, когда кодовая база нарушает правила руководства по стилю. С помощью этого поста вы сможете интегрировать ESLINT в свой проект JavaScript.