Add VSCode settings.json suggestion & improve Readme

README.md

@@ -43,14 +43,59 @@ module.exports = {
 };
 ```
 
+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).
+
 
 ## Editor Integrations
 
 The [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VSCode has built-in support for the ERB processor once you've configured it in your `.eslintrc.js` file as shown above.
 
+If you're using VSCode, you may find this `settings.json` options useful:
+```jsonc
+{
+    //////////////////////////////////////
+    // 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,
+    "[javascript]": {
+        "editor.formatOnSave": false, // to avoid formatting twice (ESLint + VSCode)
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint" // use ESLint plugin
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true // Auto-fix ESLint errors on save
+    },
+    // this disables VSCode built-int formatter (instead we want to use ESLint)
+    "javascript.validate.enable": false,
+    //////////////////////////////////////
+    // Files
+    //////////////////////////////////////
+    "files.exclude": {
+        "node_modules/": false,
+    },
+    "files.associations": {
+        "*.js.erb": "javascript"
+    },
+}
+```
+
+
+## Limitations
+- Does not account for code indentation inside `if/else` ERB statements, e.g.
+this snippet
 
-## TODO
+```js
+<% if you_feel_lucky %>
+    console.log("You are lucky 🍀");
+<% end %>
+```
+will be autofixed to
+```js
+<% if you_feel_lucky %>
+console.log("You are lucky 🍀");
+<% end %>
+```
 
-- [ ] Add tests
-- [ ] Improve in-line documentation
-- [ ] Add guide on how to use
+- No support for ESLint suggestions (but full support for Autofixes as shown in the GIF above)

tests/README.md

@@ -13,7 +13,7 @@ npm test
 For reproduction, this is the ESLint configuration file used to generate the input messages for testing (see the `tests/fixtures/` folder. The files were manually renamed to end with `.js.erb` during this process.
 
 ```js
-//.eslintrc.js
+// .eslintrc.js
 // Starting with v9, this config will be deprecated in favor of the new
 // configuration files [1]. @stylistic is already ready for the new "flat config",
 // when it's time, copy the new config from [2].
@@ -42,19 +42,14 @@ module.exports = {
     "jquery": true,
     "es6": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@stylistic/all-extends"
-  ],
   "plugins": [
     "@stylistic",
     "erb"
   ],
-  "overrides": [
-    {
-      "files": ["*.js.erb"],
-      "processor": "erb/erbProcessor"
-    }
+  "extends": [
+    "eslint:recommended",
+    "plugin:@stylistic/all-extends",
+    "plugin:erb/recommended"
   ],
   "rules": {
     "no-unused-vars": "warn",