Custom ESLint Rules with Angular Schematics
summary
A custom ESLint rule detects imports from "ui/search-bar", uses the AST (via ast explorer and the TypeScript parser) to report and provide a fixer that rewrites them to "tns-core-modules/ui/search-bar", and is packaged as an ESLint plugin. A schematic reads project files via the Schematics tree, runs linter.verifyAndFix on each .ts/.js file, and overwrites changed files. Integration with ng update runs the migration automatically during package upgrades, and the demo shows the automated fixes applying successfully.
AI-written summary · about
chapters (7)
- 0:00Introduction and goals
- 1:45Understanding ESLint
- 5:03Abstract Syntax Trees
- 8:00Angular update workflows
- 9:31Building custom ESLint rules
- 17:11Distributing ESLint plugins
- 19:33Integrating into Angular
related talks
32mMigrating breaking changes with TSLint and Schematics
41mLong term success of your Angular projects
37mLong term success of your Angular projects with automated architecture validation!
18mEnforcing Your Design System with ESLint (⚡️)
28mSetting Up ESLint and TypeScript for React
06mTSLint to ESLint in 5 minutes
31mAutomated Scaffolding with Schematics (Angular)
14mAngular Schematics for Better Productivity