JS Linting с помощью ESLint и gulp

Table of contents

• Introduction

• Установка пакетов

• Настройка babel

• Настройка ESLint

• Настройка gulp

• Настройка npm

• Запуск линтирования

• Настройка линтирования в PHPStorm

Introduction

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

Для демонстрации работы линтирования был создан тестовый проект: https://github.com/superrosko/example-js-lint.

Установка пакетов

Т.к. ESLint - это npm-пакет, то мы должны инициализировать проект:

npm init

После того, как мы инициировали node-проект и заполнили информацию о нем, нам необходимо установить пакеты, которые мы будем использовать для линтирования.

npm install --save-dev gulp eslint gulp-eslint eslint-config-google @babel/core @babel/cli @babel/node @babel/preset-env

gulp - инструментарий для автоматизации трудоемких задач в вашей разработке

eslint - линтер стилей

gulp-eslint - плагин для gulp

eslint-config-google - конфигурационный файл для Google JavaScript style guide (ES2015+ version)

@babel/core @babel/cli @babel/node @babel/preset-env - транспайлер, необходимый для работы gulp

Настройка babel

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

{
  "presets": [
    "@babel/preset-env"
  ]
}

Настройка ESLint

Для настройки правил проверки создадим файл .eslintrc.json в корне проекта со следующим содержимым:

{
    "parserOptions": {
        "ecmaVersion": 8,
        "sourceType": "module"
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "google"
    ],
    "rules": {
        "no-console": [
            "error",
            {
                "allow": [
                    "warn",
                    "error",
                    "log"
                ]
            }
        ]
    }
}

Настройка gulp

Запуск линтирования мы будем производить с помощью задач gulp и для этого создадим файл конфигурации gulpfile.babel.js в корне проекта со следующим содержимым:

/**
 * Импортируем необходимые пакеты
 */
import gulp from 'gulp';
import eslint from 'gulp-eslint';

/**
 * Указываем пути к файлам для проверки
 * @type {{js: string}}
 */
const paths = {
  js: './src/**/*.js',
};

/**
 * Test JS lint
 * @return {*}
 */
function testJsLint() {
  return gulp.src(paths.js).
      pipe(eslint()).
      pipe(eslint.format()).
      pipe(eslint.failAfterError());
}

/**
 * Экспортируем методы
 */
const tests = gulp.parallel(testJsLint);
exports.tests = tests;

export default tests;

Настройка npm

Задача тестирования уже создана, теперь добавим команду test в package.json:

 "scripts": {
    "test": "gulp tests"
  },

Запуск линтирования

Перед запуском линтирования создадим пустой файл ./src/index.js, который и будем проверять линтером. Добавим в файл следующий код и запустим тест:

console.log("Hello, world!");

Линтирование можно запустить следующими командами:

gulp tests

или

npm run test

После запуска теста мы получим ошибки:

./src/index.js
  1:13  error  Strings must use singlequote                   quotes
  1:30  error  Newline required at end of file but not found  eol-last

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

ESLint позволяет автоматически править некоторые проблемы, для этого есть опция --fix.

Таким образом мы научились настраивать линтирование файлов js с помощью ESLint.

Настройка линтирования в PHPStorm

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

File | Settings | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint

Выберем Manual ESLint configuration и сохраним настройки. Теперь и PHPStorm будет подсвечивать несоблюдение правил линтирования при редактировании. А также в контекстном меню при клике по файлу js появится пункт Fix ESLint Problems, который будет исправлять файл в соответствии со стандартом линтирования.