diff --git a/README.md b/README.md index 03d02c2..6befe17 100644 --- a/README.md +++ b/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) diff --git a/tests/README.md b/tests/README.md index 12ca7e9..be5427e 100644 --- a/tests/README.md +++ b/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",