Өздері жөндейтін ESLint-ережелер: fixer, suggestions және Angular-шаблондар

// tools/lint-rules/rules/rxjs-operators-import.js
// Эти имена в 'rxjs' — другие функции (статические), а не операторы из 'rxjs/operators'.
// Их нельзя чинить заменой пути: смысл кода изменится.
const SAME_NAME_DIFFERENT_FUNCTION = new Set([
  'combineLatest', 'concat', 'merge', 'onErrorResumeNext', 'partition', 'race', 'zip',
]);

export default {
  meta: {
    type: 'suggestion',
    fixable: 'code',
    docs: { description: 'Операторы импортируются из rxjs, а не из rxjs/operators' },
    messages: {
      deprecated: "Импортируй из 'rxjs': путь 'rxjs/operators' устарел с RxJS 7.2.",
      manual:
        "'{{name}}' в 'rxjs' — другая функция с тем же именем. Замени вручную (для merge, concat, zip, race — на mergeWith и т.п.).",
    },
    schema: [],
  },
  create(context) {
    return {
      'ImportDeclaration[source.value="rxjs/operators"]'(node) {
        const risky = node.specifiers.find(
          (s) => s.type === 'ImportSpecifier' && SAME_NAME_DIFFERENT_FUNCTION.has(s.imported.name),
        );

        if (risky) {
          // сообщаем, но НЕ чиним автоматически
          context.report({ node: risky, messageId: 'manual', data: { name: risky.imported.name } });
          return;
        }

        context.report({
          node: node.source,
          messageId: 'deprecated',
          fix(fixer) {
            const quote = node.source.raw[0]; // сохраняем стиль кавычек
            return fixer.replaceText(node.source, `${quote}rxjs${quote}`);
          },
        });
      },
    };
  },
};

<button (click)="save()">Сохранить</button>

Element  name="button"
├── attributes: []                  ← обычные атрибуты: type="button"
├── inputs:     []                  ← привязки: [type]="kind", [attr.type]="kind"
├── outputs:    [BoundEvent click]  ← события: (click)="save()"
└── children:   [Text "Сохранить"]

// tools/lint-rules/rules/button-has-type.js
import { getTemplateParserServices } from '@angular-eslint/utils';

export default {
  meta: {
    type: 'problem',
    hasSuggestions: true,
    docs: { description: 'У <button> должен быть явный type' },
    messages: {
      missing: 'Укажи type у <button>: внутри <form> без него кнопка отправляет форму.',
      addButton: 'Добавить type="button" (просто кнопка)',
      addSubmit: 'Добавить type="submit" (отправка формы)',
    },
    schema: [],
  },
  create(context) {
    const parserServices = getTemplateParserServices(context);

    return {
      'Element[name="button"]'(node) {
        const hasType =
          node.attributes.some((attr) => attr.name === 'type') || // type="..."
          node.inputs.some((input) => input.name === 'type');     // [type]="..." или [attr.type]

        if (hasType) return;

        // позиция сразу после "<button"
        const start = node.startSourceSpan.start.offset;
        const range = [start, start + '<button'.length];
        const insert = (value) => (fixer) =>
          fixer.insertTextAfterRange(range, ` type="${value}"`);

        context.report({
          loc: parserServices.convertNodeSourceSpanToLoc(node.startSourceSpan),
          messageId: 'missing',
          suggest: [
            { messageId: 'addButton', fix: insert('button') },
            { messageId: 'addSubmit', fix: insert('submit') },
          ],
        });
      },
    };
  },
};

// tools/lint-rules/rules/autofix.test.js
import { RuleTester } from 'eslint';
import tsParser from '@typescript-eslint/parser';
import templateParser from '@angular-eslint/template-parser';
import rxjsRule from './rxjs-operators-import.js';
import buttonRule from './button-has-type.js';

new RuleTester({ languageOptions: { parser: tsParser } }).run('rxjs-operators-import', rxjsRule, {
  valid: ["import { map } from 'rxjs';"],
  invalid: [
    { code: "import { map } from 'rxjs/operators';", output: "import { map } from 'rxjs';", errors: [{ messageId: 'deprecated' }] },
    { code: 'import { map } from "rxjs/operators";', output: 'import { map } from "rxjs";', errors: [{ messageId: 'deprecated' }] },
    { code: "import { map, merge } from 'rxjs/operators';", output: null, errors: [{ messageId: 'manual' }] },
  ],
});

new RuleTester({ languageOptions: { parser: templateParser } }).run('button-has-type', buttonRule, {
  valid: [
    '<button type="button">Ок</button>',
    '<button [type]="kind">Ок</button>',
    '<button [attr.type]="kind">Ок</button>',
  ],
  invalid: [
    {
      code: '<form><button (click)="save()">Сохранить</button></form>',
      errors: [{
        messageId: 'missing',
        suggestions: [
          { messageId: 'addButton', output: '<form><button type="button" (click)="save()">Сохранить</button></form>' },
          { messageId: 'addSubmit', output: '<form><button type="submit" (click)="save()">Сохранить</button></form>' },
        ],
      }],
    },
    {
      code: '@if (ready) { <button>Ок</button> }',
      errors: [{
        messageId: 'missing',
        suggestions: [
          { messageId: 'addButton', output: '@if (ready) { <button type="button">Ок</button> }' },
          { messageId: 'addSubmit', output: '@if (ready) { <button type="submit">Ок</button> }' },
        ],
      }],
    },
  ],
});

// eslint.config.js (фрагмент)
import tseslint from 'typescript-eslint';
import angular from 'angular-eslint';
import rxjsOperatorsImport from './tools/lint-rules/rules/rxjs-operators-import.js';
import buttonHasType from './tools/lint-rules/rules/button-has-type.js';

export default [
  {
    files: ['**/*.ts'],
    languageOptions: { parser: tseslint.parser },
    processor: angular.processInlineTemplates,
    plugins: { local: { rules: { 'rxjs-operators-import': rxjsOperatorsImport } } },
    rules: { 'local/rxjs-operators-import': 'error' },
  },
  {
    files: ['**/*.html'],
    languageOptions: { parser: angular.templateParser },
    plugins: { 'local-template': { rules: { 'button-has-type': buttonHasType } } },
    rules: { 'local-template/button-has-type': 'error' },
  },
];

$ npx eslint --fix src
src/a.component.html
  1:7   error  Укажи type у <button>: внутри <form> без него кнопка отправляет форму

src/a.component.ts
  3:40  error  Укажи type у <button>: внутри <form> без него кнопка отправляет форму

✖ 2 problems (2 errors, 0 warnings)