Eslint что это

Найти и предотвратить ошибки в JavaScript: как быстро научиться работать с ESLint

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

Експертний курс від mate.academy: IT Рекрутмент Вечірній.
Експертний курс від mate.academy: IT Рекрутмент Вечірній.

Что такое ESLint

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

Как работать с ESLint: шаг за шагом

Перед установкой ESLint нужно установить Node.js с поддержкой SSL и npm. Предположим, что вы уже сделали это заранее.

Для начала создайте каталог для проекта и поместите в него файл index.js с таким содержимым:

let i = 0; do < alert( i ); i++; >while (true);

Затем инициализируйте npm в этом каталоге, если еще этого не сделали:

Ефективний курс від mate.academy: Frontend.
Розблокуйте світ веб-розробки.

В результате будет создан файл package.json с параметрами пакета.

Установите ESLint в каталоге проекта. Для этого запустите в терминале следующую команду:

npm install eslint —save-dev

ESLint будет установлен локально. Существует возможность глобальной установки (с помощью команды npm install eslint —global ), но не рекомендуем использовать такой подход. Все модули и совместно используемые файлы конфигурации в любом случае следует устанавливать локально.

Для настройки файла конфигурации выполните следующую команду:

npx eslint —init

Во время выполнения этой команды вам понадобится ответить на несколько вопросов. Предположим, что нам нужно проверять синтаксис, находить проблемы и применять стиль кодирования:

Обозначения, зачем мы используем ESLint

Укажем, что будут использованы модули JavaScript:

Использование модулей JavaScript

В примере мы не используем ни React, ни Vue.js, ни TypeScript:

Отмечаем, что не используем React и Vue.js

Отмечаем, что не используем TypeScript

Предположим, код будет выполняться в браузере:

Указываем, что код будет выполняться в браузере

Укажем, что будем применять инструкции по стилю и выберем Airbnb:

Указываем, что хотим использовать инструкцию по популярным стилям

Для примера выбираем Airbnb

Пусть файл конфигурации будет создан в формате JSON:

В результате в каталоге проекта будет создан файл .eslintrc.json (или с другим расширением — в зависимости от выбранного вами формата).

В нем будет находиться примерно такой код:

Захоплюючий курс від laba: HR-менеджер.
Розвивайте персонал і підтримуйте бізнес.

module.exports = < 'env': < 'browser': true, 'es2021': true >, 'extends': 'eslint:recommended', 'parserOptions': < 'ecmaVersion': 12, 'sourceType': 'module' >, 'rules': < >>;

Проверяем проект

Теперь можно проверить проект, вызвав линтер для какого-либо файла или каталога. Вызовем eslint , передав в качестве аргумента текущий каталог (обозначенный точкой): node_modules\.bin\eslint .

В результате получим:

На консоли — четыре ошибки и два предупреждения

Мы видим четыре ошибки и два предупреждения с указанием их позиций в файле. Также в таблице приведены описания и указаны нарушенные правила.

В сообщении указано, что три ошибки можно исправить, указав опцию —fix . Давайте так и сделаем: введем ту же команду и укажем эту опцию:

Вывод будет таким:

Три ошибки исправлены

Видим, что линтер сам справился с тремя ошибками, а нам оставил остальные. Код в файле изменен:

let i = 0; do < alert(i); i++; >while (true);

Обратите внимание: вставлен символ новой строки и убраны пробелы в скобках.

Rules: правила проверки кода

В конфигурации примера выше мы использовали имеющиеся правила проверки. Но можно добавить и свои правила. В файле .eslintrc.json есть раздел rules .

Если при создании проекта указать не имеющийся набор инструкций, а задать свои правила (выбрав пункт Answer questins about your style), то в разделе правил в файле .eslintrc.json можно будет увидеть примерно такие правила:

Практичний курс від skvot: Артменеджер.
Управляйте творчим процесом.
‘rules’:

Структура правила проста. Рассмотрим первое правило из приведенного выше примера.

Слово indent — это имя правила. Первый элемент в списке обозначает уровень ошибки и может принимать следующие значения:

• off или 0 — выключить правило;
• warn или 1 — включить правило как предупреждение (не влияет на код выхода);

Второй элемент в этом случае означает количество пробелов. Второй аргумент зависит от правила.

