Eslint naming conventions (#19880)

* build(eslint): replace local rules with naming conventions

* revert relative js extension imports

* remove unused local rule

* build(eslint): uses recommended setup for import plugin

* chore(eslint): conver const to function to follow naming conventions

* chore: removes old file

* build(eslint): allows Ufm as prefix

* build(eslint): allows 'name' and 'extensions' as exports (umbraco-package.ts)

* build(eslint): typescript rules should ignore storybook

* chore(eslint): ignores eslint for vite definitions

* build(eslint): allows UPPER_CASE for properties

* build(eslint): ignores umbraco-package.ts files (unconventional exports)

* chore(storybook): fixes property editor stylesheet picker

* build(eslint): allows Manifest as prefix on interfaces

* build(eslint): allows underscore on protected members

* build(eslint): allows Meta as prefix on interfaces

* build(eslint): allows PascalCase for public members

* build(eslint): disables enforcement of booleans with verbs for now as it is too harsh

* chore(eslint): add private modifiers as required

* deprecates invalid constant name to replace with Umb prefix

* renames MediaValueType to comply with naming conventions

* chore(eslint): disable naming conventions for local router-slot package

* chore(eslint): follow naming conventions

* chore(eslint): disable naming conventions for property editor interfaces

* chore(eslint): follow naming conventions

* chore(storybook): fix story

* chore(eslint): follow naming conventions

* build(eslint): allows `_host` as public variable

* chore(eslint): follow naming conventions

* build(eslint): allows double leading underscore on public members

* build(eslint): matches #private and public modifiers

* build(eslint): ignores language files

* chore(eslint): ignores umbraco package file

* chore(eslint): follow naming conventions

* storybook lang

* chore(eslint): follow naming conventions

* chore(eslint): follow naming conventions

* chore(eslint): make _manager a little more open

* chore(eslint): some properties should be protected

* Update src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts

Co-authored-by: Copilot <[email protected]>

* Update src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts

Co-authored-by: Copilot <[email protected]>

* Update src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-image-cropper/image-cropper.element.ts

Co-authored-by: Copilot <[email protected]>

* proxy type for UrlParametersRecord

* _items deprecated property

* bring back ConditionTypes type

* bring back _items for trash bulk action

* ignorer deprecated proxies

* keep settingsDataContentTypeKey for satefy

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>
Co-authored-by: Niels Lyngsø <[email protected]>

Author: 3 people

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -140,10 +140,10 @@ class UmbStoryBookElement extends UmbLitElement {
 		new UmbModalManagerContext(this);
 		new UmbNotificationContext(this);
 
-		umbLocalizationRegistry.loadLanguage('en-us'); // register default language
+		umbLocalizationRegistry.loadLanguage('en'); // register default language
 
 		this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (appLanguageContext) => {
-			appLanguageContext.setLanguage('en-us'); // set default language
+			appLanguageContext?.setLanguage('en'); // set default language
 		});
 	}
 

src/Umbraco.Web.UI.Client/devops/eslint/rules/bad-type-import.cjs

@@ -1,27 +1,19 @@
 'use strict';
 
-const badTypeImportRule = require('./devops/eslint/rules/bad-type-import.cjs');
 const enforceElementSuffixOnElementClassNameRule = require('./devops/eslint/rules/enforce-element-suffix-on-element-class-name.cjs');
-const enforceUmbPrefixOnElementNameRule = require('./devops/eslint/rules/enforce-umb-prefix-on-element-name.cjs');
 const enforceUmbracoExternalImportsRule = require('./devops/eslint/rules/enforce-umbraco-external-imports.cjs');
 const ensureRelativeImportUseJsExtensionRule = require('./devops/eslint/rules/ensure-relative-import-use-js-extension.cjs');
-const exportedStringConstantNaming = require('./devops/eslint/rules/exported-string-constant-naming.cjs');
 const noDirectApiImportRule = require('./devops/eslint/rules/no-direct-api-import.cjs');
 const preferImportAliasesRule = require('./devops/eslint/rules/prefer-import-aliases.cjs');
 const preferStaticStylesLastRule = require('./devops/eslint/rules/prefer-static-styles-last.cjs');
-const umbClassPrefixRule = require('./devops/eslint/rules/umb-class-prefix.cjs');
 const noRelativeImportToImportMapModule = require('./devops/eslint/rules/no-relative-import-to-import-map-module.cjs');
 
 module.exports = {
-	'bad-type-import': badTypeImportRule,
 	'enforce-element-suffix-on-element-class-name': enforceElementSuffixOnElementClassNameRule,
-	'enforce-umb-prefix-on-element-name': enforceUmbPrefixOnElementNameRule,
 	'enforce-umbraco-external-imports': enforceUmbracoExternalImportsRule,
 	'ensure-relative-import-use-js-extension': ensureRelativeImportUseJsExtensionRule,
-	'exported-string-constant-naming': exportedStringConstantNaming,
 	'no-direct-api-import': noDirectApiImportRule,
 	'prefer-import-aliases': preferImportAliasesRule,
 	'prefer-static-styles-last': preferStaticStylesLastRule,
-	'umb-class-prefix': umbClassPrefixRule,
 	'no-relative-import-to-import-map-module': noRelativeImportToImportMapModule,
 };

src/Umbraco.Web.UI.Client/devops/eslint/rules/enforce-umb-prefix-on-element-name.cjs

@@ -14,10 +14,12 @@ import jsdoc from 'eslint-plugin-jsdoc';
 export default [
 	// Recommended config applied to all files
 	js.configs.recommended,
+	importPlugin.flatConfigs.recommended,
 	...tseslint.configs.recommended,
 	wcPlugin.configs['flat/recommended'],
 	litPlugin.configs['flat/recommended'], // We use the non typescript version to allow types to be defined in the jsdoc comments. This will allow js docs as an alternative to typescript types.
 	jsdoc.configs['flat/recommended'],
+	...storybook.configs['flat/recommended'],
 	localRules.configs.all,
 	eslintPluginPrettierRecommended,
 
@@ -39,35 +41,24 @@ export default [
 	// Global config
 	{
 		plugins: {
-			import: importPlugin,
 			'local-rules': localRules,
 		},
 		rules: {
 			semi: ['warn', 'always'],
 			'prettier/prettier': ['warn', { endOfLine: 'auto' }],
-			'no-unused-vars': 'off', //Let '@typescript-eslint/no-unused-vars' catch the errors to allow unused function parameters (ex: in interfaces)
 			'no-var': 'error',
-			...importPlugin.configs.recommended.rules,
 			'import/namespace': 'off',
 			'import/no-unresolved': 'off',
 			'import/order': ['warn', { groups: ['builtin', 'parent', 'sibling', 'index', 'external'] }],
 			'import/no-self-import': 'error',
 			'import/no-cycle': ['error', { maxDepth: 6, allowUnsafeDynamicCyclicDependency: true }],
-			'import/no-named-as-default': 'off', // Does not work with eslint 9
-			'import/no-named-as-default-member': 'off', // Does not work with eslint 9
 			'local-rules/prefer-static-styles-last': 'warn',
 			'local-rules/enforce-umbraco-external-imports': [
 				'error',
 				{
 					exceptions: ['@umbraco-cms', '@open-wc/testing', '@storybook', 'msw', '.', 'vite', 'uuid', 'diff'],
 				},
 			],
-			'local-rules/exported-string-constant-naming': [
-				'error',
-				{
-					excludedFileNames: ['umbraco-package'],
-				},
-			],
 			'jsdoc/check-tag-names': [
 				'warn',
 				{
@@ -81,6 +72,7 @@ export default [
 	// Pattern-specific overrides
 	{
 		files: ['**/*.ts'],
+		ignores: ['.storybook', '**/*.stories.ts', '**/umbraco-package.ts', 'src/assets/lang/*.ts'],
 		languageOptions: {
 			parserOptions: {
 				project: true,
@@ -90,14 +82,95 @@ export default [
 				...globals.browser,
 			},
 		},
+		...importPlugin.flatConfigs.typescript,
 		rules: {
+			'no-unused-vars': 'off', //Let '@typescript-eslint/no-unused-vars' catch the errors to allow unused function parameters (ex: in interfaces)
+			'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
 			'@typescript-eslint/no-non-null-assertion': 'off',
 			'@typescript-eslint/no-explicit-any': 'warn',
 			'@typescript-eslint/no-unused-vars': 'error',
 			'@typescript-eslint/consistent-type-exports': 'error',
 			'@typescript-eslint/consistent-type-imports': 'error',
 			'@typescript-eslint/no-import-type-side-effects': 'warn',
 			'@typescript-eslint/no-deprecated': 'warn',
+			'@typescript-eslint/naming-convention': [
+				'error',
+				// All private members should be camelCase with leading underscore
+				// This is to ensure that private members are not used outside the class, as they
+				// are not part of the public API.
+				// Example NOT OK: private myPrivateVariable
+				// Example OK: private _myPrivateVariable
+				{
+					selector: 'memberLike',
+					modifiers: ['private'],
+					format: ['camelCase'],
+					leadingUnderscore: 'require',
+					trailingUnderscore: 'forbid',
+				},
+				// All public members and variables should be camelCase without leading underscore
+				// Example: myPublicVariable, myPublicMethod
+				{
+					selector: ['variableLike', 'memberLike'],
+					modifiers: ['public'],
+					filter: {
+						regex: '^_host$',
+						match: false,
+					},
+					format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+					leadingUnderscore: 'allowDouble',
+					trailingUnderscore: 'forbid',
+				},
+				// All #private members and variables should be camelCase without leading underscore
+				// Example: #myPublicVariable, #myPublicMethod
+				{
+					selector: ['variableLike', 'memberLike'],
+					modifiers: ['#private'],
+					format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+					leadingUnderscore: 'allowDouble',
+					trailingUnderscore: 'forbid',
+				},
+				// All protected members and variables should be camelCase with optional leading underscore (if needed to be pseudo-private)
+				// Example: protected myPublicVariable, protected _myPublicMethod
+				{
+					selector: ['variableLike', 'memberLike'],
+					modifiers: ['protected'],
+					format: ['camelCase'],
+					leadingUnderscore: 'allow',
+					trailingUnderscore: 'forbid',
+				},
+				// Allow quoted properties, as they are often used in JSON or when the property name is not a valid identifier
+				// This is to ensure that properties can be used in JSON or when the property name
+				// is not a valid identifier (e.g. contains spaces or special characters)
+				// Example: { "umb-some-component": UmbSomeComponent }
+				{
+					selector: ['objectLiteralProperty', 'typeProperty', 'enumMember'],
+					modifiers: ['requiresQuotes'],
+					format: null,
+				},
+				// All (exported) types should be PascalCase with leading 'Umb' or 'Example'
+				// Example: UmbExampleType, ExampleTypeLike
+				{
+					selector: 'typeLike',
+					modifiers: ['exported'],
+					format: ['PascalCase'],
+					prefix: ['Umb', 'Ufm', 'Manifest', 'Meta', 'Example']
+				},
+				// All exported string constants should be UPPER_CASE with leading 'UMB_'
+				// Example: UMB_EXAMPLE_CONSTANT
+				{
+					selector: 'variable',
+					modifiers: ['exported', 'const'],
+					types: ['string', 'number', 'boolean'],
+					format: ['UPPER_CASE'],
+					prefix: ['UMB_'],
+				},
+				// Allow destructured variables to be named as they are in the object
+				{
+					selector: "variable",
+					modifiers: ["destructured"],
+					format: null,
+				},
+			],
 		},
 	},
 	{
@@ -109,5 +182,4 @@ export default [
 			},
 		},
 	},
-	...storybook.configs['flat/recommended'],
 ];

src/Umbraco.Web.UI.Client/devops/eslint/rules/exported-string-constant-naming.cjs

@@ -8,7 +8,7 @@ import type { UmbProblemDetails } from '@umbraco-cms/backoffice/resources';
 @customElement('umb-installer-error')
 export class UmbInstallerErrorElement extends UmbLitElement {
 	@state()
-	_error?: UmbProblemDetails;
+	private _error?: UmbProblemDetails;
 
 	private _installerContext?: UmbInstallerContext;
 

src/Umbraco.Web.UI.Client/devops/eslint/rules/umb-class-prefix.cjs

@@ -52,7 +52,7 @@ export class UmbUpgraderViewElement extends LitElement {
 
 				<p>Simply click <strong>continue</strong> below to be guided through the rest of the upgrade.</p>
 
-				<form id="authorizeUpgradeForm" @submit=${this._handleSubmit}>
+				<form id="authorizeUpgradeForm" @submit=${this.#handleSubmit}>
 					<p>
 						<uui-button
 							data-test="continue-button"
@@ -80,7 +80,7 @@ export class UmbUpgraderViewElement extends LitElement {
 		return html` ${this.fetching ? html`<div class="center"><uui-loader></uui-loader></div>` : this._renderLayout()} `;
 	}
 
-	_handleSubmit = async (e: SubmitEvent) => {
+	#handleSubmit = async (e: SubmitEvent) => {
 		e.preventDefault();
 		this.dispatchEvent(new CustomEvent('onAuthorizeUpgrade', { detail: e, bubbles: true }));
 	};