963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
5.6 KiB
5.6 KiB
name, description
| name | description |
|---|---|
| antfu-eslint-config | Configuring @antfu/eslint-config for framework support, formatters, and rule overrides. Use when adding React/Vue/Svelte/Astro support, customizing rules, or setting up VS Code integration. |
@antfu/eslint-config
Handles both linting and formatting (no Prettier needed). Auto-detects TypeScript and Vue.
Style: Single quotes, no semicolons, sorted imports, dangling commas.
Configuration Options
import antfu from '@antfu/eslint-config';
export default antfu({
// Project type: 'lib' for libraries, 'app' (default) for applications
type: 'lib',
// Global ignores (extends defaults, doesn't override)
ignores: ['**/fixtures', '**/dist'],
// Stylistic options
stylistic: {
indent: 2, // 2, 4, or 'tab'
quotes: 'single', // or 'double'
},
// Framework support (auto-detected, but can be explicit)
typescript: true,
vue: true,
// Disable specific language support
jsonc: false,
yaml: false,
});
Framework Support
Vue
Vue accessibility:
export default antfu({
vue: {
a11y: true,
},
});
// Requires: pnpm add -D eslint-plugin-vuejs-accessibility
React
export default antfu({
react: true,
});
// Requires: pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh
Next.js
export default antfu({
nextjs: true,
});
// Requires: pnpm add -D @next/eslint-plugin-next
Svelte
export default antfu({
svelte: true,
});
// Requires: pnpm add -D eslint-plugin-svelte
Astro
export default antfu({
astro: true,
});
// Requires: pnpm add -D eslint-plugin-astro
Solid
export default antfu({
solid: true,
});
// Requires: pnpm add -D eslint-plugin-solid
UnoCSS
export default antfu({
unocss: true,
});
// Requires: pnpm add -D @unocss/eslint-plugin
Formatters (CSS, HTML, Markdown)
For files ESLint doesn't handle natively:
export default antfu({
formatters: {
css: true, // Format CSS, LESS, SCSS (uses Prettier)
html: true, // Format HTML (uses Prettier)
markdown: 'prettier', // or 'dprint'
},
});
// Requires: pnpm add -D eslint-plugin-format
Rule Overrides
Global overrides
export default antfu(
{
// First argument: antfu config options
},
// Additional arguments: ESLint flat configs
{
rules: {
'style/semi': ['error', 'never'],
},
},
);
Per-integration overrides
export default antfu({
vue: {
overrides: {
'vue/operator-linebreak': ['error', 'before'],
},
},
typescript: {
overrides: {
'ts/consistent-type-definitions': ['error', 'interface'],
},
},
});
File-specific overrides
export default antfu(
{ vue: true, typescript: true },
{
files: ['**/*.vue'],
rules: {
'vue/operator-linebreak': ['error', 'before'],
},
},
);
Plugin Prefix Renaming
The config renames plugin prefixes for consistency:
| New Prefix | Original |
|---|---|
ts/* |
@typescript-eslint/* |
style/* |
@stylistic/* |
import/* |
import-lite/* |
node/* |
n/* |
yaml/* |
yml/* |
test/* |
vitest/* |
next/* |
@next/next |
Use the new prefix when overriding or disabling rules:
// eslint-disable-next-line ts/consistent-type-definitions
type Foo = { bar: 2 };
Type-Aware Rules
Enable TypeScript type checking:
export default antfu({
typescript: {
tsconfigPath: 'tsconfig.json',
},
});
Config Composer API
Chain methods for flexible composition:
export default antfu()
.prepend(/* configs before main */)
.override('antfu/stylistic/rules', {
rules: {
'style/generator-star-spacing': ['error', { after: true, before: false }],
},
})
.renamePlugins({
'old-prefix': 'new-prefix',
});
Less Opinionated Mode
Disable Anthony's most opinionated rules:
export default antfu({
lessOpinionated: true,
});
Lint-Staged Setup
{
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
pnpm add -D lint-staged simple-git-hooks
npx simple-git-hooks
VS Code Settings
Add to .vscode/settings.json:
{
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never",
},
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off", "fixable": true },
{ "rule": "format/*", "severity": "off", "fixable": true },
{ "rule": "*-indent", "severity": "off", "fixable": true },
{ "rule": "*-spacing", "severity": "off", "fixable": true },
{ "rule": "*-spaces", "severity": "off", "fixable": true },
{ "rule": "*-order", "severity": "off", "fixable": true },
{ "rule": "*-dangle", "severity": "off", "fixable": true },
{ "rule": "*-newline", "severity": "off", "fixable": true },
{ "rule": "*quotes", "severity": "off", "fixable": true },
{ "rule": "*semi", "severity": "off", "fixable": true },
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"astro",
"svelte",
"css",
"less",
"scss",
],
}