feat(eslint-config): introducing shared eslint-config for esl projects

.commitlintrc.yml

@@ -62,6 +62,9 @@ rules:
       - patch
       - deps
       - deps-dev
-      - lint
+      - eslint-plugin
+      - eslint-config
       - e2e
       - ci
+      # Deprecated scopes:
+      - lint

.github/workflows/validate.yml

@@ -67,4 +67,4 @@ jobs:
       - name: Install NPM Dependencies
         run: npm ci
       - name: Run ESLint Plugin Tests
-        run: npm run test -w eslint
+        run: npm run test -w eslint-plugin

.gitignore

@@ -12,7 +12,8 @@ node_modules
 *.tgz
 target
 site/dist
-eslint/dist
+
+eslint-plugin/dist
 
 # Generated surces
 /modules

.releaserc.yml

@@ -68,14 +68,17 @@ plugins:
         - package.json
         - package-lock.json
         - site/package.json
-        - eslint/package.json
+        - eslint-config/package.json
+        - eslint-plugin/package.json
       message: "chore(release): ${nextRelease.version} \n\n${nextRelease.notes}"
 
   - - "@semantic-release/github"
     - assets:
         - path: ./exadel-esl-*.tgz
           label: Released Core NPM Tarball
         - path: ./exadel-eslint-plugin-esl-*.tgz
-          label: Released ESLint NPM Tarball
+          label: Released ESLint Config NPM Tarball
+        - path: ./exadel-eslint-config-esl-*.tgz
+          label: Released ESLint Plugin NPM Tarball
         - path: CHANGELOG.md
           label: Changelog

docs/DEVELOPMENT.md

@@ -61,6 +61,7 @@ ESL codebase is written using TypeScript and LESS CSS-preprocessor.
 
 ESL uses the following tools to keep codebase quality
 - ESLint to lint scripts
+- Own ESLint shared configuration (see [eslint-config](../eslint-config) sub-package)
 - StyleLint to lint styles
 - Jest to run unit tests
 - CommitLint to check commit message format
@@ -112,9 +113,13 @@ ESL project consists of the following directories:
   - [🔧 webpack.config.js](../site/webpack.config.js) - webpack build file for demo pages
 
 
-- [📁 eslint](../eslint) - sub-package root for ESL ESLint plugin 
-  - [📁 src](../eslint/src) - ESLint plugin sources
-  - [📁 test](../eslint/test) - ESLint plugin tests
+- [📁 eslint-plugin](../eslint-plugin) - sub-package root for ESL ESLint plugin 
+  - [📁 src](../eslint-plugin/src) - ESLint plugin sources
+  - [📁 test](../eslint-plugin/test) - ESLint plugin tests
+
+- [📁 eslint-config](../eslint-config) - sub-package root for ESL ESLint shared configuration
+  - [📁 rules](../eslint-config/rules) - ESLint shared configuration rule sets
+  - [📄 index.js](../eslint-config/index.js) - ESLint shared configuration main file
 
 
 - [📁 build](../build) - library common build scripts

eslint-config/README.md