Итак, приведенные выше правила указывают, что следует использовать отступ в четыре пробела, завершение строк в стиле UNIX, одинарные кавычки и не пропускать точку с запятой.

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

• getter-return (обязательное применение оператора возврата в методах чтения);
• no-setter-return (запрет применения оператора возврата в методах изменения значения);
• no-dupe-args (запрет дублирующихся аргументов в определениях функций).

Есть правила проверки соблюдения передовой практики, например, accessor-pairs (обязательное применение пар методов чтения и изменения значений в объектах и классах).

Правила относительно переменных ( no-unused-vars — запрет на неиспользуемые переменные), стилистические правила ( eol-last — разрешение или запрет символа новой строки в конце файла) и правила для ECMAScript 6 .

Вернемся к коду, немного изменим файл index.js и отправим его на проверку:

let i = 0 do < alert("Loop " + i); i++; >while (true);

Будут выданы такие сообщения об ошибках:

Сообщения об ошибках

Здесь сообщается, что пропущена точка с запятой, используется отступ в два пробела вместо четырех и двойные кавычки вместо одинарных, а в цикле использовано константное условие.

Полный список правил ESLint можно просмотреть по этой ссылке .

Чтобы не вводить одни и те же команды каждый раз, можно в разделе scripts в файле package.json указать сценарий для запуска eslint . Он может выглядеть так:

"scripts": < "lint": "eslint . --fix" >,

Вывод будет примерно таким:

Получим такие сообщения об ошибках

Эти сообщения об ошибках можно проигнорировать.

Проверку можно отключать как для отдельных строк, так и для нескольких.

Для отключения отдельной строки ее нужно завершить комментарием:

Чтобы отключить проверку для нескольких строк, перед ними следует вставить комментарий /* eslint-disable */ , а после — /* eslint-enable */ :

let i = 0; do < alert('Loop ' + i); i++; /* eslint-disable */ >while (true); /* eslint-enable */

Также можно отключить одно или несколько конкретных правил. Для этого в комментарии /* eslint-disable */ их перечисляют через запятую:

/* eslint-disable semi, quotes */

Заключение

ESLint — эффективный инструмент, который можно настраивать и расширять в соответствии с потребностями разных проектов.

ESLint продолжает активно развиваться и интегрируется с Sublime Text 3, Vim, Visual Studio Code, IntelliJ IDEA, Emacs, Eclipse и многими другими средами разработки.

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

Начало работы с ESLint

ESLint — это инструмент для выявления шаблонов, обнаруженных в коде ECMAScript/JavaScript, и создания отчетов о них, цель которого — сделать код более согласованным и избежать ошибок. Во многом он похож на JSLint и JSHint за некоторыми исключениями:

• ESLint использует Espree для разбора JavaScript.
• ESLint использует AST для оценки шаблонов в коде.
• ESLint полностью подключаемый, каждое отдельное правило является подключаемым модулем, и вы можете добавлять дополнительные во время выполнения.

Установка и использование

Предварительные требования: Node.js ( ^12.22.0 , ^14.17.0 или >=16.0.0 ), построенный с поддержкой SSL. (If вы используете официальный дистрибутив Node.js, SSL всегда собран in.)

Вы можете установить и настроить ESLint с помощью этой команды:

npm init @eslint/config 

Если вы хотите использовать определенную общедоступную конфигурацию, размещенную на npm, вы можете использовать параметр —config и указать имя пакета:

# use `eslint-config-semistandard` shared config # npm 6.x npm init @eslint/config --config semistandard # ⚠️ npm 7+, extra double-dash is needed: npm init @eslint/config -- --config semistandard # or (`eslint-config` prefix is optional) npm init @eslint/config -- --config eslint-config-semistandard 

Флаг —config также поддерживает передачу массивов:

npm init @eslint/config -- --config semistandard,standard # or npm init @eslint/config -- --config semistandard --config standard 

Примечание. npm init @eslint/config предполагает, что у вас уже есть файл package.json . Если вы этого не сделаете, обязательно заранее запустите npm init или yarn init .

После этого вы можете запустить ESLint для любого файла или каталога следующим образом:

npx eslint yourfile.js # or yarn run eslint yourfile.js 

Также можно установить ESLint глобально, а не локально (используя npm install eslint —global ). Однако это не рекомендуется, и в любом случае любые подключаемые модули или общие конфигурации, которые вы используете, должны быть установлены локально.

Configuration

