v7.0.0

Author: cyrilletuzi

CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log
 
+## [7.0.0] - 2025-10-20
+
+### New naming conventions
+
+Angular 20 changed the naming conventions for class and file names:
+- no more class and file names suffix for components, directives and services:
+  - `ProductCardComponent` in `product-card.component.ts` => `ProductCard` in `product-card.ts`
+  - `ProductApiService` in `product-api.service.ts` => `ProductApi` in `product-api.ts`
+  - `MissingProductDirective` in `missing-product.directive.ts` => `MissingProduct` in `missing-product.ts`
+- suffix kept for the other concepts, but file name suffix separator changed from `.` to `-`:
+  - `CustomDatePipe` in `custom-date.pipe.ts` => `CustomDatePipe ` in `custom-date-pipe.ts`
+  - `ProductsPage` in `products.page.ts` => `ProductsPage ` in `products-page.ts`
+  - `authInterceptor` in `auth.interceptor.ts` => `authInterceptor ` in `auth-interceptor.ts`
+  - `authGuard` in `auth.guard.ts` => `authGuard ` in `auth-guard.ts`
+  - `dataResolver` in `data.resolver.ts` => `dataResolver ` in `data-resolver.ts`
+
+Angular refers to these 2 different naming conventions as:
+- the former 2016 style guide, up to Angular 19
+- the new 2025 style guide, which is the default since Angular 20
+
+**This extension now follows the new naming conventions by default.** But you can switch back to the legacy naming conventions in one click with the configuration helper (it must be done in each workspace).
+
+**As a reminder, this extension is not developed by the Angular team or affiliated to Google in any way. It is months of unpaid work by a single contributor. So if you do not like this change, I am not responsible for it, and again, you can switch back to the previous behavior.**
+
+"Copy settings from angular.json" will take into account `type` and `typeSeparator` options (which are automatically added when migrating an Angular 19 project to Angular 20 via `ng update`).
+
+Pro edition users can additionnaly:
+- set custom suffixes
+- set a suffix only for the class name but not for the file name
+- set a suffix only for the file name but not for the class name
+
+Also for the Pro edition users having custom schematics with `suffix`, a new `fileNameSuffix` property is introduced for the `schematic.json` configuration. For backward compatibility, it defaults to `.suffix`, but this behavior may be removed in the future. **It is strongly recommended to add an explicit `fileNameSuffix` to all your `schematic.json` using `suffix`.**
+
+### Other changes
+
+- `skipClassSuffix` option for components, directives and services is removed, as it is now the default behavior
+- Angular ESLint suffixes management (both in the configuration helper and the `angularEslintComponentSuffix` feature for custom schematics) is removed as it does not make sense anymore and as `angular-eslint` removed the rule from the recommended set in version 20
+
 ## [6.23.0] - 2024-12-27
 
 In the Pro edition, you can now enable automatic classes prefixes, for example to generate `MatButtonComponent` instead of `ButtonComponent` (given "mat" is set as the selector prefix). It is useful when doing a library of components.

walkthroughs/configuration.md

@@ -3,6 +3,7 @@
 Some common options can be customized in a one click with the configuration helper:
 
 - Copy settings from angular.json
+- Use legacy naming conventions ⚙️
 - Enable SCSS, Sass or Less styles ⚙️
 - Disable styles ⚙️
 - Enable external HTML templates ⚙️
@@ -13,7 +14,6 @@ Some common options can be customized in a one click with the configuration help
 - Disable block CSS display ⚙️
 - Enable shadow DOM ⚙️
 - Set the selector prefix ⚙️
-- Disable classes suffixes 💎
 - Force NgModules 💎
 - Force class interceptors 💎
 - Force class guards and resolvers 💎
@@ -41,6 +41,7 @@ This extension stores the configuration in VS Code *workspace* settings. It mean
 ## Copy settings from angular.json
 
 This extension uses its own configuration. But if you have an *official and valid* `angular.json` with some `schematics` settings, the extension can copy them. It should detect the following settings:
+- legacy naming conventions (`type` and `typeSeparator`)
 - SCSS, Sass or Less styles
 - no style
 - external HTML templates
