Is it possible to configure an Angular 7 (with CLI 7.x) project to use class name suffixes other than the default ones?
More specifically, for classes that represent dialog boxes, I want to use Dialog
in the end, and not DialogComponent
, which is unnecessarily long. And for classes that represent pages I want to use Page
, and not PageComponent
.
examples:
LoginDialog
instead of LoginDialogComponent
MainPage
instead of MainPageComponent
Simple renaming isn't possible, due to the tslint
rules preset within Angular.
Before Angular 11, linting was done using TSLint. TSlint has been deprecated and ESLint is now used.
In .eslintrc.js
file - In IONIC
and Angular <= v11
projects, Components can be created with a Page suffix to distinguish pages from 'components' used in pages. The following rule
adds Page as a known suffix.
'@angular-eslint/component-class-suffix': [
'warn',
{
suffixes: ['Component', 'Page'],
},
],
NOTE :- The above rule needs to be added in
"overrides": [
{ "rules": {
// add here
},
}
Open tslint.json
in the root of your project and update a component-class-suffix
property:
{
...
"component-class-suffix": [true, "Component", "View"]
...
}
Please notice Component should stay there if you want the default suffix to still be valid.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With