feat: Added a YAML ESLint config (#195)

gsoft-inc · Apr 2, 2024 · dd560c6 · dd560c6
1 parent ce341ee
commit dd560c6
Show file tree

Hide file tree

Showing 19 changed files with 164 additions and 68 deletions.
diff --git a/.changeset/violet-socks-double.md b/.changeset/violet-socks-double.md
@@ -0,0 +1,5 @@
+---
+"@workleap/eslint-plugin": minor
+---
+
+Added a config for YAML files.
diff --git a/.eslintignore b/.eslintignore
@@ -3,4 +3,3 @@ node_modules
 pnpm-lock.yaml
 *.md
 *.snap
-*.yml
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -34,5 +34,12 @@
     // Settings for third parties that are frequently used
     "files.associations": {
         "*.snap": "javascriptreact"
-    }
+    },
+
+    // ESLint extension
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "yaml"
+        ]
 }
diff --git a/docs/eslint/advanced-composition.md b/docs/eslint/advanced-composition.md
@@ -22,6 +22,8 @@ If the default [by project type configurations](default.md/#available-configurat
 | :icon-mark-github: [testing-library](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/testing-library.ts) | Rules for Jest files using [Testing Library](https://testing-library.com/). |
 | :icon-mark-github: [storybook](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/storybook.ts) | Rules for [Storybook](https://storybook.js.org/) story files. |
 | :icon-mark-github: [mdx](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/mdx.ts) | Rules for [MDX](https://mdxjs.com/) files (used for Storybook MDX stories). |
+| :icon-mark-github: [package-json](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/package-json.ts) | Rules for [package.json](https://docs.npmjs.com/cli/v10/configuring-npm/package-json) files. |
+| :icon-mark-github: [yaml](https://github.com/gsoft-inc/wl-web-configs/blob/main/packages/eslint-plugin/lib/config/yaml.ts) | Rules for [YAML](https://yaml.org/) files. |
 
 ## Compose a configuration
 

diff --git a/docs/eslint/integrate-vscode.md b/docs/eslint/integrate-vscode.md
@@ -26,7 +26,12 @@ Then, add the following settings to your solution [VS Code settings file](https:
     "editor.formatOnSave": true,
     "typescript.format.enable": false, // Disables the default formatter to use ESLint instead
     "javascript.format.enable": false, // Disables the default formatter to use ESLint instead
-    "json.format.enable": false // Disables the default formatter to use ESLint instead
+    "json.format.enable": false, // Disables the default formatter to use ESLint instead
+    "eslint.validate": [ // Enables YAML files formatting.
+        "javascript",
+        "javascriptreact",
+        "yaml"
+    ]
 }
 ```
 

diff --git a/docs/eslint/setup-monorepo.md b/docs/eslint/setup-monorepo.md
@@ -85,12 +85,16 @@ Then, open the newly created file and paste the following ignore rules:
 node_modules
 __snapshots__
 storybook-static
+pnpm-lock.yaml
+package-lock.json
 *.md
-*.yml
-*.yaml
 !.storybook
 ```
 
+!!!info
+While only the `.storybook` dot folder is listed, you should include any other dot folders that need to be linted.
+!!!
+
 ### Configure indent style
 
 ESLint offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.
@@ -148,7 +152,7 @@ workspace
 
 ```json package.json
 {
-    "lint:eslint:": "eslint . --max-warnings=1 --cache --cache-location node_modules/.cache/eslint"
+    "lint:eslint:": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint"
 }
 ```
 

diff --git a/docs/eslint/setup-polyrepo.md b/docs/eslint/setup-polyrepo.md
@@ -101,12 +101,16 @@ Then, open the newly created file and paste the following ignore rules:
 node_modules
 __snapshots__
 storybook-static
+pnpm-lock.yaml
+package-lock.json
 *.md
-*.yml
-*.yaml
 !.storybook
 ```
 
+!!!info
+While only the `.storybook` dot folder is listed, you should include any other dot folders that need to be linted.
+!!!
+
 ## Configure the indent style
 
 [ESLint](https://eslint.org/) offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently.
@@ -150,7 +154,7 @@ At times, especially when running the CI build, it's useful to lint the entire s
 
 ```json package.json
 {
-    "lint:eslint:": "eslint . --max-warnings=1 --cache --cache-location node_modules/.cache/eslint"
+    "lint:eslint:": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint"
 }
 ```
 

diff --git a/packages/eslint-plugin/lib/config/by-project-type/monorepo-workspace.ts b/packages/eslint-plugin/lib/config/by-project-type/monorepo-workspace.ts
@@ -8,7 +8,8 @@ const config: Linter.Config = {
         "plugin:@workleap/jest",
         "plugin:@workleap/testing-library",
         "plugin:@workleap/mdx",
-        "plugin:@workleap/package-json"
+        "plugin:@workleap/package-json",
+        "plugin:@workleap/yaml"
     ],
     rules: {
         "package-json/valid-version": "off"

diff --git a/packages/eslint-plugin/lib/config/by-project-type/react-library.ts b/packages/eslint-plugin/lib/config/by-project-type/react-library.ts
@@ -11,7 +11,8 @@ const config: Linter.Config = {
         "plugin:@workleap/testing-library",
         "plugin:@workleap/storybook",
         "plugin:@workleap/mdx",
-        "plugin:@workleap/package-json"
+        "plugin:@workleap/package-json",
+        "plugin:@workleap/yaml"
     ],
     rules: {
         // Custom WorkLeap rules

diff --git a/packages/eslint-plugin/lib/config/by-project-type/typescript-library.ts b/packages/eslint-plugin/lib/config/by-project-type/typescript-library.ts
@@ -8,7 +8,8 @@ const config: Linter.Config = {
         "plugin:@workleap/jest",
         "plugin:@workleap/testing-library",
         "plugin:@workleap/mdx",
-        "plugin:@workleap/package-json"
+        "plugin:@workleap/package-json",
+        "plugin:@workleap/yaml"
     ]
 };
 

diff --git a/packages/eslint-plugin/lib/config/by-project-type/web-application.ts b/packages/eslint-plugin/lib/config/by-project-type/web-application.ts
@@ -11,7 +11,8 @@ const config: Linter.Config = {
         "plugin:@workleap/testing-library",
         "plugin:@workleap/storybook",
         "plugin:@workleap/mdx",
-        "plugin:@workleap/package-json"
+        "plugin:@workleap/package-json",
+        "plugin:@workleap/yaml"
     ],
     rules: {
         // Custom WorkLeap rules

diff --git a/packages/eslint-plugin/lib/config/mdx.ts b/packages/eslint-plugin/lib/config/mdx.ts
@@ -5,7 +5,6 @@ const config: Linter.Config = {
     overrides: [
         {
             files: mdxFiles,
-            plugins: ["@workleap"],
             extends: ["plugin:mdx/recommended"]
         }
     ]

diff --git a/packages/eslint-plugin/lib/config/yaml.ts b/packages/eslint-plugin/lib/config/yaml.ts
@@ -0,0 +1,18 @@
+import { yamlFiles } from "../utils/patterns";
+
+import type { Linter } from "eslint";
+
+const config: Linter.Config = {
+    extends: ["plugin:yml/standard"],
+    overrides: [
+        {
+            files: yamlFiles,
+            parser: "yaml-eslint-parser"
+        }
+    ]
+};
+
+// Using TypeScript "export" keyword until ESLint support ESM.
+// Otherwise we must deal with a weird CommonJS output from esbuild which is not worth it.
+// For more info, see: https://github.com/evanw/esbuild/issues/1079
+export = config;
diff --git a/packages/eslint-plugin/lib/index.ts b/packages/eslint-plugin/lib/index.ts
@@ -12,6 +12,7 @@ const plugin: ESLint.Plugin = {
         react: require("./config/react"),
         storybook: require("./config/storybook"),
         typescript: require("./config/typescript"),
+        yaml: require("./config/yaml"),
         "jsx-a11y": require("./config/jsx-a11y"),
         "testing-library": require("./config/testing-library"),
         "package-json": require("./config/package-json"),

diff --git a/packages/eslint-plugin/lib/utils/patterns.ts b/packages/eslint-plugin/lib/utils/patterns.ts
@@ -33,3 +33,8 @@ export const mainStorybookFiles = [
 export const mdxFiles = [
     "*.mdx"
 ];
+
+export const yamlFiles = [
+    "*.yaml",
+    "*.yml"
+];
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -79,7 +79,9 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-storybook": "^0.8.0",
         "eslint-plugin-testing-library": "^6.2.0",
-        "jsonc-eslint-parser": "^2.4.0"
+        "eslint-plugin-yml": "^1.14.0",
+        "jsonc-eslint-parser": "^2.4.0",
+        "yaml-eslint-parser": "^1.2.2"
     },
     "publishConfig": {
         "access": "public",

diff --git a/packages/webpack-configs/package.json b/packages/webpack-configs/package.json
@@ -36,7 +36,7 @@
         "browserslist": "*",
         "postcss": "*",
         "webpack": ">=5.0.0",
-        "webpack-dev-server": ">=4.0.0"
+        "webpack-dev-server": ">=5.0.0"
     },
     "peerDependenciesMeta": {
         "webpack-dev-server": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml