@luxass/eslint-config 4.0.0-beta.13 → 4.0.0-beta.14

package/README.md

@@ -4,16 +4,22 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 
 > [!IMPORTANT]
-> The configuration is not currently finished.  
+> The configuration is not currently finished.
 > I could change at any moment.
 
 ## ✨ Features
 
-- Designed to work with JavaScript, Typescript, React, Svelte, Astro, Vue out of the box.
-- Support for JSON, YAML, Markdown
-- Sorted imports for `package.json` and `tsconfig.json`
+- Based on [Antfu's ESLint Config](https://github.com/antfu/eslint-config)
+- Auto fix for formatting (aimed to be used standalone **without** Prettier)
+- Designed to work with TypeScript, JSX, Vue & Astro out-of-box
+- Lints also for json, yaml, markdown
+- Sorted imports, dangling commas
+- Reasonable defaults, best practices, only one-line of config
+- Opinionated, but [very customizable](#customization)
 - [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new), compose easily!
-- Using [ESLint Stylistic](https://eslint.style/guide/why)
+- Using [ESLint Stylistic](https://github.com/eslint-stylistic/eslint-stylistic)
+- Respects `.gitignore` by default
+- Optional [formatters](#formatters) support for CSS, HTML, TOML, etc.
 
 ## 📦 Install
 
@@ -167,6 +173,7 @@ export default await luxass({
   rules: {}
 });
 ```
+
 <details>
 <summary>Advanced Example</summary>
 
@@ -221,15 +228,15 @@ Check out the [configs](https://github.com/luxass/eslint-config/blob/main/src/co
 
 Since flat config requires us to explicitly provide the plugin names (instead of mandatory convention from npm package name), we renamed some plugins to make overall scope more consistent and easier to write.
 
-| New Prefix | Original Prefix | Source Plugin |
-| --- | --- | --- |
-| `import/*` | `i/*` | [eslint-plugin-i](https://github.com/un-es/eslint-plugin-i) |
-| `node/*` | `n/*` | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) |
-| `yaml/*` | `yml/*` | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) |
-| `ts/*` | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
-| `style/*` | `@stylistic/*` | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic) |
-| `test/*` | `vitest/*` | [eslint-plugin-vitest](https://github.com/veritem/eslint-plugin-vitest) |
-| `test/*` | `no-only-tests/*` | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests) |
+| New Prefix | Original Prefix        | Source Plugin                                                                              |
+| ---------- | ---------------------- | ------------------------------------------------------------------------------------------ |
+| `import/*` | `i/*`                  | [eslint-plugin-i](https://github.com/un-es/eslint-plugin-i)                                |
+| `node/*`   | `n/*`                  | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                     |
+| `yaml/*`   | `yml/*`                | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                        |
+| `ts/*`     | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) |
+| `style/*`  | `@stylistic/*`         | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic)           |
+| `test/*`   | `vitest/*`             | [eslint-plugin-vitest](https://github.com/veritem/eslint-plugin-vitest)                    |
+| `test/*`   | `no-only-tests/*`      | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)  |
 
 When you want to override rules, or disable them inline, you need to update to the new prefix:
 
@@ -289,6 +296,50 @@ export default luxass({
 
 We provide some optional configs for specific use cases, that we don't include their dependencies by default.
 
+#### Formatters
+
+> [!WARNING]
+> Experimental feature, changes might not follow semver.
+
+Use external formatters to format files that ESLint cannot handle yet (`.css`, `.html`, etc). Powered by [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format).
+
+```js
+// eslint.config.js
+import luxass from "@luxass/eslint-config";
+
+export default luxass({
+  formatters: {
+    /**
+     * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
+     * By default uses Prettier
+     */
+    css: true,
+    /**
+     * Format HTML files
+     * By default uses Prettier
+     */
+    html: true,
+    /**
+     * Format TOML files
+     * Currently only supports dprint
+     */
+    toml: "dprint",
+    /**
+     * Format Markdown files
+     * Supports Prettier and dprint
+     * By default uses Prettier
+     */
+    markdown: "prettier"
+  }
+});
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-format
+```
+
 #### React
 
 To enable React support, need to explicitly turn it on:
@@ -308,42 +359,44 @@ Running `npx eslint` should prompt you to install the required dependencies, oth
 npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh
 ```
 
-#### UnoCSS
+#### Next.JS
 
-To enable UnoCSS support, need to explicitly turn it on:
+To enable Next.JS support, need to explicitly turn it on:
+
+Next.JS also enables React support.
 
 ```js
 // eslint.config.js
 import luxass from "@luxass/eslint-config";
 
 export default luxass({
-  unocss: true,
+  nextjs: true,
 });
 ```
 
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D @unocss/eslint-plugin
+npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh @next/eslint-plugin-next
 ```
 
-#### TailwindCSS
+#### UnoCSS
 
-To enable TailwindCSS support, need to explicitly turn it on:
+To enable UnoCSS support, need to explicitly turn it on:
 
 ```js
 // eslint.config.js
 import luxass from "@luxass/eslint-config";
 
 export default luxass({
-  tailwindcss: true,
+  unocss: true,
 });
 ```
 
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D eslint-plugin-tailwindcss
+npm i -D @unocss/eslint-plugin
 ```
 
 ### Optional Rules
@@ -354,7 +407,7 @@ This config also provides some optional plugins/rules for extended usages.
 
 This plugin [`eslint-plugin-perfectionist`](https://github.com/azat-io/eslint-plugin-perfectionist) allows you to sorted object keys, imports, etc, with auto-fix.
 
-The plugin is installed but no rules are enabled by default. 
+The plugin is installed but no rules are enabled by default.
 
 It's recommended to opt-in on each file individually using [configuration comments](https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments-1).
 
@@ -368,7 +421,6 @@ const objectWantedToSort = {
 /* eslint perfectionist/sort-objects: "off" */
 ```
 
-
 ### Type Aware Rules
 
 You can optionally enable the [type aware rules](https://typescript-eslint.io/linting/typed-linting/) by passing the options object to the `typescript` config:

package/dist/chunk-2U46NSDO.mjs

@@ -0,0 +1,201 @@
+import {
+  StylisticConfigDefaults
+} from "./chunk-QX3N2TR4.mjs";
+import {
+  ensure,
+  interop
+} from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_CSS,
+  GLOB_LESS,
+  GLOB_MARKDOWN,
+  GLOB_POSTCSS,
+  GLOB_SCSS
+} from "./chunk-DB44ZJL2.mjs";
+
+// src/configs/formatters.ts
+import * as parserPlain from "eslint-parser-plain";
+async function formatters(options = {}, stylistic = {}) {
+  await ensure([
+    "eslint-plugin-format"
+  ]);
+  if (options === true) {
+    options = {
+      css: true,
+      graphql: true,
+      html: true,
+      markdown: true,
+      toml: true
+    };
+  }
+  const {
+    indent,
+    quotes,
+    semi
+  } = {
+    ...StylisticConfigDefaults,
+    ...stylistic
+  };
+  const prettierOptions = Object.assign(
+    {
+      endOfLine: "auto",
+      semi,
+      singleQuote: quotes === "single",
+      tabWidth: typeof indent === "number" ? indent : 2,
+      trailingComma: "all",
+      useTabs: indent === "tab"
+    },
+    options.prettierOptions || {}
+  );
+  const dprintOptions = Object.assign(
+    {
+      indentWidth: typeof indent === "number" ? indent : 2,
+      quoteStyle: quotes === "single" ? "preferSingle" : "preferDouble",
+      useTabs: indent === "tab"
+    },
+    options.dprintOptions || {}
+  );
+  const pluginFormat = await interop(import("eslint-plugin-format"));
+  const configs = [
+    {
+      name: "luxass:formatters:setup",
+      plugins: {
+        format: pluginFormat
+      }
+    }
+  ];
+  if (options.css) {
+    configs.push(
+      {
+        files: [GLOB_CSS, GLOB_POSTCSS],
+        languageOptions: {
+          parser: parserPlain
+        },
+        name: "luxass:formatter:css",
+        rules: {
+          "format/prettier": [
+            "error",
+            {
+              ...prettierOptions,
+              parser: "css"
+            }
+          ]
+        }
+      },
+      {
+        files: [GLOB_SCSS],
+        languageOptions: {
+          parser: parserPlain
+        },
+        name: "luxass:formatter:scss",
+        rules: {
+          "format/prettier": [
+            "error",
+            {
+              ...prettierOptions,
+              parser: "scss"
+            }
+          ]
+        }
+      },
+      {
+        files: [GLOB_LESS],
+        languageOptions: {
+          parser: parserPlain
+        },
+        name: "luxass:formatter:less",
+        rules: {
+          "format/prettier": [
+            "error",
+            {
+              ...prettierOptions,
+              parser: "less"
+            }
+          ]
+        }
+      }
+    );
+  }
+  if (options.html) {
+    configs.push({
+      files: ["**/*.html"],
+      languageOptions: {
+        parser: parserPlain
+      },
+      name: "luxass:formatter:html",
+      rules: {
+        "format/prettier": [
+          "error",
+          {
+            ...prettierOptions,
+            parser: "html"
+          }
+        ]
+      }
+    });
+  }
+  if (options.toml) {
+    configs.push({
+      files: ["**/*.toml"],
+      languageOptions: {
+        parser: parserPlain
+      },
+      name: "luxass:formatter:toml",
+      rules: {
+        "format/dprint": [
+          "error",
+          {
+            ...dprintOptions,
+            language: "toml"
+          }
+        ]
+      }
+    });
+  }
+  if (options.markdown) {
+    const formater = options.markdown === true ? "prettier" : options.markdown;
+    configs.push({
+      files: [GLOB_MARKDOWN],
+      languageOptions: {
+        parser: parserPlain
+      },
+      name: "antfu:formatter:markdown",
+      rules: {
+        [`format/${formater}`]: [
+          "error",
+          formater === "prettier" ? {
+            ...prettierOptions,
+            embeddedLanguageFormatting: "off",
+            parser: "markdown"
+          } : {
+            ...dprintOptions,
+            language: "markdown"
+          }
+        ]
+      }
+    });
+  }
+  if (options.graphql) {
+    configs.push({
+      files: ["**/*.graphql"],
+      languageOptions: {
+        parser: parserPlain
+      },
+      name: "luxass:formatter:graphql",
+      rules: {
+        "format/prettier": [
+          "error",
+          {
+            ...prettierOptions,
+            parser: "graphql"
+          }
+        ]
+      }
+    });
+  }
+  return configs;
+}
+
+export {
+  formatters
+};

package/dist/{chunk-GDLAZL2U.mjs → chunk-373KVOWN.mjs}

@@ -1,10 +1,9 @@
 import {
-  GLOB_ASTRO
-} from "./chunk-R4NSLRAE.mjs";
-import {
-  ensure,
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_ASTRO
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/astro.ts
 async function astro(options) {
@@ -13,11 +12,6 @@ async function astro(options) {
     overrides = {},
     typescript = true
   } = options;
-  await ensure([
-    "eslint-plugin-astro",
-    "astro-eslint-parser",
-    ...a11y ? ["eslint-plugin-jsx-a11y"] : []
-  ]);
   const [
     pluginAstro,
     parserAstro,

package/dist/{chunk-QZTI72NS.mjs → chunk-4HRTXFWO.mjs}

@@ -1,12 +1,12 @@
-import {
-  GLOB_NEXTJS_OG,
-  GLOB_NEXTJS_ROUTES,
-  GLOB_SRC
-} from "./chunk-R4NSLRAE.mjs";
 import {
   ensure,
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_NEXTJS_OG,
+  GLOB_NEXTJS_ROUTES,
+  GLOB_SRC
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/nextjs.ts
 async function nextjs(options = {}) {

package/dist/{chunk-P3N5WLFL.mjs → chunk-6ISPPQXV.mjs}

@@ -1,11 +1,11 @@
+import {
+  interop
+} from "./chunk-TQ476NL2.mjs";
 import {
   GLOB_JSON,
   GLOB_JSON5,
   GLOB_JSONC
-} from "./chunk-R4NSLRAE.mjs";
-import {
-  interop
-} from "./chunk-TQ476NL2.mjs";
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/jsonc.ts
 async function jsonc(options = {}) {

package/dist/{chunk-M5WNLLBT.mjs → chunk-7GTKYZYV.mjs}

@@ -1,9 +1,9 @@
-import {
-  GLOB_YAML
-} from "./chunk-R4NSLRAE.mjs";
 import {
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_YAML
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/yaml.ts
 async function yaml(options = {}) {

package/dist/{chunk-KU6VCFCN.mjs → chunk-BUPZYZVV.mjs}

@@ -1,10 +1,10 @@
-import {
-  GLOB_JSX
-} from "./chunk-R4NSLRAE.mjs";
 import {
   ensure,
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_JSX
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/react.ts
 async function react(options) {

package/dist/{chunk-R4NSLRAE.mjs → chunk-DB44ZJL2.mjs}

@@ -7,12 +7,14 @@ var GLOB_JSX_EXT = "[jt]sx";
 var GLOB_JSX = `**/*.${GLOB_JSX_EXT}`;
 var GLOB_STYLE = "**/*.{c,le,sc}ss";
 var GLOB_CSS = "**/*.css";
+var GLOB_POSTCSS = "**/*.{p,post}css";
 var GLOB_LESS = "**/*.less";
 var GLOB_SCSS = "**/*.scss";
 var GLOB_JSON = "**/*.json";
 var GLOB_JSON5 = "**/*.json5";
 var GLOB_JSONC = "**/*.jsonc";
 var GLOB_MARKDOWN = "**/*.md";
+var GLOB_MARKDOWN_IN_MARKDOWN = "**/*.md/*.md";
 var GLOB_VUE = "**/*.vue";
 var GLOB_YAML = "**/*.y?(a)ml";
 var GLOB_HTML = "**/*.htm?(l)";
@@ -84,12 +86,14 @@ export {
   GLOB_JSX,
   GLOB_STYLE,
   GLOB_CSS,
+  GLOB_POSTCSS,
   GLOB_LESS,
   GLOB_SCSS,
   GLOB_JSON,
   GLOB_JSON5,
   GLOB_JSONC,
   GLOB_MARKDOWN,
+  GLOB_MARKDOWN_IN_MARKDOWN,
   GLOB_VUE,
   GLOB_YAML,
   GLOB_HTML,

package/dist/{chunk-BAKUP7QM.mjs → chunk-NYNG5MO5.mjs}

@@ -1,14 +1,14 @@
-import {
-  GLOB_SRC
-} from "./chunk-R4NSLRAE.mjs";
-import {
-  default as default2
-} from "./chunk-C5VMTRKT.mjs";
 import {
   interop,
   renameRules,
   toArray
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_SRC
+} from "./chunk-DB44ZJL2.mjs";
+import {
+  default as default2
+} from "./chunk-C5VMTRKT.mjs";
 
 // src/configs/typescript.ts
 import process from "node:process";
@@ -82,9 +82,6 @@ async function typescript(options) {
           "@typescript-eslint/",
           "ts/"
         ),
-        "antfu/generic-spacing": "error",
-        "antfu/named-tuple-spacing": "error",
-        "antfu/no-cjs-exports": "error",
         "no-dupe-class-members": "off",
         "no-invalid-this": "off",
         "no-loss-of-precision": "off",

package/dist/{chunk-NUG6FLHN.mjs → chunk-OEYWD3ZM.mjs}

@@ -1,23 +1,30 @@
-import {
-  GLOB_VUE
-} from "./chunk-R4NSLRAE.mjs";
 import {
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_VUE
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/vue.ts
+import { mergeProcessors } from "eslint-merge-processors";
 async function vue(options = {}) {
-  const { overrides = {}, stylistic = true } = options;
+  const {
+    overrides = {},
+    stylistic = true
+  } = options;
+  const sfcBlocks = options.sfcBlocks === true ? {} : options.sfcBlocks ?? {};
+  const {
+    indent = 2
+  } = typeof stylistic === "boolean" ? {} : stylistic;
   const [
     pluginVue,
-    parserVue
+    parserVue,
+    processorVueBlocks
   ] = await Promise.all([
     interop(import("eslint-plugin-vue")),
-    interop(import("vue-eslint-parser"))
+    interop(import("vue-eslint-parser")),
+    interop(import("eslint-processor-vue-blocks"))
   ]);
-  const {
-    indent = 2
-  } = typeof stylistic === "boolean" ? {} : stylistic;
   return [
     {
       name: "luxass:vue:setup",
@@ -39,7 +46,16 @@ async function vue(options = {}) {
         }
       },
       name: "luxass:vue:rules",
-      processor: pluginVue.processors[".vue"],
+      processor: sfcBlocks === false ? pluginVue.processors[".vue"] : mergeProcessors([
+        pluginVue.processors[".vue"],
+        processorVueBlocks({
+          ...sfcBlocks,
+          blocks: {
+            styles: true,
+            ...sfcBlocks.blocks
+          }
+        })
+      ]),
       rules: {
         ...pluginVue.configs.base.rules,
         ...pluginVue.configs["vue3-essential"].rules,

package/dist/{chunk-24KJPXII.mjs → chunk-Q2Q636N2.mjs}

@@ -1,9 +1,9 @@
-import {
-  GLOB_TESTS
-} from "./chunk-R4NSLRAE.mjs";
 import {
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_TESTS
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/test.ts
 async function test(options = {}) {

package/dist/{chunk-3QHLEAXK.mjs → chunk-QX3N2TR4.mjs}

@@ -1,13 +1,27 @@
-import {
-  default as default2
-} from "./chunk-C5VMTRKT.mjs";
 import {
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  default as default2
+} from "./chunk-C5VMTRKT.mjs";
 
 // src/configs/stylistic.ts
+var StylisticConfigDefaults = {
+  indent: 2,
+  jsx: true,
+  quotes: "double",
+  semi: true
+};
 async function stylistic(options = {}) {
-  const { indent = 2, jsx = true, quotes = "double", semi = true } = options;
+  const {
+    indent,
+    jsx,
+    quotes,
+    semi
+  } = {
+    ...StylisticConfigDefaults,
+    ...options
+  };
   const pluginStylistic = await interop(import("@stylistic/eslint-plugin"));
   const config = pluginStylistic.configs.customize({
     flat: true,
@@ -28,7 +42,6 @@ async function stylistic(options = {}) {
         ...config.rules,
         "antfu/consistent-list-newline": "error",
         "antfu/if-newline": "off",
-        "antfu/indent-binary-ops": ["error", { indent }],
         "antfu/top-level-function": "error",
         "curly": ["error", "multi-line", "consistent"],
         "style/arrow-parens": ["error", "always", { requireForBlockBody: true }],
@@ -39,5 +52,6 @@ async function stylistic(options = {}) {
 }
 
 export {
+  StylisticConfigDefaults,
   stylistic
 };

package/dist/{chunk-YDSNPJF5.mjs → chunk-R5JWBBVA.mjs}

@@ -1,10 +1,10 @@
-import {
-  GLOB_SRC
-} from "./chunk-R4NSLRAE.mjs";
 import {
   ensure,
   interop
 } from "./chunk-TQ476NL2.mjs";
+import {
+  GLOB_SRC
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/unocss.ts
 async function unocss(options) {

package/dist/{chunk-SPQZTV4E.mjs → chunk-RRMOX2LR.mjs}

@@ -1,7 +1,7 @@
 import {
   GLOB_SRC,
   GLOB_SRC_EXT
-} from "./chunk-R4NSLRAE.mjs";
+} from "./chunk-DB44ZJL2.mjs";
 import {
   default as default2,
   default5 as default3

package/dist/{chunk-ADP4MYOS.mjs → chunk-SWLQ7JNL.mjs}

@@ -1,6 +1,6 @@
 import {
   GLOB_EXCLUDE
-} from "./chunk-R4NSLRAE.mjs";
+} from "./chunk-DB44ZJL2.mjs";
 
 // src/configs/ignores.ts
 function ignores() {