Make plugin ready for ESLint Flat config (#9)

* Export plugin for new flat config ESLint API * Add old recommended config as legacy option * Update dev new release info * Fix glob pattern for index.js * Upgrade docs explaining breaking change * Remove anchor from url
Splines · Jan 4, 2024 · 82e8b10 · 82e8b10
1 parent 42ee7ac
commit 82e8b10
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 10 deletions.
diff --git a/DEV.md b/DEV.md
@@ -17,6 +17,7 @@ As this is only a small project, we haven't automated publishing to the NPM regi
 ```sh
 npm run bump-version -- [<newversion> | major | minor | patch]
 ```
+- ⚠ Copy the version specifier from `package.json` into the `index.js` meta information object.
 - Once the `dev` branch is ready, open a PR (Pull request) called "Continuous Release <version.number>" and give it the "release" label. Merge this PR into `main`.
 - Create a new release via the GitHub UI and assign a new tag alongside that.
 - Fetch the tag locally (`git fetch`) and publish to npm via `npm run publish-final`. You probably have to login to npm first (`npm login`).

diff --git a/README.md b/README.md
@@ -6,6 +6,9 @@ A zero-dependency plugin for [ESLint](https://eslint.org/).
 ![showcase-erb-lint-gif](https://github.com/Splines/eslint-plugin-erb/assets/37160523/623d6007-b4f5-41ce-be76-5bc0208ed636?raw=true)
 
 
+> [!WARNING]
+> v2.0.0 is breaking. We now use the new ESLint flat config format. Use `erb:recommended-legacy` if you want to keep using the old `.eslintrc.js` format.
+
 ## Usage
 
 ### Install
@@ -19,12 +22,117 @@ npm install --save-dev eslint eslint-plugin-erb
 
 ### Configure
 
-You can extend the `plugin:erb/recommended` config that will enable the ERB processor on all `.js.erb` files.
+Starting of v9 ESLint provides a [new flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new) (`eslint.config.js`). Also see the [configuration migration guide](https://eslint.org/docs/latest/use/configure/migration-guide). Use it as follows and it will automatically lint all your `.js.erb` files:
+
+```js
+// eslint.config.js
+import erb from "eslint-plugin-erb";
+
+export default [
+  // if you are using VSCode, don't forget to put
+  // "eslint.experimental.useFlatConfig": true
+  // in your settings.json
+  erb.configs.recommended,
+  {
+    // your other configuration options
+  }
+];
+
+```
+
+<details>
+<summary>See more complete example</summary>
+
+```js
+// eslint.config.js
+import js from "@eslint/js";
+import stylistic from "@stylistic/eslint-plugin";
+import globals from "globals";
+import erb from "eslint-plugin-erb";
+
+const customizedStylistic = stylistic.configs.customize({
+  "indent": 2,
+  "jsx": false,
+  "quote-props": "always",
+  "semi": "always",
+  "brace-style": "1tbs",
+});
+
+const customGlobals = {
+  MyGlobalVariableOrFunctionOrClassOrWhatever: "readable",
+};
+
+export default [
+  js.configs.recommended,
+  erb.configs.recommended,
+  {
+    ignores: [
+      "node_modules/",
+    ],
+    plugins: {
+      "@stylistic": stylistic,
+    },
+    rules: {
+      ...customizedStylistic.rules,
+      "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+      "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+      globals: {
+        ...customGlobals,
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+];
+```
+
+</details>
+
+
+<details>
+
+<summary>Alternative way to configure the processor</summary>
+
+With this variant you have a bit more control over what is going on, e.g. you could name your files `.js.special-erb` and still lint them (if they contain JS and ERB syntax).
+
+
+```js
+// eslint.config.js
+import erb from "eslint-plugin-erb";
+
+export default [
+  // if you are using VSCode, don't forget to put
+  // "eslint.experimental.useFlatConfig": true
+  // in your settings.json
+  {
+    files: ["**/*.js.erb"],
+    processor: erb.processors.erbProcessor,
+  },
+  {
+    // your other configuration options
+  }
+];
+```
+
+</details>
+
+
+
+
+
+<details>
+<summary>Legacy: you can still use the old `.eslintrc.js` format</summary>
+
+You can extend the `plugin:erb/recommended-legacy` config that will enable the ERB processor on all `.js.erb` files. **Note that instead of "plugin:erb/recommended", you now have to use "plugin:erb/recommended-legacy"**.
 
 ```js
 // .eslintrc.js
 module.exports = {
-    extends: "plugin:erb/recommended"
+    extends: "plugin:erb/recommended-legacy"
 };
 ```
 
@@ -36,14 +144,17 @@ module.exports = {
     plugins: ["erb"],
     overrides: [
         {
-            files: ["*.js.erb"],
+            files: ["**/*.js.erb"],
             processor: "erb/erbProcessor"
         }
     ]
 };
 ```
 
-If you're wondering what a good starting point for your own `.eslintrc.js` file might be, you can use the config from [here](https://github.com/Splines/eslint-plugin-erb/tree/main/tests#environment).
+</details>
+
+
+
 
 
 ## Editor Integrations
@@ -53,13 +164,14 @@ The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeu
 If you're using VSCode, you may find this `settings.json` options useful:
 ```jsonc
 {
+    "editor.formatOnSave": false, // it still autosaves with the options below
     //////////////////////////////////////
     // JS (ESLint)
     //////////////////////////////////////
     // https://eslint.style/guide/faq#how-to-auto-format-on-save
     // https://github.com/microsoft/vscode-eslint#settings-options
-    "editor.formatOnSave": true,
     "eslint.format.enable": true,
+    "eslint.experimental.useFlatConfig": true, // use the new flat config format
     "[javascript]": {
         "editor.formatOnSave": false, // to avoid formatting twice (ESLint + VSCode)
         "editor.defaultFormatter": "dbaeumer.vscode-eslint" // use ESLint plugin

diff --git a/lib/index.js b/lib/index.js
@@ -3,21 +3,32 @@
  * @author Splines
  */
 
-const preprocess = require("./preprocess");
-const postprocess = require("./postprocess");
+// Load processor
+const preprocess = require("./preprocess.js");
+const postprocess = require("./postprocess.js");
 const processor = {
   preprocess,
   postprocess,
   supportsAutofix: true,
 };
 
-module.exports = {
+// Define & export plugin
+const plugin = {
+  meta: {
+    name: "eslint-plugin-erb",
+    version: "1.1.2",
+  },
   configs: {
-    recommended: {
+    "recommended": {
+      files: ["**/*.js.erb"],
+      processor: processor,
+    },
+    // for the old non-flat config ESLint API
+    "recommended-legacy": {
       plugins: ["erb"],
       overrides: [
         {
-          files: ["*.js.erb"],
+          files: ["**/*.js.erb"],
           processor: "erb/erbProcessor",
         },
       ],
@@ -27,3 +38,5 @@ module.exports = {
     erbProcessor: processor,
   },
 };
+
+module.exports = plugin;