@@ -0,0 +1,59 @@
+# [ESL](../../../) Shared ESLint Configuration
+
+Authors: *Anastasiya Lesun, Alexey Stsefanovich (ala'n)*.
+
+<a name="intro"></a>
+
+Packages maintained by ESL Team often use ESLint to ensure code quality and consistency. 
+To simplify the process of configuring ESLint for these packages, we have developed a shared ESLint configuration. 
+This configuration is designed to be used as a base for ESLint configuration in projects that use ESL package, 
+or desided to follow ESL source code style.
+
+<a name="installation"></a>
+
+### Installation
+
+To use ESL shared ESLint configuration, you need to install it as npm package:
+
+```bash
+npm install --save-dev @exadel/eslint-config-esl
+```
+
+Ensure that you have the ESLint package of version 9.0.0 or higher, shared configuration distributed only as Flat ESLint config.
+
+Once installed, the configuration needs to be added in eslint configuration file:
+
+```js
+module.exports = [
+    // ESLint configuration ...
+
+    // Apply ESL Shared ESLint Configuration
+    ...require('@exadel/eslint-config-esl').typescript,
+    ...require('@exadel/eslint-config-esl').recommended,
+];
+```
+
+<a name="configuration"></a>
+
+### Configuration
+
+There are no additional configuration options for ESL Shared ESLint Configuration at that moment. 
+Please be aware that we asre in progress of standardizing rule list and currently considering of suporrting EcmaScript in addition to TypeScript.
+
+Still yor are able to override any rule from the configuration in your project's ESLint configuration file 
+by declaring it in the `rules` section of the configuration file after applying the shared configuration.
+
+### Inner Plugins
+
+ESL Shared ESLint Configuration includes several inner plugins that are used to provide additional rules and configurations for ESLint.
+Here is the list of included plugins and thair ESLint aliases:
+
+- `@stylistic` - code style rules from [@stylistic](https://eslint.style/) project.
+- `typescript-eslint` - TypeScript specific rules from [TypeScript ESLint](https://typescript-eslint.io/) project.
+- `import` - rules for imports from [eslint-plugin-import-x](https://www.npmjs.com/package/eslint-plugin-import-x);
+- `tsdoc` - rules for TSDoc comments from [eslint-plugin-tsdoc](https://www.npmjs.com/package/eslint-plugin-tsdoc);
+- `sonarjs` - rules for code quality from [eslint-plugin-sonarjs](https://www.npmjs.com/package/eslint-plugin-sonarjs); 
+  Note: uses 1.*.* version of the plugin due to incompatibility with flat config.
+- `editorconfig` - rules for EditorConfig from [eslint-plugin-editorconfig](https://www.npmjs.com/package/eslint-plugin-editorconfig);
+
+All mentioned plugins could be used from shared configuration without additional installation.

eslint-config/index.js

@@ -0,0 +1,37 @@
+/** Default TS Configuration */
+module.exports.typescript = require('./rules/eslint.config.language');
+
+/** Shared plugins */
+module.exports.plugins = {
+  get '@stylistic' () {
+    return require('@stylistic/eslint-plugin')
+  },
+  get 'editorconfig'() {
+    return require('eslint-plugin-editorconfig');
+  },
+  get 'import'() {
+    return require('eslint-plugin-import-x');
+  },
+  get 'tsdoc'() {
+    return require('eslint-plugin-tsdoc');
+  },
+  get 'sonarjs'() {
+    return require('eslint-plugin-sonarjs');
+  },
+  get 'typescript-eslint' () {
+    return require('typescript-eslint')
+  }
+};
+
+/** Default ESLint Configuration */
+module.exports.recommended = [
+  ...require('./rules/eslint.config.codestyle'),
+  ...require('./rules/eslint.config.coderules'),
+  ...require('./rules/eslint.config.sonarjs'),
+  ...require('./rules/eslint.config.stylistic'),
+  ...require('./rules/eslint.config.editorconfig'),
+  ...require('./rules/eslint.config.import'),
+  ...require('./rules/eslint.config.tsdoc')
+];
+
+// TODO: Separate ES / TS builder

eslint-config/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@exadel/eslint-config-esl",
+  "version": "5.0.0-beta.34",
+  "keywords": [
+    "eslint",
+    "eslint-config",
+    "esl"
+  ],
+  "license": "MIT",
+  "description": "Shared ESLint config used by ESL (@exadel/esl) team. Internal projects usage.",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "rules/*.js"
+  ],
+  "scripts": {
+    "test": ""
+  },
+  "dependencies": {
+    "@eslint/js": "^9.11.1",
+    "@stylistic/eslint-plugin": "^2.8.0",
+    "eslint-plugin-editorconfig": "^4.0.3",
+    "eslint-plugin-import-x": "^4.3.0",
+    "eslint-plugin-sonarjs": "^1.0.4",
+    "eslint-plugin-tsdoc": "^0.3.0",
+    "typescript-eslint": "^8.7.0"
+  },
+  "peerDependencies": {
+    "eslint": ">=9.0.0"
+  }
+}

linting/eslint.config.coderules.js → eslint-config/rules/eslint.config.coderules.js

@@ -275,12 +275,6 @@ module.exports = [
       '@typescript-eslint/no-unnecessary-type-arguments': "off"
     }
   },
-  {
-    files: ["**/polyfills/**/*.ts"],
-    rules: {
-      'no-new-wrappers': "off"
-    }
-  },
   {
     files: ["**/*.test.ts", "**/*.spec.ts"],
     rules: {

linting/eslint.config.editorconfig.js → eslint-config/rules/eslint.config.editorconfig.js

@@ -1,9 +1,7 @@
-const editorconfig = require('eslint-plugin-editorconfig');
-
 module.exports = [
   {
     plugins: {
-      editorconfig
+      editorconfig: require('eslint-plugin-editorconfig')
     },
     rules: {
       // Enforce charset check

linting/eslint.config.import.js → eslint-config/rules/eslint.config.import.js

@@ -1,11 +1,8 @@
-const importPlugin = require('eslint-plugin-import-x');
-
 module.exports = [
   {
     plugins: {
-      'import': importPlugin
+      'import': require('eslint-plugin-import-x')
     },
-    files: ["eslint/src/**/*.ts"],
     rules: {
       // Enforce a convention in module import order
       'import/order': [
@@ -33,16 +30,5 @@ module.exports = [
       // Deprecate cyclic dependencies
       'import/no-cycle': 'error'
     }
-  },
-  {
-    files: ["site/**/*.ts"],
-    rules: {
-      'no-restricted-imports': ["error", {
-        "patterns": [{
-          "group": ["../../**/modules/**", "../../**/polyfills/**"],
-          'message': "Do not import from src/modules directly. Use the `@exadel/esl` package resolved by NPM workspaces instead."
-        }]
-      }]
-    }
   }
 ]

linting/eslint.config.language.js → eslint-config/rules/eslint.config.language.js

@@ -1,10 +1,9 @@
-const tseslint = require('typescript-eslint');
 module.exports = [
   {
     languageOptions: {
       ecmaVersion: 2017,
       sourceType: "module",
-      parser: tseslint.parser,
+      parser: require('typescript-eslint').parser,
       parserOptions: {
         projectService: true
       }

linting/eslint.config.sonarjs.js → eslint-config/rules/eslint.config.sonarjs.js

@@ -1,9 +1,7 @@
-const sonarjs = require('eslint-plugin-sonarjs');
-
 module.exports = [
   {
     plugins: {
-      sonarjs
+      sonarjs: require('eslint-plugin-sonarjs')
     },
     rules: {
       /** Cognitive Complexity is a measure of how hard the control flow of a function is to understand.

linting/eslint.config.stylistic.js → eslint-config/rules/eslint.config.stylistic.js

@@ -1,9 +1,7 @@
-const stylistic = require('@stylistic/eslint-plugin');
-
 module.exports = [
   {
     plugins: {
-      '@stylistic': stylistic
+      '@stylistic': require('@stylistic/eslint-plugin')
     },
     rules: {
       '@stylistic/arrow-parens': ['warn', 'always'],

linting/eslint.config.tsdoc.js → eslint-config/rules/eslint.config.tsdoc.js

@@ -1,9 +1,7 @@
-const tsdoc = require('eslint-plugin-tsdoc');
-
 module.exports = [
   {
     plugins: {
-      tsdoc
+      tsdoc: require('eslint-plugin-tsdoc')
     },
     rules: {
       // Enable TS Doc syntax check

eslint/README.md → eslint-plugin/README.md

@@ -17,8 +17,9 @@ To use custom ESLint plugin, you need to install it as npm package:
 npm install --save-dev @exadel/eslint-plugin-esl
 ```
 
-Once installed, the plugin needs to be added in eslint configuration file:
+Once installed, the plugin needs to be added in eslint configuration file.
 
+For ESLint 8.0.0 with legacy config:
 ```json
 {
   // ...
@@ -35,6 +36,16 @@ Or in YAML:
     - "@exadel/esl"
 ```
 
+For ESLint +8.0.0 with Flat config:
+```js
+module.exports = [
+    // ESLint configuration
+
+    // Apply Recomended ESL ESLint Plugin checks
+    ...require('@exadel/eslint-plugin-esl').recommended,
+];
+```
+
 <a name="configuration"></a>
 
 ### Configuration
@@ -54,24 +65,24 @@ However, you still have the option to manually manage the rules if needed.
 
 The ESLint plugin provides a separate rule for each deprecated utility within the ESL project, that's considered to be deprecated. Below is the list of them:
 
-- `@exadel/esl/deprecated-4/alert-action-params` - Rule for deprecated `AlertActionParams` alias for `ESLAlertActionParams`.
-- `@exadel/esl/deprecated-4/generate-uid` - Rule for deprecated `generateUId` alias for `randUID`.
-- `@exadel/esl/deprecated-4/deep-compare` - Rule for deprecated `deepCompare` alias for `isEqual`.
-- `@exadel/esl/deprecated-4/event-utils` - Rule for deprecated `EventUtils` alias for `ESLEventUtils`.
-- `@exadel/esl/deprecated-4/panel-action-params` - Rule for deprecated `PanelActionParams` alias for `ESLPanelActionParams`.
-- `@exadel/esl/deprecated-4/popup-action-params` - Rule for deprecated `PopupActionParams` alias for `ESLPopupActionParams`.
-- `@exadel/esl/deprecated-4/traversing-query` - Rule for deprecated `TraversingQuery` alias for `ESLTraversingQuery`.
-- `@exadel/esl/deprecated-4/toggleable-action-params` - Rule for deprecated `ToggleableActionParams` alias for `ESLToggleableActionParams`.
-- `@exadel/esl/deprecated-4/tooltip-action-params` - Rule for deprecated `TooltipActionParams` alias for `ESLTooltipActionParams`.
+- `@exadel/esl/deprecated-4-alert-action-params` - Rule for deprecated `AlertActionParams` alias for `ESLAlertActionParams`.
+- `@exadel/esl/deprecated-4-generate-uid` - Rule for deprecated `generateUId` alias for `randUID`.
+- `@exadel/esl/deprecated-4-deep-compare` - Rule for deprecated `deepCompare` alias for `isEqual`.
+- `@exadel/esl/deprecated-4-event-utils` - Rule for deprecated `EventUtils` alias for `ESLEventUtils`.
+- `@exadel/esl/deprecated-4-panel-action-params` - Rule for deprecated `PanelActionParams` alias for `ESLPanelActionParams`.
+- `@exadel/esl/deprecated-4-popup-action-params` - Rule for deprecated `PopupActionParams` alias for `ESLPopupActionParams`.
+- `@exadel/esl/deprecated-4-traversing-query` - Rule for deprecated `TraversingQuery` alias for `ESLTraversingQuery`.
+- `@exadel/esl/deprecated-4-toggleable-action-params` - Rule for deprecated `ToggleableActionParams` alias for `ESLToggleableActionParams`.
+- `@exadel/esl/deprecated-4-tooltip-action-params` - Rule for deprecated `TooltipActionParams` alias for `ESLTooltipActionParams`.
 
-- `@exadel/esl/deprecated-4/media-rule-list-parse` - Rule for deprecated `ESLMediaRuleList.parse` alias for `ESLMediaRuleList.parseQuery` or `ESLMediaRuleList.parseTuple`.
+- `@exadel/esl/deprecated-4-media-rule-list-parse` - Rule for deprecated `ESLMediaRuleList.parse` alias for `ESLMediaRuleList.parseQuery` or `ESLMediaRuleList.parseTuple`.
 
-- `@exadel/esl/deprecated-4/base-decorators-path` - Rule for deprecated `@attr`, `@prop`, `@boolAttr`, `@jsonAttr`, `@listen` import paths.
+- `@exadel/esl/deprecated-4-base-decorators-path` - Rule for deprecated `@attr`, `@prop`, `@boolAttr`, `@jsonAttr`, `@listen` import paths.
 
-- `@exadel/esl/deprecated-5/alert-action-params` - Rule for deprecated `AlertActionParams` alias for `ESLAlertActionParams`.
-- `@exadel/esl/deprecated-5/panel-action-params` - Rule for deprecated `PanelActionParams` alias for `ESLPanelActionParams`.
-- `@exadel/esl/deprecated-5/popup-action-params` - Rule for deprecated `PopupActionParams` alias for `ESLPopupActionParams`.
-- `@exadel/esl/deprecated-5/tooltip-action-params` - Rule for deprecated `TooltipActionParams` alias for `ESLTooltipActionParams`.
+- `@exadel/esl/deprecated-5-alert-action-params` - Rule for deprecated `AlertActionParams` alias for `ESLAlertActionParams`.
+- `@exadel/esl/deprecated-5-panel-action-params` - Rule for deprecated `PanelActionParams` alias for `ESLPanelActionParams`.
+- `@exadel/esl/deprecated-5-popup-action-params` - Rule for deprecated `PopupActionParams` alias for `ESLPopupActionParams`.
+- `@exadel/esl/deprecated-5-tooltip-action-params` - Rule for deprecated `TooltipActionParams` alias for `ESLTooltipActionParams`.
 
 These rules can be configured manually inside the `rules` section of your ESLint configuration file.
 

eslint/src/index.ts → eslint-plugin/src/index.ts

@@ -41,17 +41,20 @@ const plugin = {
   configs
 };
 
-// ESLint 9 compatibility
-Object.assign(plugin.configs, {
-  'recommended': [{
+/** Recommended configuration for Flat ESLint Config*/
+export const recommended = [
+  {
     plugins: {
       '@exadel/esl': plugin
     },
     rules: {
       ...buildDefault(DEPRECATED_4_RULES, 'error'),
       ...buildDefault(DEPRECATED_5_RULES, 'warn')
     }
-  }]
-});
+  }
+];
+
+// ESLint 9 compatibility
+Object.assign(plugin.configs, {recommended});
 
 export default plugin;