IF Developer

Немного авторского лонгрида. Многие часто задаются желанием сделать архитектуру приложения более предсказуемой, а код читаемым, но не все знают инструментария для воплощения. Для JS/TS проектов есть несколько ESLint-плагинов, которые помогут реализовать желаемое.

Архитектура приложения:

✅ eslint-plugin-boundaries
Гибкий и удобный плагин, для ограничения импорта элементов системы в соответсвии с задеваемыми настройками. Поможет держать организацию папок/файлов проекта под контролем. Возможностей много, настраивать можно как удобно на свой вкус и цвет.

Дополнительные плагины для архитектуры приложение с узким применением:
https://www.npmjs.com/package/eslint-plugin-hexagonal-architecture
https://www.npmjs.com/package/eslint-plugin-relations

Строгость кода:

✅ eslint-plugin-sonarjs
Плагин, помогающий определить потенциально плохие участки кода. Правил много, не со всеми обязательно соглашаться, но основная часть будет очень полезна для чистоты проекта.

Красота кода:

✅ Prettier + eslint-plugin-prettier (смотрите секцию Recommended Configuration для настройки с ESLint)

Избавляет от извечного холивара по поводу стилистика кода. Да, правил для кастомизации стилизации не сказать, что много, но их достаточно, чтобы код выглядел красиво и единообразно. Крайне желательно настраивать с пре-коммитом через husky + lint-staged, чтобы в репозиторий всегда улетал отформатированный код.

Самая простая конфигурация:

.husky/pre-commit:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

package.json:

"lint-staged": {

"*.{js,jsx,ts,tsx}": [

"eslint --fix",
      "git add"
    ]
  }
}

✅ eslint-plugin-import + @typescript-eslint/consistent-type-imports + sort-imports

Превращает бесформенную массу импортов в упорядоченный список.

Пример конфигурации, которую использую в своих проектах:

.eslintrs.js


{
 rules: {
  '@typescript-eslint/consistent-type-imports': 'error', // нужно для разделения на import и import type. Подробнее зачем вообще import/export type тут: https://stackoverflow.com/a/64243357
   'sort-imports': [ // упорядочивает импортируемые значения. Подробнее тут: https://eslint.org/docs/latest/rules/sort-imports
     'error',
     {
       ignoreDeclarationSort: true,
       allowSeparatedGroups: true
     }
   ],
   'import/first': 'off', // отключено, т.к. правило перезатирается "import/order" ниже
   'import/order': [ // собственно сортировка импортов, которая мне нравится
     'error',
     {
       alphabetize: {
         order: 'asc'
       },
       groups: [
         ['builtin', 'external'],
         'internal',
         ['parent', 'object'],
         ['sibling', 'index'],
         'type'
       ],
       'newlines-between': 'always'
     }
   ]
 }
}

✅ @cspell/eslint-plugin
Красивый код - это еще и грамматически верно написанный, поэтому проверка правописания необходима. Плагин в этом поможет. Можно добавить свой whitelist для специфичных слов. Есть минус - крайне сильно негативно влияет на скорость проверки ESLint, поэтому есть смысл вынести только на уровень CI и исправлять грамматически ошибки уже после CI-пробежки.

Пример базовой конфигурации для CI:

.eslintrs.js


const eslintConfiguration = {
  // настройки 
}

if (process.env.NODE_ENV === 'production') {
  eslintConfiguration.overrides.push({
    files: ['src/**/*'], // список файлов для проверки правописания
  excludedFiles: ['src/**/*.stories.ts'], // исключения
    plugins: ['@cspell'],
    rules: {
      '@cspell/spellchecker': [
        'error',
        {
          customWordListFile: './spellcheck-whitelist.dict' // файл с исключениями. Имеет специальный формат. Побробнее тут: https://cspell.org/docs/dictionaries-custom/
        }
      ]
    }
  });
}

return eslintConfiguration;

✅ Stylelint
Не джаваскриптом едины - стилизация и структуризация нужны и для CSS. Stylelint поддерживает поддерживает как сам CSS, так и CSS-подобные (например, SASS/LESS), так же CSS-in-JS (например, styled-components, emotion). Заводится не без приключений, но оно того определенно стоит.

#javascript #typescript #eslint

134 viewsedited 11:33