diff --git a/DEV.md b/DEV.md index 3ea87eb..6039822 100644 --- 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 -- [ | 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 " 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 index e6b307a..36d9ec8 100644 --- 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 + } +]; + +``` + +
+See more complete example + +```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, + }, + }, + }, +]; +``` + +
+ + +
+ +Alternative way to configure the processor + +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 + } +]; +``` + +
+ + + + + +
+Legacy: you can still use the old `.eslintrc.js` format + +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). +
+ + + ## 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 index 0e13739..3a78eb5 100644 --- 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;