Примечание. Если вы используете версию до 1.0.0, см. migration guide .

После запуска npm init @eslint/config в вашем каталоге появится файл .eslintrc. . В нем вы увидите несколько правил, настроенных следующим образом:

 "rules":  "semi": ["error", "always"], "quotes": ["error", "double"] > > 

Имена «semi» и «quotes» — это имена rules в ESLint.. Первое значение — это уровень ошибки правила и может быть одним из следующих значений:

• «off» или 0 — отключить правило
• «warn» или 1 — включить правило как предупреждение (не влияет на код выхода)
• «error» или 2 — включить правило как ошибку (код выхода будет 1)

Три уровня ошибок позволяют точно контролировать, как ESLint применяет правила (дополнительные параметры конфигурации и подробности см. в configuration docs ).

Ваш файл конфигурации .eslintrc. также будет содержать строку:

 "extends": "eslint:recommended" > 

Из-за этой строки все правила с пометкой “(recommended)” на rules page будут включены. Кроме того, вы можете использовать конфигурации, созданные другими, выполнив поиск «eslint-config» на npmjs.com . ESLint не будет анализировать ваш код, если вы не расширите его из общей конфигурации или явно не включите правила в своей конфигурации.

Next Steps

• Узнайте о advanced configuration из ESLint.
• Ознакомьтесь с command line options .
• Изучите ESLint integrations в других инструментах, таких как редакторы, системы сборки и многое другое.
• Не можете найти правильное правило? Сделайте свой собственный custom rule .
• Сделайте ESLint еще лучше с помощью contributing .

Держи свой код чистым с помощью ESLint

Основы самого популярного JavaScript линтера, который позволяет проводить анализ качества твоего кода.

Tools · 14.02.2019 · читать 2 мин �� · Автор: Alexey Myzgin

Что такое ESLint

ESLint — это линтер для языка программирования JavaScript, написанный на Node.js.

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

ESLint поможет тебе:

• найти существующие ошибки в коде;
• избежать глупых ошибок;
• избежать бесконечные циклы в условиях цикла for;
• убедится, что все методы getter возвращают что-то;
• не разрешить выражения console.log (и аналогичные);
• проверить наличие дубликатов cases в switch ;
• проверить недоступный код;
• проверить правильность JSDoc;

и многое другое! Полный список доступен по ссылке.

Растущая популярность Prettier, как средства форматирования кода, сделала часть стилей ESLint устаревшей, но данный линтер всё еще очень полезен для выявления ошибок в коде.

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

Установка ESLint глобально

npm install -g eslint # создает конфигурацционный файл `.eslintrc` eslint --init # запускает ESLint проверку указанного файла eslint yourfile.js

Установка ESLint локально

npm install eslint --save-dev # создает конфигурацционный файл `.eslintrc` ./node_modules/.bin/eslint --init # запускает ESLint проверку указанного файла ./node_modules/.bin/eslint yourfile.js

Установка стилей Airbnb

Одной из самых популярных настроек для линтера является использование Airbnb JavaScript Style.

yarn add --dev eslint-config-airbnb

npm install --save-dev eslint-config-airbnb

что бы установить пакет конфигурации Airbnb и добавь в свой .eslintrc файл который находится в корне твоего проекта:

// .eslintrc  "extends": "airbnb" >

Установка стилей для React

Подключить линтер для React можно легко с помощью плагина React:

yarn add --dev eslint-plugin-react

npm install --save-dev eslint-plugin-react

и добавив в свой файл .eslintrc :

// .eslintrc  "extends": "airbnb", "plugins": ["react"], "parserOptions":  "ecmaFeatures":  "jsx": true > > >

Используй конкретные версии EcmaScript

ECMAScript меняет свою версию каждый год.

По умолчанию установлена 5-я версия, что означает стандарт до 2015 года.

Что бы включить ES6 (или выше), пропиши это в .eslintrc

// .eslintrc  "parserOptions":  "ecmaVersion": 6 > >

Подробное руководство по правилам можно найти на официальном сайте https://eslint.org/docs/user-guide/configuring.

Отключение правил где это необходимо

Иногда тебе может понадобится отключить правила в конкретном месте, это можно сделать так:

/* eslint-disable */ alert("test"); /* eslint-enable */

alert("test"); // eslint-disable-line

также можно отключить одно или несколько конкретных правил для нескольких строк:

