Однажды познакомившись с программированием, требуется постоянно следить за изменениями, чтобы оставаться в теме происходящего - множество людей по всему миру без устали вносят корректировки в общедоступные инструменты. Меняются конфигурации, устаревают руководства, обновляются подходы к разработке.
При подготовке статьи с примерами правил wb-rules, пришлось бороться с Prettier - он упрямо переносил тело инструкций if, else, while и for в одну линию:
if (index !== -1) callbacks.splice(index, 1)
Разработчикам, не привыкшим к такой записи, будет сложно воспринимать коды.
В мире без Prettier существует несколько правил, решающих ту же самую проблему иначе - от обязательного соблюдения отступов, до автоматического добавления фигурных скобок:
if (index !== -1) {
callbacks.splice(index, 1)
}
Было решено задействовать альтернативы. И так совпало, что в этот момент вышла статья о ESLint Stylistic на Хабре:
Сегодня мы перезапустим процесс статического анализа кода - оптимизируем конфигурацию и добавим возможность тонкой настройки. Список из 95 стилевых правил доступен для ознакомления на официальной страничке плагина:
Подготовка к настройке
Статья является продолжением темы из прошлого выпуска:
Создание стартовой конфигурации
Перейдём в терминал VSCode и выполним
yarn eslint --init
Перед тем, как перезаписать файл конфигурации, утилита задаст ряд вопросов. Навигация в ответах осуществляется стрелками на клавиатуре, а выбор опций - пробелом. Переход к следующему вопросу - Enter.
ℹ️ Примечание: убедитесь, что файл eslint.config.mjs не открыт в какой-то из вкладок редактора, иначе на экране останется прежнее содержимое.
- What do you want to lint?
Выбираем пункт JavaScript. За корректностью JSON и Markdown следит сам VSCode, так что особой необходимости отмечать их нет. - How would you like to use ESLint?
Выбираем «To check syntax and find problems». - What type of modules does your project use?
Выбираем «JavaScript modules (import/export)», такой импорт модулей применяется в исходных кодах проекта. - Which framework does your project use?
Будет перечислен ряд фреймворков - стрелками выбираем «None of these» и нажимаем Enter. - Does your project use TypeScript?
Переводим указатель на Yes, ведь именно это мы и используем. - Where does your code run?
Отщёлкиваем пробелом галочку с Browser, смещаем курсор ниже и отмечаем Node - контроллер Wirenboard выступает в качестве сервера, а код правил выполняется в бэкенде. Режим браузера, т.е. фронтенд - это для сайтов, когда скрипты работают на стороне посетителя, силами его компьютера. - Would you like to install them now?
Будет предложено установить eslint, @eslint/js, globals, typescript-eslint. Причин отказываться нет - соглашаемся и жмем Enter. - Which package manager do you want to use?
Здесь нужно выбрать yarn.
Корректировка списка зависимостей
Для удаления Prettier, в терминале VSCode выполним команду
yarn remove eslint-config-prettier eslint-plugin-prettier prettier
Лежащий в корне проекта файл prettier.config.mjs потерял актуальность, его также следует удалить.
Далее установим плагин ESLint Stylistic
yarn add --dev @stylistic/eslint-plugin
Дополнительный файл tsconfig
Чтобы ESLint мог обрабатывать все файлы TypeScript, создадим в корне проекта специальный файл с названием tsconfig.eslint.json и следующим содержимым:
{
"extends": "./tsconfig.json",
"include": ["**/*.ts"]
}
Настройка ESLint
Открыв переписанный ранее файл eslint.config.mjs, заменим строки импорта на следующие:
import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import stylistic from '@stylistic/eslint-plugin'
import pluginJest from 'eslint-plugin-jest'
import { defineConfig, globalIgnores } from 'eslint/config'
Здесь добавляются строки для подключения плагинов Stylistic и Jest, а также импорт globalIgnores, позволяющего игнорировать всё, что происходит в определённых файлах и папках.
Перейдём к самой конфигурации, выделим строчку tselint.configs.recommended и заменим её на
// TypeScript Defaults
tseslint.configs.strictTypeChecked.map(config => ({
...config,
files: ['**/*.ts']
})),
tseslint.configs.stylisticTypeChecked.map(config => ({
...config,
files: ['**/*.ts']
})),
Здесь всё то же самое, что и в прошлой конфигурации.
Ниже разместим инструкции для подключения отдельного файла с настройками TypeScript - tsconfig.eslint.json, который будем использовать для корректного анализа файлов *.ts в корневой директории:
// TypeScript Overrides
{
files: ['**/*.ts'],
languageOptions: {
parserOptions: {
project: ['./tsconfig.eslint.json'],
tsconfigRootDir: import.meta.dirname
}}},
Следом добавим секцию правил линтинга, которые действуют только на файлы с определениями типов:
// TypeScript Type Definition Overrides
{
files: ['types/**/*.d.ts'],
rules: {
'@typescript-eslint/no-extraneous-class': 'off'
}},
Дальше начинается то, ради чего мы всё и затеяли. Добавляем Stylistic:
// Stylistic Defaults
{
files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
...stylistic.configs.customize({
quotes: 'single',
quoteProps: 'consistent',
commaDangle: 'never',
indent: 2
})},
// Stylistic Overrides
{
files: ['**/*.{js,mjs,cjs,ts,mts,cts}'],
rules: {
'@stylistic/curly-newline': ['error', 'always'],
'@stylistic/nonblock-statement-body-position': ['error', 'below']
}},
Здесь две секции - Defaults, для определения базового поведения и Overrides, где мы будем определять собственный список правил, для лучшего соответствия своему стилю оформления кода.
Настройки линтинга Jest оставим без изменений:
// Jest Defaults
{
files: ['tests/**/*.test.{js,ts}'],
plugins: { jest: pluginJest },
languageOptions: {
globals: pluginJest.environments.globals.globals
},
rules: {
'jest/no-disabled-tests': 'warn',
'jest/no-focused-tests': 'error',
'jest/no-identical-title': 'error',
'jest/prefer-to-have-length': 'warn',
'jest/valid-expect': 'error'
}},
Наконец, секция globalIgnores:
globalIgnores([
'node_modules/',
'build/',
'dist/',
'tsc-replacers/',
'types/'
])
Здесь мы убрали jest.config.ts из списка исключений, потому что в прошлом выпуске поменяли настройки проекта и теперь этот файл корректно обрабатывается:
Проверка функционирования
Редактор VSCode лучше перезапустить - значительные изменения конфигурации не всегда корректно подхватываются «на лету». Затем откроем встроенный терминал и выполним
yarn eslint --fix
ESLint выполнит проверку файлов проекта и автоматически исправит всё, что можно исправить.
Дальше можно запустить одну из команд сборки, build или build:dev.
Шаблон проекта на GitHub
Все проделанные изменения уже добавлены в ветку latest репозитория проекта на GitHub - можно скачать и работать.
Послесловие
Приведённые здесь установки являются базовыми - в своих проектах вы можете настроить правила статического анализа так, чтобы они максимально соответствовали вашему стилю.
❤️ Дорогие читатели! Спасибо, что пользуетесь кнопочкой «Поддержать автора» в Дзене - это позволяет уделять больше времени проекту и помогает технически сложным статьям выходить чаще.
В следующем выпуске перейдём к работе с кодом правил wb-rules и добавим в папку wb-rules-modules модуль для поддержки событийно-ориентированного программирования.