ESLint: Low Hanging Fruits

A codebase without @Input() but only input()? No *ngif but @if? How to enforce that? We know that ESLint is the ideal tool for maintaining code quality, but standard linting rules have their limits. Creating custom rules might seem daunting, especially when terms like Abstract Syntax Tree (AST) and flat config show up. Don’t be intimidated. ESLint customization is actually very straightforward. With a few key concepts, you can easily extend its functionality, and this is exactly what my talk will cover.

Transcript

1. RainerHahnekamp Rainer Hahnekamp 21. August 2024 Angular Warsaw Low Hanging Fruits ESLint
2. 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
3. RainerHahnekamp Low Hanging Fruits
4. RainerHahnekamp Agenda • Writing simple ESLint rules • Understanding the Configuration
5. RainerHahnekamp Legacy and Flat Config • How to know? ◦ Flat: eslint.config.[m]js ◦ Legacy: .eslintrc.json legacy • Flat is default since angular-eslint 18
6. RainerHahnekamp MVP: Define Plugin export default { plugins: { custom: { rules: { 'capitalized-classes': { create(context) { return { ClassDeclaration(node) { context.report({node, message: "This is a class"}) } }; } } } } } }
7. RainerHahnekamp https://estools.github.io/esquery/
8. 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"}) } } // ...
9. 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' }) } // ...
10. RainerHahnekamp TypeScript Support I: Configuration Helper import tseslint from 'typescript-eslint'; export default tseslint.config()
11. RainerHahnekamp TypeScript Support I: Type Checking // @ts-check import tseslint from 'typescript-eslint'; export default tseslint.config()
12. RainerHahnekamp TypeScript Support I: Recommended ESLint rules // @ts-check import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended )
13. 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, )
14. 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' } })
15. 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' } })
16. RainerHahnekamp TypeScript II: Typed Rule Creator import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => '');
17. RainerHahnekamp TypeScript II: Typed Plugin import {ESLintUtils} from "@typescript-eslint/utils"; const createRule = ESLintUtils.RuleCreator(name => ''); const capitalizeClasses = createRule({ name: 'capitalize-class' })
18. 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: [] } })
19. 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) {...} })
20. 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'
21. RainerHahnekamp TypeScript II: Typed Plugin const plugin = { plugins: { custom: { rules: { 'capitalized-classes': capitalizeClasses } } } } export = plugin
22. 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, )
23. 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
24. RainerHahnekamp angular-eslint typescript-eslint eslint
25. RainerHahnekamp Where to go from here? • ESQuery ◦ https://ts-ast-viewer.com/ • Testing • Customizations • Fixes • Processors ◦ Angular Template ◦ CSS ◦ ...
26. RainerHahnekamp https://ng-poland.pl/#workshops
27. RainerHahnekamp https://github.com/rainerhahnekamp/ng-eslint
28. RainerHahnekamp Thanks