/* eslint-disable no-alert, no-console */ alert("test"); console.log("test"); /* eslint-enable no-alert, no-console */

или для одной строки:

alert("test"); // eslint-disable-line no-alert, quotes, semi

Как использовать ESLint, чтобы повысить качество кода JavaScript и TypeScript

JavaScript по умолчанию имеет очень гибкий синтаксис. Он позволяет менять тип переменной, использовать одинарные и двойные кавычки для строк и любое количество пробелов для отступов, опускать точки с запятой в конце и т.д.

Однако каждая команда должна придерживаться единого стандарта программирования. Так код будет легче просматривать и поддерживать. В этом помогает ESLint.

ESLint — инструмент статической проверки кода, используемый для мониторинга качества и стилистической выдержанности кода JavaScript. TSLint, применявшийся ранее для проверки кода на TypeScript, уже устарел. Сегодня ESLint используется и для кода TypeScript.

Начинать работу с ESLint может быть непросто, особенно если проверять с его помощью код TypeScript. Предлагаем практическое руководство, которое поможет установить и настроить ESLint для проектов на JavaScript и TypeScript.

Установите Node.js

Пакет ESLint будет установлен менеджером пакетов Node (npm). Поэтому потребуется установить на компьютер Node.js. Его можно загрузить по этой ссылке. Команды для установки Node.js в системе Linux приведены ниже. Обратите внимание, что в версию системы со временем будут вноситься изменения, но команды останутся прежними.

# Загрузите пакет с сайта https://nodejs.org/en/# Разархивируйте файлы в место назначения, например в базовый каталог.
$ cd $HOME/Downloads
$ tar xvf node-v18.7.0-linux-x64.tar.xz -C $HOME# Добавьте путь к папке `/bin` в `PATH` в `.bashrc`, чтобы 
# система могла найти исполняемые файлы:
$ export PATH=$PATH:$HOME/node-v18.7.0-linux-x64/bin

Настройте папку проекта

Если вы работаете с JS-фреймворком, то папка проекта обычно создается автоматически. Тем не менее создадим ее с нуля, чтобы настройки, введенные позже, можно было использовать повсеместно. Для инициирования проекта Node.js выполните следующие команды:

# Создайте папку проекта и перейдите в нее:
$ mkdir js-ts-linting-example
$ cd js-ts-linting-example# Инициируйте проект, а именно сгенерируйте начальный `package.json`:
$ npm init

Введите информацию о проекте, следуя указаниям мастера настройки. На основе предоставленной информации будет создан файл package.json . Поскольку проект может быть создан не на Node.js, шаблонный код, такой как main: index.js , можно удалить. Мы обновим раздел scripts позже, когда ESLint будет установлен и настроен.

Установка ESLint и настройка конфигурационного файла

Чтобы установить и настроить ESLint, выполните следующую команду:

$ npm init @eslint/config

Выберите опции, которые лучше всего подходят для проекта, и файл package.json будет обновлен соответствующим образом. Для данного проекта были выбраны следующие опции:

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript

Если в проекте не используется TypeScript, можно пропустить опции для TypeScript в процессе установки. В противном случае нужно будет установить и TypeScript:

$ npm install --save-dev typescript

На этом этапе файл package.json будет выглядеть следующим образом:

 "name": "js-ts-linting-example", 
"version": "1.0.0", 
"description": "Demo project for setting up ESLint for JavaScript/TypeScript code.", 
"scripts": "test": "echo \"Error: no test specified\" && exit 1" 
>, 
"author": "Lynn", 
"license": "ISC", 
"devDependencies": "@typescript-eslint/eslint-plugin": "^5.33.0", 
"@typescript-eslint/parser": "^5.33.0", 
"eslint": "^8.21.0", 
"eslint-config-standard": "^17.0.0", 
"eslint-plugin-import": "^2.26.0", 
"eslint-plugin-n": "^15.2.4", 
"eslint-plugin-promise": "^6.0.0", 
"typescript": "^4.7.4" 
>
>

Чтобы использовать ESLint для кода TypeScript, потребуется файл конфигурации для TypeScript под названием tsconfig.json . Этот файл обычно автоматически генерируется JS-фреймворками, такими как Angular. Если же его нужно создать с нуля, выполните эту команду с помощью npx :

$ npx tsc --init