@@ -50,6 +51,33 @@ This extension uses its own configuration. But if you have an *official and vali
 
 <br>
 
+## Use legacy naming conventions
+
+Angular 20 changed the naming conventions for class and file names:
+- no more class and file names suffix for components, directives and services:
+  - `ProductCardComponent` in `product-card.component.ts` => `ProductCard` in `product-card.ts`
+  - `ProductApiService` in `product-api.service.ts` => `ProductApi` in `product-api.ts`
+  - `MissingProductDirective` in `missing-product.directive.ts` => `MissingProduct` in `missing-product.ts`
+- suffix kept for the other concepts, but file name suffix separator changed from `.` to `-`:
+  - `CustomDatePipe` in `custom-date.pipe.ts` => `CustomDatePipe ` in `custom-date-pipe.ts`
+  - `ProductsPage` in `products.page.ts` => `ProductsPage ` in `products-page.ts`
+  - `authInterceptor` in `auth.interceptor.ts` => `authInterceptor ` in `auth-interceptor.ts`
+  - `authGuard` in `auth.guard.ts` => `authGuard ` in `auth-guard.ts`
+  - `dataResolver` in `data.resolver.ts` => `dataResolver ` in `data-resolver.ts`
+
+Angular refers to these 2 different naming conventions as:
+- the former 2016 style guide, up to Angular 19
+- the new 2025 style guide, which is the default since Angular 20
+
+Since its version 7, this extension follows the new naming conventions by default. But you can switch back to the legacy naming conventions.
+
+💎 Pro edition users can additionnaly (manually):
+- set custom suffixes
+- set a suffix only for the class name but not for the file name
+- set a suffix only for the file name but not for the class name
+
+<br>
+
 ## Enable SCSS, Sass or Less styles
 
 For projects with a design system still using CSS preprocessors (like SCSS for Angular Material or PrimeNG).
@@ -152,16 +180,6 @@ In the Pro edition, you can enable automatic classes prefixes, for example to ge
 
 <br>
 
