ESLint или учимся писать на JavaScript правильно

[N1kS]

Всем доброго времени суток!

Я уже неоднократно упоминал на сервере дискорда о такой штуке, как ESLint. Кто-то относится скептически, кто-то поддерживает, а кто-то и вовсе пропускает мимо. Сегодня постараемся разобраться что это за монстр, да и нужен ли он вообще?

Теория

Цитата

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

Для чего это все? На самом деле все очень просто! 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 и зачем это нужно. Я надеюсь, что для кого-то из вас эта статья была полезна и, возможно, все таки убедит вас в том, что его использования крайне важно.

Спасибо за внимание! Я надеюсь, что вы не напрасно потратили свое время.

Edited September 17, 2017 by N1kS