Будет создан файл tsconfig.json со множеством шаблонов кода, большинство из которых не нужно менять. Вы можете настроить их соответствующим образом, исходя из ваших требований.

Теперь последнее и самое главное. Возможно, вы заметили, что автоматически был создан файл конфигурации под названием .eslintrc.js . Если этого не произошло, вам нужно создать его вручную и скопировать в него приведенные ниже настройки.

Этот файл содержит пользовательские настройки для ESLint. Для проекта, написанного на JavaScript, можно использовать его напрямую, если вам не нужны пользовательские настройки. Однако нам нужно добавить настройки, прежде чем использовать его для проверки кода TypeScript. Кроме того, мы добавим несколько правил для проверки кода. Обновленный файл .eslintrc.js имеет следующее содержание:

module.exports = env: browser: true, 
es2021: true 
>, 
extends: [ 
'standard', 
'eslint:recommended', 
], 
parser: '@typescript-eslint/parser', 
parserOptions: ecmaVersion: 'latest', 
sourceType: 'module', 
>, 
plugins: [ 
'@typescript-eslint' // Для TypeScript. 
], 
overrides: [ // Используем `overrides`, чтобы ESLint мог проверять файлы как JS, так и TS. 
 files: ['*.ts', '*.tsx'], 
extends: [ 
'plugin:@typescript-eslint/recommended', 
'plugin:@typescript-eslint/recommended-requiring-type-checking', 
], 
parserOptions: tsconfigRootDir: __dirname, 
project: ['./tsconfig.json'], 
>, 
>, 
], 
ignorePatterns: ['.eslintrc.js'], 
rules: quotes: ["error", "double"], // Использовать двойные кавычки. 
semi: ["error", "always"], // Всегда добавлять точку с запятой в конце утверждения. 
indent: ["error", 2], // Отступ — это два пробела. 
"no-console": "error" // Избегать использования в коде методов на консоли (`console`). 
>
>

Важно отметить, что потребуется добавить настройки для кода TypeScript в разделе overrides , иначе ESLint не получится использовать для одновременной проверки кода JavaScript и TypeScript.

Для правил ключами являются имена правил, которые можно найти здесь, а значениями — действия для соответствующих правил. Если значение является строкой или числом, то это уровень ошибок. В данном случае error или 2 означает, что нарушение правила вернет ошибку, и код выхода будет равен 1. Если значение представляет собой массив, то первый элемент — это уровень ошибок, а второй — конфигурация для правила. Например, первое правило определяет, что следует использовать только двойные кавычки, иначе будет возвращена ошибка.

Если увидите в IDE предупреждение о том, что .eslintrc.js не включен ни в один путь компилятором TypeScript, то либо добавьте его в линтинг, либо проигнорируйте его. Игнорировать проще: нужно просто добавить новый ключ ignorePatterns , как показано выше, или добавить его в файл .eslintignore . Если хотите также линтить этот файл, добавьте его в tsconfig.config . Если нужно добавить .eslintrc.js для линтинга, обратитесь к этому обсуждению на StackOverflow.

Если увидите сообщение TS2304:Cannot find name ‘__dirname’ в .eslintrc.js , выполните эту команду, чтобы исправить возникшую ошибку:

$ npm install @types/node --save-dev

Использование ESLint для проверки кода JavaScript

Теперь, когда ESLint установлен и настроен, добавим этот JS-файл в папку проекта и применим ESLint для его проверки. Все используемые здесь файлы можно найти в конце статьи.

function sum(x, y) return x + y
>const x = 100;
const y = '200';
const xPlusY = sum(x, y);
console.log(`$ + $ = $`)

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

Если хотите, чтобы ESLint проверил только код, выполните эту команду:

$ npx eslint src/example.js

Вы увидите ошибки, которые стоит исправить для улучшения кода:

1:13 error Missing space before function parentheses space-before-function-paren 
2:1 error Expected indentation of 2 spaces but found 4 indent 
2:17 error Missing semicolon semi 
6:11 error Strings must use doublequote quotes 
8:1 error Unexpected console statement no-console 
8:39 error Missing semicolon semi✖ 6 problems (6 errors, 0 warnings) 
5 errors and 0 warnings potentially fixable with the `--fix` option.

Если хотите, чтобы ESLint автоматически исправлял код, добавьте опцию —fix к вышеуказанной команде:

$ npx eslint src/example.js --fix