-## 💎 Disable classes suffixes
-
-In the Pro edition, you can disable automatic classes suffixes, for example to generate `SomeButton` instead of `SomeButtonComponent`, or `SomeApiClient` instead of `SomeApiClientService`.
-
-This option allows to partly align with the upcoming [new Angular style guide](https://gist.github.com/jelbourn/0158b02cfb426e69c172db4ec92e3c0c), being discussed in [this RFC](https://github.com/angular/angular/discussions/58412).
-
-It has also been the standard in some design systems libraries since always, like Angular Material itself (it is `MatButton`, not `MatButtonComponent`).
-
-<br>
-
 ## 💎 Force NgModules
 
 In the Pro edition, if your project uses Angular <=13 or is not ready for standalone components yet.

walkthroughs/customSchematics.md

@@ -54,7 +54,7 @@ The extension uses Handlebars (`.hbs` files) as the templating syntax, which is
 
 Available expressions:
 - `{{name}}`               hello-world (raw user input)
-- `{{fileName}}`           hello-world or hello-world.suffix (kebab-cased user input)
+- `{{fileName}}`           hello-world or hello-worldfileNameSuffix (kebab-cased user input)
 - `{{className}}`          HelloWorld or HelloWorldSuffix (PascalCased user input)
 - `{{camelName}}`          helloWorld or helloWorldSuffix (camelCased user input)
 - `{{options.someOption}}` value of an option defined in schematic.json
@@ -100,11 +100,22 @@ Optional properties:
 - `description`: directly visible below the schematic label
 - `tooltipDescription`: displayed when the user click on the "?" icon
 - `pathSubfolder`: should the new files be generated directly inside the destination path (example: /path/to/hello-world.component.ts), which is the default, or inside a subfolder (example: path/to/hello-world/hello-world.component.ts), which is often a better option when multiple files are generated
-- `suffix`: lowercased suffix for file and class names (example: "component" suffix will result in hello-world.component file name and HelloWorldComponent class name)
 - `dependenciesRequired`: dependencies required to enable this schematic (example: ["@angular/core"]), it only makes sense if you share schematics between projects (otherwise if you create a schematic for a specific project, you already know you want to activate it)
 - `features`: list of special features enabled for this schematic, see below
 - `options`: list of options configurable by the user, see below
 
+### Suffixes
+
+2 optional properties allow to configure the suffix:
+- `suffix`: lowercased suffix for the entity (class or else) name (example: "component" will result in HelloWorldComponent `className` or "guard" will result in helloWorldGuard `camelName`)
+- `fileNameSuffix`: full suffix for the file name, including the separator (example: ".component" or "-component")
+
+While it is recommended to be consistent with the same suffix for the class and file names, there are 2 different options to allow to define only one of them (for example, add a suffix to the file name but not to the class).
+
+Note that for backward compatibility, if `suffix` is defined and `fileNameSuffix` is not defined, the later will default to `.suffix`:
+- but do not rely on this implicit behavior which may be deleted in the future, set an explicit `fileNameSuffix`
+- if you want a `suffix` but no `fileNameSuffix`, set the later to an empty string
+
 <br>
 
 ## Schematic options
@@ -239,11 +250,6 @@ Options reserved: `export`
 Should be enabled for all Angular schematics. Activates low-level Angular features, like checking the generation is done in a project configured in `angular.json`.
 </details>
 <details>
-<summary>angularEslintComponentSuffix</summary>
-
-Should be enabled for Angular component schematics using a `suffix` different from "component" (example: "page"). If Angular ESLint is installed, it will automatically configure it to allow this suffix.
-</details>
-<details>
 <summary>angularAddComponentRoute</summary>
 
 For Angular page component schematic, will ask and add a route in the closest `.routes.ts` or `-routing.module.ts` file.

walkthroughs/pro/configuration.md

@@ -3,6 +3,7 @@
 Some common options can be customized in a one click with the configuration helper:
 
 - Copy settings from angular.json
+- Use legacy naming conventions
 - Enable SCSS, Sass or Less styles
 - Disable styles
 - Enable external HTML templates
@@ -13,7 +14,6 @@ Some common options can be customized in a one click with the configuration help
 - Disable block CSS display
 - Enable shadow DOM
 - Set the selector prefix
-- Disable classes suffixes 💎
 - Force NgModules 💎
 - Force class interceptors 💎
 - Force class guards and resolvers 💎
@@ -39,6 +39,7 @@ This extension stores the configuration in VS Code *workspace* settings. It mean
 ## Copy settings from angular.json
 
 This extension uses its own configuration. But if you have an *official and valid* `angular.json` with some `schematics` settings, the extension can copy them. It should detect the following settings:
+- legacy naming conventions (`type` and `typeSeparator`)
 - SCSS, Sass or Less styles
 - no style
 - external HTML templates
@@ -48,6 +49,33 @@ This extension uses its own configuration. But if you have an *official and vali
 
 <br>
 
+## Use legacy naming conventions
+
+Angular 20 changed the naming conventions for class and file names:
+- no more class and file names suffix for components, directives and services:
+  - `ProductCardComponent` in `product-card.component.ts` => `ProductCard` in `product-card.ts`
+  - `ProductApiService` in `product-api.service.ts` => `ProductApi` in `product-api.ts`
+  - `MissingProductDirective` in `missing-product.directive.ts` => `MissingProduct` in `missing-product.ts`
+- suffix kept for the other concepts, but file name suffix separator changed from `.` to `-`:
+  - `CustomDatePipe` in `custom-date.pipe.ts` => `CustomDatePipe ` in `custom-date-pipe.ts`
+  - `ProductsPage` in `products.page.ts` => `ProductsPage ` in `products-page.ts`
+  - `authInterceptor` in `auth.interceptor.ts` => `authInterceptor ` in `auth-interceptor.ts`
+  - `authGuard` in `auth.guard.ts` => `authGuard ` in `auth-guard.ts`
+  - `dataResolver` in `data.resolver.ts` => `dataResolver ` in `data-resolver.ts`
+
+Angular refers to these 2 different naming conventions as:
+- the former 2016 style guide, up to Angular 19
+- the new 2025 style guide, which is the default since Angular 20
+
+Since its version 7, this extension follows the new naming conventions by default. But you can switch back to the legacy naming conventions.
+
+💎 In your Pro edition, you can additionnaly (manually):
+- set custom suffixes
+- set a suffix only for the class name but not for the file name
+- set a suffix only for the file name but not for the class name
+
+<br>
+
 ## Enable SCSS, Sass or Less styles
 
 For projects with a design system still using CSS preprocessors (like SCSS for Angular Material or PrimeNG).
@@ -150,16 +178,6 @@ In your Pro edition, you can enable automatic classes prefixes, for example to g
 
 <br>
 
-## 💎 Disable classes suffixes
-
-In your Pro edition, you can disable automatic classes suffixes, for example to generate `SomeButton` instead of `SomeButtonComponent`, or `SomeApiClient` instead of `SomeApiClientService`.
-
-This option allows to partly align with the upcoming [new Angular style guide](https://gist.github.com/jelbourn/0158b02cfb426e69c172db4ec92e3c0c), being discussed in [this RFC](https://github.com/angular/angular/discussions/58412).
-
-It has also been the standard in some design systems libraries since always, like Angular Material itself (it is `MatButton`, not `MatButtonComponent`).
-
-<br>
-
 ## 💎 Force NgModules
 
 In your Pro edition, if your project uses Angular <=13 or is not ready for standalone components yet.

walkthroughs/pro/customSchematics.md

@@ -44,7 +44,7 @@ The extension uses Handlebars (`.hbs` files) as the templating syntax, which is
 
 Available expressions:
 - `{{name}}`               hello-world (raw user input)
-- `{{fileName}}`           hello-world or hello-world.suffix (kebab-cased user input)
+- `{{fileName}}`           hello-world or hello-worldfileNameSuffix (kebab-cased user input)
 - `{{className}}`          HelloWorld or HelloWorldSuffix (PascalCased user input)
 - `{{camelName}}`          helloWorld or helloWorldSuffix (camelCased user input)
 - `{{options.someOption}}` value of an option defined in schematic.json
@@ -90,11 +90,22 @@ Optional properties:
 - `description`: directly visible below the schematic label
 - `tooltipDescription`: displayed when the user click on the "?" icon
 - `pathSubfolder`: should the new files be generated directly inside the destination path (example: /path/to/hello-world.component.ts), which is the default, or inside a subfolder (example: path/to/hello-world/hello-world.component.ts), which is often a better option when multiple files are generated
-- `suffix`: lowercased suffix for file and class names (example: "component" suffix will result in hello-world.component file name and HelloWorldComponent class name)
 - `dependenciesRequired`: dependencies required to enable this schematic (example: ["@angular/core"]), it only makes sense if you share schematics between projects (otherwise if you create a schematic for a specific project, you already know you want to activate it)
 - `features`: list of special features enabled for this schematic, see below
 - `options`: list of options configurable by the user, see below
 
+### Suffixes
+
+2 optional properties allow to configure the suffix:
+- `suffix`: lowercased suffix for the entity (class or else) name (example: "component" will result in HelloWorldComponent `className` or "guard" will result in helloWorldGuard `camelName`)
+- `fileNameSuffix`: full suffix for the file name, including the separator (example: ".component" or "-component")
+
+While it is recommended to be consistent with the same suffix for the class and file names, there are 2 different options to allow to define only one of them (for example, add a suffix to the file name but not to the class).
+
+Note that for backward compatibility, if `suffix` is defined and `fileNameSuffix` is not defined, the later will default to `.suffix`:
+- but do not rely on this implicit behavior which may be deleted in the future, set an explicit `fileNameSuffix`
+- if you want a `suffix` but no `fileNameSuffix`, set the later to an empty string
+
 <br>
 
 ## Schematic options
@@ -229,11 +240,6 @@ Options reserved: `export`
 Should be enabled for all Angular schematics. Activates low-level Angular features, like checking the generation is done in a project configured in `angular.json`.
 </details>
 <details>
-<summary>angularEslintComponentSuffix</summary>
-
-Should be enabled for Angular component schematics using a `suffix` different from "component" (example: "page"). If Angular ESLint is installed, it will automatically configure it to allow this suffix.
-</details>
-<details>
 <summary>angularAddComponentRoute</summary>
 
 For Angular page component schematic, will ask and add a route in the closest `.routes.ts` or `-routing.module.ts` file.