chore: wip

Author: chrisbbreuer

storage/framework/stacks/core/eslint-config/README.md

@@ -12,15 +12,16 @@ Forked from [`@antfu/eslint-config`](https://github.com/antfu/eslint-config)
 
 - Single quotes, no semi
 - Auto fix for formatting (aimed to be used standalone **without** Prettier)
+- Sorted imports, dangling commas
+- Reasonable defaults, best practices, only one line of config
 - Designed to work with TypeScript, JSX, Vue out-of-box
 - Lints also for json, yaml, toml, 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://github.com/eslint-stylistic/eslint-stylistic)
 - Respects `.gitignore` by default
-- Optional [formatters](#formatters) support for CSS, HTML, TOML, etc.
+- Optional [React](#react), [Svelte](#svelte), [UnoCSS](#unocss) support
+- Optional [formatters](#formatters) support for CSS, HTML, etc.
 - **Style principle**: Minimal for reading, stable for diff, consistent
 
 > [!IMPORTANT]
@@ -54,6 +55,9 @@ const antfu = require('@antfu/eslint-config').default
 module.exports = antfu()
 ```
 
+> [!TIP]
+> ESLint only detects `eslint.config.js` as the flat config entry, meaning you need to put `type: module` in your `package.json` or you have to use CJS in `eslint.config.js`. If you want explicit extension like `.mjs` or `.cjs`, or even `eslint.config.ts`, you can install [`eslint-ts-patch`](https://github.com/antfu/eslint-ts-patch) to fix it.
+
 Combined with legacy config:
 
 ```js
@@ -309,7 +313,10 @@ Certain rules would only be enabled in specific files, for example, `ts/*` rules
 import antfu from '@antfu/eslint-config'
 
 export default antfu(
-  { vue: true, typescript: true },
+  {
+    vue: true,
+    typescript: true
+  },
   {
     // Remember to specify the file glob here, otherwise it might cause the vue plugin to handle non-vue files
     files: ['**/*.stx'],
@@ -326,23 +333,28 @@ export default antfu(
 )
 ```
 
-We also provided an `overrides` options to make it easier:
+We also provided a `overrides` options in each integration to make it easier:
 
 ```js
 // eslint.config.js
 import antfu from '@antfu/eslint-config'
 
 export default antfu({
-  overrides: {
-    vue: {
+  vue: {
+    overrides: {
       'vue/operator-linebreak': ['error', 'before'],
     },
-    typescript: {
+  },
+  typescript: {
+    overrides: {
       'ts/consistent-type-definitions': ['error', 'interface'],
     },
-    yaml: {},
-    // ...
-  }
+  },
+  yaml: {
+    overrides: {
+      // ...
+    },
+  },
 })
 ```
 
@@ -408,6 +420,25 @@ 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
 ```
 
+#### Svelte
+
+To enable svelte support, you need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  svelte: true,
+})
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-svelte
+```
+
 #### UnoCSS
 
 To enable UnoCSS support, you need to explicitly turn it on:
@@ -540,15 +571,15 @@ Meanwhile, we do have dprint integrations for formatting other files such as `.m
 
 You can opt-in to the [`formatters`](#formatters) feature to format your CSS. Note that it's only doing formatting, but not linting. If you want proper linting support, give [`stylelint`](https://stylelint.io/) a try.
 
-### I prefer XXX
+### I prefer XXX...
 
 Sure, you can configure and override rules locally in your project to fit your needs. If that still does not work for you, you can always fork this repo and maintain your own.
 
 ## Check Also
 
 - [antfu/dotfiles](https://github.com/antfu/dotfiles) - My dotfiles
 - [antfu/vscode-settings](https://github.com/antfu/vscode-settings) - My VS Code settings
-- [antfu/ts-starter](https://github.com/antfu/ts-starter) - My starter template for TypeScript library
+- [antfu/starter-ts](https://github.com/antfu/starter-ts) - My starter template for TypeScript library
 - [antfu/vitesse](https://github.com/antfu/vitesse) - My starter template for Vue & Vite app
 
 ## License

storage/framework/stacks/core/eslint-config/src/configs/formatters.ts

@@ -1,7 +1,6 @@
-import * as parserPlain from 'eslint-parser-plain'
 import { GLOB_CSS, GLOB_LESS, GLOB_MARKDOWN, GLOB_POSTCSS, GLOB_SCSS } from '../globs'
 import type { VendoredPrettierOptions } from '../vender/prettier-types'
-import { ensurePackages, interopDefault } from '../utils'
+import { ensurePackages, interopDefault, parserPlain } from '../utils'
 import type { FlatConfigItem, OptionsFormatters, StylisticConfig } from '../types'
 import { StylisticConfigDefaults } from './stylistic'
 
@@ -151,6 +150,7 @@ export async function formatters(
           'error',
           formater === 'prettier'
             ? {
+                printWidth: 120,
                 ...prettierOptions,
                 embeddedLanguageFormatting: 'off',
                 parser: 'markdown',

storage/framework/stacks/core/eslint-config/src/configs/imports.ts

@@ -15,6 +15,7 @@ export async function imports(options: OptionsStylistic = {}): Promise<FlatConfi
       },
       rules: {
         'antfu/import-dedupe': 'error',
+        'antfu/no-import-dist': 'error',
         'antfu/no-import-node-modules-by-path': 'error',
 
         'import/first': 'error',

storage/framework/stacks/core/eslint-config/src/configs/index.ts

@@ -11,6 +11,7 @@ export * from './formatters'
 export * from './react'
 export * from './sort'
 export * from './stylistic'
+export * from './svelte'
 export * from './test'
 export * from './typescript'
 export * from './unicorn'

storage/framework/stacks/core/eslint-config/src/configs/markdown.ts

@@ -1,8 +1,7 @@
-import * as parserPlain from 'eslint-parser-plain'
 import { mergeProcessors, processorPassThrough } from 'eslint-merge-processors'
 import type { FlatConfigItem, OptionsComponentExts, OptionsFiles, OptionsOverrides } from '../types'
 import { GLOB_MARKDOWN, GLOB_MARKDOWN_CODE, GLOB_MARKDOWN_IN_MARKDOWN } from '../globs'
-import { interopDefault } from '../utils'
+import { interopDefault, parserPlain } from '../utils'
 
 export async function markdown(
   options: OptionsFiles & OptionsComponentExts & OptionsOverrides = {},

storage/framework/stacks/core/eslint-config/src/configs/stylistic.ts

@@ -1,5 +1,5 @@
 import { interopDefault } from '../utils'
-import type { FlatConfigItem, StylisticConfig } from '../types'
+import type { FlatConfigItem, OptionsOverrides, StylisticConfig } from '../types'
 import { pluginAntfu } from '../plugins'
 
 export const StylisticConfigDefaults: StylisticConfig = {
@@ -9,10 +9,13 @@ export const StylisticConfigDefaults: StylisticConfig = {
   semi: false,
 }
 
-export async function stylistic(options: StylisticConfig = {}): Promise<FlatConfigItem[]> {
+export async function stylistic(
+  options: StylisticConfig & OptionsOverrides = {},
+): Promise<FlatConfigItem[]> {
   const {
     indent,
     jsx,
+    overrides = {},
     quotes,
     semi,
   } = {
@@ -46,6 +49,8 @@ export async function stylistic(options: StylisticConfig = {}): Promise<FlatConf
         'antfu/top-level-function': 'error',
 
         'curly': ['error', 'multi-or-nest', 'consistent'],
+
+        ...overrides,
       },
     },
   ]

storage/framework/stacks/core/eslint-config/src/configs/svelte.ts

@@ -0,0 +1,106 @@
+import { ensurePackages, interopDefault } from '../utils'
+import type { FlatConfigItem, OptionsFiles, OptionsHasTypeScript, OptionsOverrides, OptionsStylistic } from '../types'
+import { GLOB_SVELTE } from '../globs'
+
+export async function svelte(
+  options: OptionsHasTypeScript & OptionsOverrides & OptionsStylistic & OptionsFiles = {},
+): Promise<FlatConfigItem[]> {
+  const {
+    files = [GLOB_SVELTE],
+    overrides = {},
+    stylistic = true,
+  } = options
+
+  const {
+    indent = 2,
+    quotes = 'single',
+  } = typeof stylistic === 'boolean' ? {} : stylistic
+
+  await ensurePackages([
+    'eslint-plugin-svelte',
+  ])
+
+  const [
+    pluginSvelte,
+    parserSvelte,
+  ] = await Promise.all([
+    interopDefault(import('eslint-plugin-svelte')),
+    interopDefault(import('svelte-eslint-parser')),
+  ] as const)
+
+  return [
+    {
+      name: 'antfu:svelte:setup',
+      plugins: {
+        svelte: pluginSvelte,
+      },
+    },
+    {
+      files,
+      languageOptions: {
+        parser: parserSvelte,
+        parserOptions: {
+          extraFileExtensions: ['.svelte'],
+          parser: options.typescript
+            ? await interopDefault(import('@typescript-eslint/parser')) as any
+            : null,
+        },
+      },
+      name: 'antfu:svelte:rules',
+      rules: {
+        'import/no-mutable-exports': 'off',
+        'no-undef': 'off', // incompatible with most recent (attribute-form) generic types RFC
+        'no-unused-vars': ['error', {
+          args: 'none',
+          caughtErrors: 'none',
+          ignoreRestSiblings: true,
+          vars: 'all',
+          varsIgnorePattern: '^\\$\\$Props$',
+        }],
+
+        'svelte/comment-directive': 'error',
+        'svelte/no-at-debug-tags': 'warn',
+        'svelte/no-at-html-tags': 'error',
+        'svelte/no-dupe-else-if-blocks': 'error',
+        'svelte/no-dupe-style-properties': 'error',
+        'svelte/no-dupe-use-directives': 'error',
+        'svelte/no-dynamic-slot-name': 'error',
+        'svelte/no-export-load-in-svelte-module-in-kit-pages': 'error',
+        'svelte/no-inner-declarations': 'error',
+        'svelte/no-not-function-handler': 'error',
+        'svelte/no-object-in-text-mustaches': 'error',
+        'svelte/no-reactive-functions': 'error',
+        'svelte/no-reactive-literals': 'error',
+        'svelte/no-shorthand-style-property-overrides': 'error',
+        'svelte/no-unknown-style-directive-property': 'error',
+        'svelte/no-unused-svelte-ignore': 'error',
+        'svelte/no-useless-mustaches': 'error',
+        'svelte/require-store-callbacks-use-set-param': 'error',
+        'svelte/system': 'error',
+        'svelte/valid-compile': 'error',
+        'svelte/valid-each-key': 'error',
+
+        'unused-imports/no-unused-vars': [
+          'error',
+          { args: 'after-used', argsIgnorePattern: '^_', vars: 'all', varsIgnorePattern: '^(_|\\$\\$Props$)' },
+        ],
+
+        ...stylistic
+          ? {
+              'style/no-trailing-spaces': 'off', // superseded by svelte/no-trailing-spaces
+              'svelte/derived-has-same-inputs-outputs': 'error',
+              'svelte/html-closing-bracket-spacing': 'error',
+              'svelte/html-quotes': ['error', { prefer: quotes }],
+              'svelte/indent': ['error', { alignAttributesVertically: true, indent }],
+              'svelte/mustache-spacing': 'error',
+              'svelte/no-spaces-around-equal-signs-in-attribute': 'error',
+              'svelte/no-trailing-spaces': 'error',
+              'svelte/spaced-html-comment': 'error',
+            }
+          : {},
+
+        ...overrides,
+      },
+    },
+  ]
+}

storage/framework/stacks/core/eslint-config/src/configs/typescript.ts

@@ -1,6 +1,6 @@
 import process from 'node:process'
+import { GLOB_SRC, GLOB_TS, GLOB_TSX } from '../globs'
 import type { FlatConfigItem, OptionsComponentExts, OptionsFiles, OptionsOverrides, OptionsTypeScriptParserOptions, OptionsTypeScriptWithTypes } from '../types'
-import { GLOB_SRC } from '../globs'
 import { pluginAntfu } from '../plugins'
 import { interopDefault, renameRules, toArray } from '../utils'
 
@@ -18,6 +18,8 @@ export async function typescript(
     ...componentExts.map(ext => `**/*.${ext}`),
   ]
 
+  const filesTypeAware = options.filesTypeAware ?? [GLOB_TS, GLOB_TSX]
+
   const typeAwareRules: FlatConfigItem['rules'] = {
     'dot-notation': 'off',
     'no-implied-eval': 'off',
@@ -89,7 +91,6 @@ export async function typescript(
           '@typescript-eslint/',
           'ts/',
         ),
-
         'no-dupe-class-members': 'off',
         'no-loss-of-precision': 'off',
         'no-redeclare': 'off',
@@ -115,7 +116,13 @@ export async function typescript(
         'ts/prefer-ts-expect-error': 'error',
         'ts/triple-slash-reference': 'off',
         'ts/unified-signatures': 'off',
-
+        ...overrides,
+      },
+    },
+    {
+      files: filesTypeAware,
+      name: 'antfu:typescript:rules-type-aware',
+      rules: {
         ...tsconfigPath ? typeAwareRules : {},
         ...overrides,
       },