Большинство косметических погрешностей могут быть исправлены ESLint автоматически. Однако есть некоторые проблемы, которые необходимо исправлять вручную. Например, ESLint не удалит console.log автоматически — вам придется удалять его самостоятельно:

8:1 error Unexpected console statement no-console✖ 1 problem (1 error, 0 warnings)

Использование ESLint для проверки кода TypeScript

Теперь воспользуемся ESLint для проверки этого файла, написанного на TypeScript. Он имеет то же содержание, что и файл на JavaScript, за исключением того, что в функции добавлены типы:

function sum(x: number, y: number): number return x + y
>const x = 100;
const y = '200';
const xPlusY = sum(x, y);
console.log(`$ + $ = $`)

Для проверки кода TypeScript используется та же команда. Можно специально указать расширение, но это необязательно:

$ npx eslint --ext .ts src/example.ts

Будут выданы такие же ошибки:

1:13 error Missing space before function parentheses space-before-function-paren 
2:1 error Expected indentation of 2 spaces but found 4 indent 
2:17 error Missing semicolon semi 
8:1 error Unexpected console statement no-console 
8:39 error Missing semicolon semi✖ 5 problems (5 errors, 0 warnings) 
4 errors and 0 warnings potentially fixable with the `--fix` option.

Однако в коде TypeScript кавычки не проверяются — это известная проблема. Чтобы проверять кавычки в коде TypeScript, вам придется обновить правила в соответствии с этой инструкцией:

 // Другие правила в исходном файле. 
"quotes": "off", // Обратите внимание: вы должны отключить базовое правило, так как оно может сообщать о неправильных ошибках. 
"@typescript-eslint/quotes": ["error", "dobule"]
>

Кроме того, проблему с кавычками для кода TypeScript можно легко исправить с помощью Prettier.

Использование tsc для проверки кода TypeScript

Следует отметить, что непоследовательный тип в строке 7 в example.ts не указывается ESLint. К сожалению, ESLint сообщает только об ошибках собственных линтеров, игнорируя ошибки компиляции TypeScript.

Проверить ошибки компиляции TypeScript для типов, как показано в нашем примере, можно с помощью команды tsc . Обычно к ней добавляется опция —noEmit , поскольку чаще всего нужно проверить только ошибки компиляции (без создания скомпилированных файлов JavaScript).

Воспользуемся tsc для проверки кода TypeScript:

$ npx tsc src/example.ts --noEmit

Теперь видим непоследовательный тип в строке 7 при вызове функции sum :

example.ts:7:23 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.7 const xPlusY = sum(x, y); 
~
Found 1 error in example.ts:7

Добавление скриптов для линтинга в package.json

Добавим несколько скриптов в package.json , которые можно будет легко вызывать для проверки всех файлов в проекте:

"scripts": "check-types": "npx tsc --noEmit", 
"lint": "npx eslint 'src/**/*.'"
>

Обратите внимание, что можно добавлять расширения файлов в eslint , но не в tsc .

Теперь запустим проверку типов и линтинг для всех файлов в проекте:

$ npm run check-types
$ npm run lint

Использование ESLint в VS Code

Использование ESLint в командной строке является обязательным, если необходимо добавить его в конвейеры проверки кода, такие как Git-хуки pre-commit. При написании кода желательно иметь обратную связь с интерактивной средой разработки (IDE) в режиме реального времени, чтобы была возможность немедленно исправлять проблемы. Использование VS Code позволяет установить расширение ESLint для проверки кода именно в таком режиме.

Обратите внимание, что расширение ESLint использует один и тот же конфигурационный файл в папке проекта. Включите строку состояния ESLint, чтобы видеть ошибки, если файл .eslintrc.js настроен неправильно:

Теперь при внесении какой-либо ошибки в .eslintrc.js вы сможете сразу же увидеть ее с помощью сообщения об ошибке:

Наконец, если расширение ESLint установлено и включено, а файл .eslintrc.js настроен правильно, можно сразу же увидеть ошибки в VS Code:

Теперь вы знаете, как установить и настроить ESLint для проверки качества и стилистической выдержанности кода JavaScript и TypeScript. Весь код из статьи можно найти в этом репозитории.

• 7 способов ускорить ревью кода
• Как не лажать с JavaScript. Часть 3
• Создаем на JavaScript приложение записи заметок в реальном времени

Читайте нас в Telegram, VK и Дзен