RainerHahnekamp Rainer Hahnekamp 21. August 2024 Angular Warsaw Low Hanging Fruits ESLint

RainerHahnekamp About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality

RainerHahnekamp Low Hanging Fruits

RainerHahnekamp Agenda ● Writing simple ESLint rules ● Understanding the Configuration

RainerHahnekamp Legacy and Flat Config ● How to know? ○ Flat: eslint.config.[m]js ○ Legacy: .eslintrc.json legacy ● Flat is default since angular-eslint 18

RainerHahnekamp MVP: Define Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { context.report({node, message: "This is a class"}) } }; } } } } } }

RainerHahnekamp https://estools.github.io/esquery/

RainerHahnekamp MVP: Activate Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { if (node.id.name.match(/^[a-z]/)) { context.report({node, message: "This is a class"}) } } // ...

RainerHahnekamp MVP: Do some checks export default { plugins: { custom: { rules: { 'capitalized-classes': { meta: { messages: { capitalizeClass: 'class names have to be capitalized' } }, create(context) { return { ClassDeclaration(node) { if (node.id.name.match(/^[a-z]/)) { context.report({ node, messageId: 'capitalizeClass' }) } // ...

RainerHahnekamp TypeScript Support I: Configuration Helper import tseslint from 'typescript-eslint'; export default tseslint.config()

RainerHahnekamp TypeScript Support I: Type Checking // @ts-check import tseslint from 'typescript-eslint'; export default tseslint.config()

RainerHahnekamp TypeScript Support I: Recommended ESLint rules // @ts-check import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended )

RainerHahnekamp TypeScript Support I: Recommended TSESLint rules // @ts-check import tseslint from 'typescript-eslint'; import eslint from '@eslint/js' export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, )

RainerHahnekamp TypeScript Support I: Adding Custom Plugin // @ts-check import tseslint from 'typescript-eslint'; import eslint from '@eslint/js' export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, { plugins: { // ... }, rules: { 'custom/capitalized-classes': 'error' } })

RainerHahnekamp TypeScript Support I: Disabling other Rules // @ts-check import tseslint from 'typescript-eslint'; import eslint from '@eslint/js' export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, { plugins: { // ... }, rules: { 'custom/capitalized-classes': 'error', '@typescript-eslint/no-unused-vars': 'off' } })

RainerHahnekamp TypeScript II: Typed Rule Creator import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => '');

RainerHahnekamp TypeScript II: Typed Plugin import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => ''); const capitalizeClasses = createRule({ name: 'capitalize-class' })

RainerHahnekamp TypeScript II: Typed Plugin import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => ''); const capitalizeClasses = createRule({ name: 'capitalize-class', defaultOptions: [], meta: { type: 'problem', docs: {description: 'Capitalize classes'}, messages: { capitalizeClass: 'Class names have to be capitalized' }, schema: [] } })

RainerHahnekamp TypeScript II: Typed Plugin import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => ''); const capitalizeClasses = createRule({ name: 'capitalize-class', defaultOptions: [], meta: { type: 'problem', docs: {description: 'Capitalize classes'}, messages: { capitalizeClass: 'Class names have to be capitalized' }, schema: [] }, create(context) {...} })

RainerHahnekamp TypeScript II: Typed Plugin import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => ''); const capitalizeClasses = createRule({ name: 'capitalize-class', defaultOptions: [], meta: { type: 'problem', docs: {description: 'Capitalize classes'}, messages: { capitalizeClass: 'Class names have to be capitalized'

RainerHahnekamp TypeScript II: Typed Plugin const plugin = { plugins: { custom: { rules: { 'capitalized-classes': capitalizeClasses } } } } export = plugin

RainerHahnekamp TypeScript II: Typed Plugin // @ts-check import tseslint from 'typescript-eslint'; import eslint from '@eslint/js' export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, )

RainerHahnekamp Config const plugin = { configs: { recommended: { plugins: { custom: { rules: { 'capitalized-classes': capitalizeClasses } } }, rules: { 'custom/capitalized-classes': 'error', '@typescript-eslint/no-unused-vars': 'off' } } } } export = plugin

RainerHahnekamp angular-eslint typescript-eslint eslint

RainerHahnekamp Where to go from here? ● ESQuery ○ https://ts-ast-viewer.com/ ● Testing ● Customizations ● Fixes ● Processors ○ Angular Template ○ CSS ○ ...

RainerHahnekamp https://ng-poland.pl/#workshops

RainerHahnekamp https://github.com/rainerhahnekamp/ng-eslint

RainerHahnekamp Thanks