UBIC ESLint config

Корпоративная конфигурация ESLint для проектов.

Покрывает все нестилистические стандартные правила ESLint.

Установка

Установить конфиг и пакеты для линтера и форматера:

yarn add -D @ubic/eslint-config eslint prettier
# или
npm install -D @ubic/eslint-config eslint prettier

Требования

• [email protected] и новее
• [email protected] и новее
• [email protected] и новее

Пакет поставляется как ESM. В конфиге на CommonJS он тоже работает - см. пример ниже, - но подключается там иначе.

Если в проекте есть tsconfig.json, moduleResolution должен быть node16, nodenext или bundler: старый node не понимает подпути пакета.

Гайды

• Обновляетесь с 8.x? Смотрите гайд по миграции.

• Ставите конфиг на проект с историей и получили пачку ошибок? В гайде по внедрению три способа раскатать его постепенно и критерии, какой выбрать.

Использование

Примеры ниже кладут в eslint.config.js, по умолчанию в корень проекта.

Каждая среда подключается своим подпутём - @ubic/eslint-config/javascript, /typescript, /react, /vue, /jest, /node - и грузит только то, что ей нужно: проекту на чистом JavaScript не приходится загружать TypeScript и плагины React с Vue. Общего входа @ubic/eslint-config нет.

Javascript

import javascript from '@ubic/eslint-config/javascript';

export default javascript;

Typescript

typescript уже включает в себя javascript, отдельно подключать его не нужно.

import typescript from '@ubic/eslint-config/typescript';

export default typescript;

React.js

import javascript from '@ubic/eslint-config/javascript';
import react from '@ubic/eslint-config/react';

export default [...javascript, ...react];

React.js + Typescript

import typescript from '@ubic/eslint-config/typescript';
import react from '@ubic/eslint-config/react';

export default [...typescript, ...react];

Vue.js

При использовании vue-cli:

import javascript from '@ubic/eslint-config/javascript';
import vue from '@ubic/eslint-config/vue';

export default [...javascript, ...vue];

Конфиг для Vue тянет за собой парсер TypeScript - без него не разобрать <script lang="ts">. Проекту на чистом JavaScript он тоже достанется.

В случае, если используется другое окружение, необходимо так же указать путь до файла конфигурации webpack:

import javascript from '@ubic/eslint-config/javascript';
import vue from '@ubic/eslint-config/vue';
import { importXResolverCompat } from 'eslint-plugin-import-x';
import webpackResolver from 'eslint-import-resolver-webpack';

export default [
  ...javascript,
  ...vue,
  {
    parserOptions: {
      parser: '@babel/eslint-parser',
    },
    settings: {
      'import-x/resolver-next': [
        importXResolverCompat(webpackResolver, {
          config: './webpack.config.js',
        }),
      ],
    },
  },
];

Jest

Добавляют к основному конфигу, правила действуют только на файлы *.spec.* и *.test.*:

import typescript from '@ubic/eslint-config/typescript';
import jest from '@ubic/eslint-config/jest';

export default [...typescript, ...jest];

Node

Добавляют к основному конфигу, включает глобальные переменные Node:

import typescript from '@ubic/eslint-config/typescript';
import node from '@ubic/eslint-config/node';

export default [...typescript, ...node];

CommonJS

Конфиг на CommonJS (eslint.config.cjs или eslint.config.js в проекте без "type": "module") ESLint поддерживает, пакет в нём работает. Но require ESM-модуля отдаёт не сам конфиг, а объект вокруг него, поэтому нужен .default - без него линт падает на is not iterable:

const typescript = require('@ubic/eslint-config/typescript').default;
const react = require('@ubic/eslint-config/react').default;

module.exports = [...typescript, ...react];

Используемые плагины

• Import X
• JSX A11y X
• Jest
• Typescript Eslint
• Prettier
• ESLint React
• React hooks
• Vue

Все плагины упаковываются в пакет конфига, устанавливать их в проектах не нужно.

Разработка

Процесс разработки подробно описан в CONTRIBUTING.md