Всем доброго времени суток!
Я уже неоднократно упоминал на сервере дискорда о такой штуке, как ESLint. Кто-то относится скептически, кто-то поддерживает, а кто-то и вовсе пропускает мимо. Сегодня постараемся разобраться что это за монстр, да и нужен ли он вообще?
Теория
Для чего это все? На самом деле все очень просто! ESLint поможет привести ваш код к общему стилю.
"Что в этом такого? Я и сам могу писать весь свой код в едином стиле" ответите вы, но не все так просто. Каждому человеку свойственно ошибаться или проявлять невнимательность, особенно после долгой работы над кодом.
ESLint крайне необходим при работе в команде. Зачем? Да опять же, все очень просто! Кто-то привык ставить в конце точку с запятой, кто-то нет, кто-то максимум пишет 80 символов в строку, кто-то 120, а кто-то громоздит вообще сколько душе угодно. В конечно итоге - ваш код или код вашей команды может превратиться в сплошную кашу, а вам это нужно? Если вы и дальше считаете, что вам это нужно - просто закройте статью.
Практика
Теперь когда вы знаете, что такое ESLint и зачем он нужен - давайте начнем его использовать? Для того, чтобы это сделать - не нужно каких-то особых усилий, достаточно установить пакет используя пакетный менеджер npm.
npm install eslint --save-dev
Установили, отлично, что теперь? Теперь нам нужно создать файл в котором мы будем прописывать наши правила о "правильном коде". Для этого достаточно создать в директории файл .eslintrc.js (так же возможно варианты просто .eslitrc и .eslintrc.json, читайте подробнее на официальном сайте). После создания файла - нам нужно сконфигурировать наш конфиг, я приведу простой пример. Е
сли вам нужно что-то особенное или заточенное под что-то конкретное - вы можете без проблем найти необходимую документацию все на том же официальном сайте.
.eslintrc.js:
module.exports = {
// Среды - среды, в которых ваши .js файлы будут запущены. Каждая среда предоставляет определенный набор предопределенных глобальных переменных.
'env': {
'node': true,
'es6': true
},
'extends': 'eslint:recommended',
// Здесь таятся наши правила.
'rules': {
// Каждое правило принимает тип оповещения о себе (2 или error, 1 или warn, 0 или off(не оповещать)) и непосрественно сами аргументы для правида.
// Правило обеспечивает согласованный стиль отступов. В данном примере 4 пробела.
'indent': [2, 4], // оповещать как ошибку
// Правило обеспечивает последовательное использование точек с запятой.
'semi': [2, 'always'], // оповещать как ошибку
// Правило обеспечивает согласованный стиль привязки для блоков.
'brace-style': [2, '1tbs'], // оповещать как ошибку
// Правило направлено на устранение неиспользуемых переменных, функций и параметров функций.
'no-unused-vars': [1], // оповещать как предупреждение
// Разрешим вывод в консоль (используйте это правило только при разработке).
'no-console': [0]
}
};
Полный список всех правил вы можете найти здесь.
Окей, установили, настроили, что дальше? Дальше нам необходимо проверить все наши .js файлы на наличие ошибок или предупреждений. Ниже я приведу пример простого .js файла, чтобы нагляднее было видно где есть ошибки, а где их нет. Для того, чтобы проверить файлы необходимо просто запустить команду:
node ./node_modules/eslint/bin/eslint test.js
Где test.js - имя вашего файла, соответственно. Пример файла:
function Foo()
{
console.log('Foo')
}
function Fooo() {
console.log('Fooo');
}
Запустив ESLint вы должны увидеть что-то вроде этого:
1:10 warning 'Foo' is defined but never used no-unused-vars
2:1 error Opening curly brace does not appear on the same line as controlling statement brace-style
3:1 error Expected indentation of 4 spaces but found 2 indent
3:21 error Missing semicolon semi
6:10 warning 'Fooo' is defined but never used no-unused-vars
Все справедливо и все по делу. Я не буду разбирать каждую ошибку, но если вы пройдетесь по коду в соответствии с нашими правилами, то вы увидите, что ESLint говорит нам справедливые вещи.
И это все?
Нет, это не все. Я думаю многие из вас согласятся, что такой вариант проверки неудобен, т.к. он требует постоянного запуска команды из окна терминала (консоли), что не очень-то и удобно. А есть выход? Да, конечно выход есть!
На сегодняшний день многие современные текстовые редакторы обеспечивают проверку вашего кода, используя ваши правила ESLint.
Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Atom:
https://github.com/AtomLinter/linter-eslint
Notepad++
https://sourceforge.net/projects/notepad-linter/
Я не буду писать полный список, т.к. вы сможете сами без проблем найти поддержку ESLint для вашего редактора в гугле.
Заключение
После прочтения данной статьи у вас сформировались базовые понятия о том, что такое ESLint и зачем это нужно. Я надеюсь, что для кого-то из вас эта статья была полезна и, возможно, все таки убедит вас в том, что его использования крайне важно.
Спасибо за внимание! Я надеюсь, что вы не напрасно потратили свое время.