Интеграция ESLint в процесс Webpack

Цель этого руководства — продемонстрировать, как интегрировать ESLint в процесс сборки Webpack быстрым, понятным и модульным способом для объединенных интерфейсных проектов. Конечным результатом является базовая структура проекта, которую мы используем для многих наших связанных интерфейсных и серверных проектов, включая проекты React.js.

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

Это руководство было разработано для Windows. Пользователям других операционных систем может потребоваться внести коррективы

Источник проекта

https://github.com/ninjaboynaru/chox-webpack-eslint-base1

Предположения знаний

Предполагается, что читатель этого руководства знаком со следующими понятиями.

JavaScript | Node.js | НПМ
Использование строки CMD
Что такое вебпак
Что такое ESLint
Модули ES6 (импорт/экспорт)

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

Настройка веб-пакета

Здесь мы настроим Webpack

1. Создайте папку проекта со следующей структурой

2. Откройте любой текстовый редактор и заполните файл package.json.

{
    "name": "webpack_eslint_modular",
    "private": true
}

3. Откройте инструмент командной строки в папке проекта и установите Webpack с помощью следующей команды.

npm install --save-dev webpack webpack-cli

4. Заполните файл webpack.config.js

const path = require('path');

const mode = process.env.NODE_ENV || 'development';
console.log(`Webpack building in ${mode} mode`);
module.exports = {
    mode,
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

5. Создайте файл записи src/index.js

Создайте файл с именем index.js в папке src и заполните его.

import util from './util.js';
alert(`Random number is ${util.randomInt(1, 100)}`);

Мы импортируем из файла util.js, который создадим далее. Весь этот код будет объединен в один файл main.js, как мы определили в нашей конфигурации Webpack.

6. Создайте импортированный файл src/util.js.

Создайте файл с именем util.js в папке src и заполните его.

const util = {
    randomInt: function randomNumber(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
}
export default util;

7. Создайте команды сборки

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

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

{
    "name": "webpack_eslint_modular",
    "private": true,
    "scripts": {
        "build": "webpack",
        "watch": "npm run build -- --watch"
    },
    "devDependencies": {
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2"
    }
}

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

9. Запуск наших скриптов сборки

Чтобы запустить скрипт сборки (он же скрипт npm), откройте строку cmd в папке проекта и введите

npm run build

npm run watch

Обратите внимание: если вы запустите скрипт watch, он получит контроль над консолью. Чтобы восстановить управление, нажмите ctrl + c на клавиатуре (для пользователей Windows)

После запуска одного из этих скриптов вы должны получить новый файл в папке dist с именем main.js вместе с чем-то вроде этого в вашей консоли.

10. Увидеть наш связанный код в действии

Мы создадим HTML-файл, который будет импортировать наш связанный скрипт main.js, чтобы мы могли увидеть его в действии.

В папке dist создайте файл с именем index.html и заполните его.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
    <title>Webpack 5 With ESLint Tutorial</title>
    <script src="main.js"></script>
</head>
<body>
    <h1>HELLO WORLD</h1>
    </body>
</html>

Затем откройте этот файл в своем веб-браузере, и вы должны увидеть предупреждение

Настройка ESLint

Теперь мы интегрируем ESLint в наш процесс Webpack, чтобы

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

1. Установите необходимые пакеты ESLint

Запустите следующую команду в строке cmd

npm install --save-dev eslint eslint-webpack-plugin eslint-plugin-import

eslint — это базовый пакет ESLint.
eslint-webpack-plugin позволяет ESLint работать с Webpack
eslint-plugin-import позволяет ESLint понимать операторы import и export в наших файлах JavaScript.

2. Добавьте ESLint в нашу конфигурацию Webpack.

Измените файл webpack.config.js, чтобы использовать подключаемый модуль ESLint Webpack.

Теперь это должно выглядеть так

const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const mode = process.env.NODE_ENV || 'development';
console.log(`Webpack building in ${mode} mode`);
module.exports = {
    mode,
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new ESLintPlugin({
            fix: true
       })
    ]
}

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

Если вы снова запустите скрипт сборки, код скомпилируется, но вы получите сообщение о том, что конфигурация ESLint не определена. Давайте продолжим и настроим файлы конфигурации для ESLint.

2. Настроить ESLint

Создайте файл в корне вашего проекта с именем .eslintrc.js и заполните его соответствующим образом.

const path = require('path');
module.exports = {
    env: {
        browser: true
    },
    extends: [
        "eslint:recommended",
        path.resolve(__dirname, 'linting/.eslintrc-import.js'),
        path.resolve(__dirname, 'linting/.eslintrc-main.js')
    ]
}

3. Объяснение конфигурации .eslintrc.js

Мы экспортируем объект конфигурации, который будет использовать ESLint.

Мы сообщаем ESLint, что наш код работает в среде браузера.
Вместо того, чтобы определять все наши собственные правила, мы указываем ESLint расширить встроенный рекомендуемый набор правил с помощью «eslint:recommended».
Затем мы указываем ESLint использовать/расширять наши собственные правила, которые мы определим в файлах конфигурации, которые мы создадим далее
linting/.eslintrc-import.js и linting/. eslintrc-main.js

4. Модульное определение наших собственных правил линтинга

Создайте в корне проекта папку linting и создайте в ней два файла.

.eslintrc-main.js
.eslintrc-import.js

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

5. .eslintrc-main.js

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

module.exports = {
    rules: {
        'no-extra-semi': 1
    }
}

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

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

Поскольку правило no-extra-semi можно исправить, и мы установили для параметра fix значение true в нашей конфигурации подключаемого модуля ESLint Webpack, ESLint автоматически удалит лишние точки с запятой, а не выдаст ошибку. .

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

6. .eslintrc-import.js

В этом файле мы настроим правила, касающиеся модулей ES6, т.е. импорт и экспорт

Заполните файл как таковой, но позже не стесняйтесь настраивать его по своему вкусу. Вы можете найти больше правил модуля ES6 (импорт/экспорт) здесь

module.exports = {
    extends: [
        'plugin:import/recommended'
    ],
    rules: {
        'import/extensions': 0
    }
}

1. В этом файле конфигурации мы указываем ESLint расширить пакет eslint-plugin-import и его рекомендуемый набор правил.
2. Затем мы входим и меняем набор правил, отключая правило import/extensions
Как было сказано ранее, все это можно поместить в один файл, но по мере роста вашего проекта преимущества разделения ваших правил линтинга на отдельные файлы становятся очевидными.

7. Запуск

Если вы сейчас запустите команды сборки или просмотра, ESLint проверит исходные файлы до того, как Webpack объединит их. Попробуйте добавить дополнительную точку с запятой в конец строки и повторно запустить команду сборки, чтобы посмотреть, что произойдет. Или попробуйте использовать несуществующую переменную; ESLint должен выдать ошибку и остановить процесс сборки.

Кроме того, вместо повторного запуска сборки каждый раз, когда вы вносите изменения, просто запустите команду watch, и она будет автоматически перестраиваться при каждом изменении.

Подведение итогов

1. Мы интегрировали ESLint в процесс сборки Webpack по модульному принципу, что упрощает настройку и управление.
2. Мы сделали это, добавив eslint-webpack-plugin в нашу конфигурацию Webpack в свойство массива plugins.
3. Наша базовая конфигурация ESLint была определена в файле .eslintrc.js , и этот файл расширяет другие файлы конфигурации, каждый из которых отвечает за свой тип линтинга.
4. Остальные файлы конфигурации хранились в папке с именем linting.
5. Эти файлы были
— .eslintrc-main.js отвечали за наши общие правила линтинга
— .eslintrc-import.js отвечали за ES6 Правила линтинга модуля (импорт/экспорт)
6. По мере расширения проекта вы можете добавлять другие файлы линтинга для других целей, например
— .eslintrc-react.js для конкретных правил React.js
— .eslintrc-accessibility.jsдля правил типа веб-доступности
7. Не стесняйтесь задавать вопросы в комментариях
8. Скачать проект можно здесь

Интеграция ESLint в процесс Webpack