refactor!: migrate from prettier to eslint-stylistic

Author: coderwyd

.vscode/settings.json

@@ -19,6 +19,18 @@
     "gql",
     "graphql"
   ],
+  // "eslint.runtime": "node",
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
   "prettier.enable": false,
   "cSpell.words": ["antfu", "coderwyd", "rspack", "unocss"]
 }

README.md

@@ -10,7 +10,7 @@
 - ✨ Support Vue, React, Svelte.
 - 🎯 Designed to work with TypeScript, Vue out-of-box
 - 🏆 Reasonable defaults, best practices, only one-line of config
-- 🎨 Use ESlint and Prettier to format HTML, CSS, LESS, SCSS, YAML, TOML, Markdown, JSON, JSONC.
+- 🎨 Use ESlint to format HTML, CSS, LESS, SCSS, YAML, TOML, Markdown, JSON, JSONC.
 
 ## Usage
 
@@ -72,6 +72,20 @@ Add the following settings to your `.vscode/settings.json`:
     "source.organizeImports": "never"
   },
 
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
   // Enable eslint for all supported languages
   "eslint.validate": [
     "html",
@@ -113,8 +127,8 @@ npm i -D lint-staged simple-git-hooks
 
 ### interface Options
 
-````ts
-interface OptionsConfig {
+```ts
+interface OptionsConfig extends OptionsComponentExts {
   /**
    * The current working directory
    *
@@ -146,6 +160,15 @@ interface OptionsConfig {
    */
   typescript?: boolean | OptionsTypescript
 
+  /**
+   * Enable JSX related rules.
+   *
+   * Currently only stylistic rules are included.
+   *
+   * @default true
+   */
+  jsx?: boolean
+
   /**
    * Enable test support.
    *
@@ -171,7 +194,7 @@ interface OptionsConfig {
    * Enable react rules.
    *
    * Requires installing:
-   * - `eslint-plugin-react`
+   * - `@eslint-react/eslint-plugin`
    * - `eslint-plugin-react-hooks`
    * - `eslint-plugin-react-refresh`
    *
@@ -207,13 +230,20 @@ interface OptionsConfig {
   unocss?: boolean | OptionsUnoCSS
 
   /**
-   * Whether to use prettierrc
+   * Enable stylistic rules.
    *
-   * If true, the rules in prettierrc will override the default rules
+   * @see https://eslint.style/
+   * @default true
+   */
+  stylistic?: boolean | (StylisticConfig & OptionsOverrides)
+
+  /**
+   * Enable regexp rules.
    *
+   * @see https://ota-meshi.github.io/eslint-plugin-regexp/
    * @default true
    */
-  usePrettierrc?: boolean
+  regexp?: boolean | (OptionsRegExp & OptionsOverrides)
 
   /**
    * Use external formatters to format files.
@@ -227,32 +257,25 @@ interface OptionsConfig {
    *  "yaml": false
    *  "toml": false
    * }
-   */
-  formatter?: OptionsFormatters
-
-  /**
-   * Default prettier rules
    *
-   * @default
-   * ```json
-   * {
-   *   "arrowParens": "avoid",
-   *   "htmlWhitespaceSensitivity": "ignore"
-   *   "printWidth": 80,
-   *   "semi": false,
-   *   "singleQuote": true,
-   * }
-   * ```
+   * When set to `true`, it will enable all formatters.
    */
-  prettierRules?: PartialPrettierExtendedOptions
+  formatter?: boolean | OptionsFormatters
 
   /**
    * Control to disable some rules in editors.
    * @default auto-detect based on the process.env
    */
   isInEditor?: boolean
+
+  /**
+   * Automatically rename plugins in the config.
+   *
+   * @default true
+   */
+  autoRenamePlugins?: boolean
 }
-````
+```
 
 ## Thanks
 

eslint.config.js

@@ -1,11 +1,11 @@
+import styleMigrate from '@stylistic/eslint-plugin-migrate'
 import JITI from 'jiti'
 
 const jiti = JITI(import.meta.url)
 /**
  * @type {import('./src').defineConfig}
  */
 const { defineConfig } = jiti('./src')
-
 export default defineConfig(
   {
     vue: true,
@@ -19,4 +19,13 @@ export default defineConfig(
       'perfectionist/sort-objects': 'error',
     },
   },
+  {
+    files: ['src/configs/*.ts'],
+    plugins: {
+      'style-migrate': styleMigrate,
+    },
+    rules: {
+      'style-migrate/migrate': ['error', { namespaceTo: 'style' }],
+    },
+  },
 )

example/js.js

@@ -1,5 +1,5 @@
 function test() {}
 test()
-;[1, 2, 3, 4, 5].forEach(item => {
+;[1, 2, 3, 4, 5].forEach((item) => {
   console.error(item, 'item')
 })

example/ts.ts

@@ -5,6 +5,6 @@ function test(): string {
 }
 
 test()
-;[1, 2, 3, 4, 5].forEach(item => {
+;[1, 2, 3, 4, 5].forEach((item) => {
   console.warn(item, 'item')
 })

package.json

@@ -12,8 +12,7 @@
     "eslint-config",
     "eslint-config-vue",
     "eslint-config-react",
-    "eslint-config-svelte",
-    "prettier"
+    "eslint-config-svelte"
   ],
   "publishConfig": {
     "access": "public"
@@ -52,6 +51,7 @@
     "@eslint-react/eslint-plugin": "^1.5.8",
     "@unocss/eslint-plugin": ">=0.50.0",
     "eslint": "^8.56.0 || ^9.0.0",
+    "eslint-plugin-format": ">=0.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-svelte": "^2.34.1",
@@ -64,6 +64,9 @@
     "@unocss/eslint-plugin": {
       "optional": true
     },
+    "eslint-plugin-format": {
+      "optional": true
+    },
     "eslint-plugin-react-hooks": {
       "optional": true
     },
@@ -79,11 +82,12 @@
   },
   "dependencies": {
     "@antfu/install-pkg": "^0.3.3",
+    "@stylistic/eslint-plugin": "^2.1.0",
     "@toml-tools/parser": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "eslint-config-flat-gitignore": "^0.1.5",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-merge-processors": "^0.1.0",
     "eslint-plugin-antfu": "^2.2.0",
     "eslint-plugin-command": "^0.2.3",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -93,20 +97,19 @@
     "eslint-plugin-n": "^17.7.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-perfectionist": "^2.10.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-regexp": "^2.5.0",
     "eslint-plugin-tailwindcss": "^3.15.2",
     "eslint-plugin-unicorn": "^53.0.0",
     "eslint-plugin-unused-imports": "^3.2.0",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^9.26.0",
+    "eslint-processor-vue-blocks": "^0.1.2",
     "eslint-typegen": "^0.2.4",
     "globals": "^15.3.0",
     "jsonc-eslint-parser": "^2.4.0",
     "local-pkg": "^0.5.0",
     "parse-gitignore": "^2.0.0",
     "picocolors": "^1.0.1",
-    "prettier": "^3.2.5",
     "prettier-plugin-toml": "^2.0.1",
     "prompts": "^2.4.2",
     "vue-eslint-parser": "^9.4.2",
@@ -116,6 +119,7 @@
     "@antfu/ni": "^0.21.12",
     "@eslint-react/eslint-plugin": "^1.5.12",
     "@eslint/config-inspector": "^0.4.8",
+    "@stylistic/eslint-plugin-migrate": "^2.1.0",
     "@types/eslint": "^8.56.10",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^20.12.12",
@@ -124,6 +128,7 @@
     "@unocss/eslint-plugin": "^0.60.2",
     "bumpp": "^9.4.1",
     "eslint": "^9.3.0",
+    "eslint-plugin-format": "^0.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",