Continuous Release 2.0.0 with new ESLint flat config

See #10

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16, 17, 18, 19, 20, 21]
+        node: [18, 19, 20, 21]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
@@ -22,7 +22,7 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies
-        run: npm install
+        run: npm install --legacy-peer-deps
         env:
           CI: true
       - name: Run Mocha tests

.mocharc.js

@@ -1,6 +1,6 @@
 module.exports = {
-    "spec": "tests/**/*.js",
-    "ignore": [
-        "tests/fixtures/**"
-    ],
-}
+  spec: "tests/**/*.js",
+  ignore: [
+    "tests/fixtures/**",
+  ],
+};

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
     "eslint.format.enable": true,
+    "eslint.experimental.useFlatConfig": true,
     "[javascript]": {
         "editor.formatOnSave": false, // to avoid formatting twice (ESLint + VSCode)
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
@@ -8,5 +9,5 @@
         "source.fixAll.eslint": "explicit"
     },
     // this disables VSCode built-int formatter (instead we want to use ESLint)
-    "javascript.validate.enable": false
+    "javascript.validate.enable": false,
 }

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`).

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,127 @@ 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",
+};
+
+// [1] https://eslint.org/docs/latest/use/configure/configuration-files-new#globally-ignoring-files-with-ignores
+
+export default [
+  js.configs.recommended,
+  erb.configs.recommended,
+  // Globally ignoring the following files
+  // "Note that only global ignores patterns can match directories.
+  // 'ignores' patterns that are specific to a configuration will
+  // only match file names." ~ see [1]
+  {
+    ignores: [
+      "node_modules/",
+      "tests/fixtures/",
+      "tmp/",
+    ],
+  },
+  {
+    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 +154,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 +174,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

eslint.config.js

@@ -0,0 +1,40 @@
+const js = require("@eslint/js");
+const stylistic = require("@stylistic/eslint-plugin");
+const globals = require("globals");
+
+const customizedStylistic = stylistic.configs.customize({
+  "indent": 2,
+  "jsx": false,
+  "quote-props": "always",
+  "semi": "always",
+  "brace-style": "1tbs",
+});
+
+module.exports = [
+  js.configs.recommended,
+  {
+    ignores: [
+      "node_modules/",
+      "tests/fixtures/",
+      "tmp/",
+    ],
+  },
+  {
+    plugins: {
+      "@stylistic": stylistic,
+    },
+    rules: {
+      ...customizedStylistic.rules,
+      "no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+      "@stylistic/quotes": ["error", "double", { avoidEscape: true }],
+    },
+    languageOptions: {
+      ecmaVersion: 2024,
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.mocha,
+      },
+    },
+  },
+];

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: "2.0.0",
+  },
   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;

lib/postprocess.js

@@ -1,5 +1,5 @@
 const cache = require("./cache.js");
-const { coordinatesToIndex, indexToColumn } = require("./file_coordinates.js");
+const { coordinatesToIndex } = require("./file_coordinates.js");
 const { calculateOffset } = require("./offset_calculation.js");
 const { transformFix } = require("./autofix.js");
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-erb",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "description": "An ESLint plugin to lint JavaScript in ERB files (.js.erb)",
   "license": "MIT",
   "author": {
@@ -33,13 +33,16 @@
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.3.3",
     "chai": "^4.3.10",
-    "eslint": "^8.54.0",
+    "eslint": "^9.0.0-alpha.0",
+    "globals": "^13.24.0",
     "mocha": "^10.2.0"
   },
   "scripts": {
+    "lint": "eslint .",
+    "lint-fix": "eslint --fix .",
     "test": "mocha",
     "whats-included": "npm pack --dry-run",
     "bump-version": "npm run test && npm version --no-git-tag-version",
     "publish-final": "npm run test && npm publish"
   }
-}
+}

tests/postprocess.js

@@ -7,7 +7,7 @@ const cache = require("../lib/cache.js");
 
 describe("postprocess", () => {
   it("deletes file from cache after postprocessing", () => {
-    const text = `console.log("Hello world!");`;
+    const text = 'console.log("Hello world!");';
     const name = "testfile.js";
 
     pre(text, name);