add support for angular formatting (#177)

Signed-off-by: Kangrui Ye <[email protected]>
cloudflightio · Aug 31, 2023 · a4a72b3 · a4a72b3
1 parent 442403a
commit a4a72b3
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "private": true,
     "volta": {
         "node": "18.16.0",

diff --git a/packages/eslint-plugin-angular/README.md b/packages/eslint-plugin-angular/README.md
@@ -9,7 +9,7 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.19.1",
+"@cloudflight/eslint-plugin-typescript": ">=0.20.0",
 "@rushstack/eslint-patch": "1.2.0",
 "eslint": ">=8.0.0 <9.0.0"
 ```
@@ -46,3 +46,36 @@ module.exports = {
     ...
 };
 ```
+
+## Formatting
+
+This package also includes configs for formatting typescript.
+
+In your `package.json` add the following:
+
+```
+"devDependencies": {
+    ...
+    "@cloudflight/eslint-plugin-angular": "<version>",
+    ...
+  }
+```
+
+Create a new file called `.eslintrc.format.js` and add the following:
+
+```
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+    root: true,
+    plugins: ['@cloudflight/typescript'],
+    extends: ['plugin:@cloudflight/angular/formatting'],
+    ignorePatterns: ['jest.config*.ts'],
+    env: {
+        es6: true,
+        node: true,
+    },
+};
+```
+
+With the command `eslint . --config .eslintrc.format.js` your project can be checked for formatting violations.
diff --git a/packages/eslint-plugin-angular/package.json b/packages/eslint-plugin-angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-angular",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "Cloudflight eslint-plugin & eslint-config for angular",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-angular/src/configs/index.ts b/packages/eslint-plugin-angular/src/configs/index.ts
@@ -1,11 +1,13 @@
 import {TSESLint} from '@typescript-eslint/utils';
 
-import {RecommendedConfig} from './recommended/recommended.config';
-import {RecommendedHtmlConfig} from './recommended-html/recommended-html.config';
+import {FormatConfig, RecommendedConfig} from './recommended/recommended.config';
+import {FormattingHtmlConfig, RecommendedHtmlConfig} from './recommended-html/recommended-html.config';
 import {RecommendedTypescriptConfig} from './recommended-typescript/recommended-typescript.config';
 
 export const configs: Record<string, TSESLint.Linter.Config> = {
     'recommended-typescript': RecommendedTypescriptConfig,
     'recommended-html': RecommendedHtmlConfig,
+    'html-formatting': FormattingHtmlConfig,
     recommended: RecommendedConfig,
+    formatting: FormatConfig,
 };
diff --git a/packages/eslint-plugin-angular/src/configs/recommended-html/recommended-html.config.ts b/packages/eslint-plugin-angular/src/configs/recommended-html/recommended-html.config.ts
@@ -2,13 +2,23 @@ import {TSESLint} from '@typescript-eslint/utils';
 
 import {angularTemplateEslintRules} from './rules/angular-eslint-template';
 import {customRules} from './rules/custom';
+import {formatAngularTemplateEslintRules} from './rules/format';
 
 export const RecommendedHtmlConfig: TSESLint.Linter.Config = {
     plugins: ['@cloudflight/angular', '@angular-eslint/template'],
     parser: '@angular-eslint/template-parser',
-    extends: [],
+    extends: ['plugin:@angular-eslint/template/accessibility', 'plugin:@angular-eslint/template/recommended'],
     rules: {
         ...angularTemplateEslintRules,
         ...customRules,
     },
 };
+
+export const FormattingHtmlConfig: TSESLint.Linter.Config = {
+    plugins: ['@cloudflight/angular', '@angular-eslint/template'],
+    parser: '@angular-eslint/template-parser',
+    extends: [],
+    rules: {
+        ...formatAngularTemplateEslintRules,
+    },
+};
diff --git a/packages/eslint-plugin-angular/src/configs/recommended-html/rules/angular-eslint-template.ts b/packages/eslint-plugin-angular/src/configs/recommended-html/rules/angular-eslint-template.ts
@@ -3,17 +3,15 @@ import {TSESLint} from '@typescript-eslint/utils';
 const pluginPrefix = '@angular-eslint/template';
 
 export const angularTemplateEslintRules: TSESLint.Linter.RulesRecord = {
-    [`${pluginPrefix}/alt-text`]: ['error'],
-    [`${pluginPrefix}/banana-in-box`]: ['error'],
     [`${pluginPrefix}/button-has-type`]: ['error'],
-    [`${pluginPrefix}/elements-content`]: ['error'],
     [`${pluginPrefix}/eqeqeq`]: [
         'off', // disable it for now since it does not work correctly
         {
             allowNullOrUndefined: true,
         },
     ],
-    [`${pluginPrefix}/interactive-supports-focus`]: ['error'],
+    // does not work with custom input components
+    [`${pluginPrefix}/label-has-associated-control`]: 'off',
     [`${pluginPrefix}/no-any`]: ['error'],
     [`${pluginPrefix}/no-call-expression`]: [
         'error',
@@ -25,8 +23,6 @@ export const angularTemplateEslintRules: TSESLint.Linter.RulesRecord = {
     [`${pluginPrefix}/no-duplicate-attributes`]: ['error'],
     [`${pluginPrefix}/no-inline-styles`]: ['error'],
     [`${pluginPrefix}/no-interpolation-in-attributes`]: ['error'],
-    [`${pluginPrefix}/no-negated-async`]: ['error'],
     [`${pluginPrefix}/no-positive-tabindex`]: ['error'],
-    [`${pluginPrefix}/role-has-required-aria`]: ['error'],
-    [`${pluginPrefix}/valid-aria`]: ['error'],
+    [`${pluginPrefix}/use-track-by-function`]: ['error'],
 };
diff --git a/packages/eslint-plugin-angular/src/configs/recommended-html/rules/format.ts b/packages/eslint-plugin-angular/src/configs/recommended-html/rules/format.ts
@@ -0,0 +1,8 @@
+import {TSESLint} from '@typescript-eslint/utils';
+
+const pluginPrefix = '@angular-eslint/template';
+
+export const formatAngularTemplateEslintRules: TSESLint.Linter.RulesRecord = {
+    [`${pluginPrefix}/attributes-order`]: 'error',
+    [`${pluginPrefix}/no-interpolation-in-attributes`]: 'error',
+};
diff --git a/packages/eslint-plugin-angular/src/configs/recommended/recommended.config.ts b/packages/eslint-plugin-angular/src/configs/recommended/recommended.config.ts
@@ -13,3 +13,17 @@ export const RecommendedConfig: TSESLint.Linter.Config = {
         },
     ],
 };
+
+export const FormatConfig: TSESLint.Linter.Config = {
+    plugins: ['@cloudflight/angular'],
+    overrides: [
+        {
+            files: ['*.html'],
+            extends: ['plugin:@cloudflight/angular/html-formatting'],
+        },
+        {
+            files: ['*.ts'],
+            extends: ['plugin:@cloudflight/typescript/formatting'],
+        },
+    ],
+};
diff --git a/packages/eslint-plugin-node/README.md b/packages/eslint-plugin-node/README.md
@@ -9,7 +9,7 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.19.1",
+"@cloudflight/eslint-plugin-typescript": ">=0.20.0",
 "@rushstack/eslint-patch": "1.2.0",
 "eslint": ">=8.0.0 <9.0.0"
 ```

diff --git a/packages/eslint-plugin-node/package.json b/packages/eslint-plugin-node/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-node",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "Cloudflight eslint-plugin & eslint-config for node",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-react/README.md b/packages/eslint-plugin-react/README.md
@@ -9,7 +9,7 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.19.1",
+"@cloudflight/eslint-plugin-typescript": ">=0.20.0",
 "@rushstack/eslint-patch": "1.2.0",
 "eslint": ">=8.0.0 <9.0.0"
 ```

diff --git a/packages/eslint-plugin-react/package.json b/packages/eslint-plugin-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-react",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "Cloudflight eslint-plugin & eslint-config for React",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-typescript/package.json b/packages/eslint-plugin-typescript/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-typescript",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "Cloudflight eslint-plugin & eslint-config for typescript",
     "volta": {
         "extends": "../../package.json"

diff --git a/packages/eslint-plugin-vue/README.md b/packages/eslint-plugin-vue/README.md
@@ -9,7 +9,7 @@ You can find the directory of all rules including their reasoning [here](src/con
 The following dependencies are required:
 
 ```
-"@cloudflight/eslint-plugin-typescript": ">=0.19.1",
+"@cloudflight/eslint-plugin-typescript": ">=0.20.0",
 "@rushstack/eslint-patch": "1.2.0",
 "eslint": ">=8.0.0 <9.0.0"
 ```

diff --git a/packages/eslint-plugin-vue/package.json b/packages/eslint-plugin-vue/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cloudflight/eslint-plugin-vue",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "description": "Cloudflight eslint-plugin & eslint-config for vue",
     "volta": {
         "extends": "../../package.json"