🌟特性
这是我个人的ESlint配置，基于优秀 @antfu/eslint-config。因为我几乎完全同意安东尼的风格选择，所以它只会因为一些小的调整和个人喜好而偏离。
该配置可以很好地与 Nuxt ESLint 模块，并通过使用 eslint-plugin-tailwindcss
一些主要特征，直接继承自 @antfu/eslint-config：
- Vue和TypeScript支持
- 支持Json， Yaml, Markdown
- 使用易于扩展的 ESLint平面配置
- 包括 ESLint风格 要格式化代码并强制执行预配置的样式(更漂亮，不是必需的，也不是官方支持的）
- …还有更多（请查看其文档以获取完整列表）
我自己的定制和偏好：
- （一般）在控制语句中强制使用花括号
- (一般)禁用
antfu/top-level-function允许在顶级函数上使用箭头语法 - （pnpm）也强制执行
trustPolicyIgnoreAfter: 43200（30天）pnpm-workspace.yaml，所以trustPolicy: no-downgrade检查跳过没有出处的旧版本（例如backports），避免误报 - (Vue - 可选)设置每行HTML元素的最大允许属性(
10单行模式,1多行) - (Vue - 可选)设置块顺序为
<template>，<script>，<style> - (顺风 可选)加强Tailwind的最佳实践和一致性，主要是类名排序(直接从
eslint-plugin-tailwindcss） - (Vue - 可选可达性（a11y）通过
eslint-plugin-vuejs-accessibility，这个包附带了依赖项，所以不需要单独安装，只需要启用该选项 - …还有一些其他的小调整
🛠️设置
安装
pnpm i -D eslint @stefanobartoletti/eslint-config
配置
与 "type": "module" 在 package.json (推荐):
基本的使用
使用不带参数的默认配置将使用以下命令 @antfu/eslint-config 默认选项：
- 自动侦测Vue
- 自动侦测打印稿
- 启用ESlint样式
// eslint.config.js
import { stefanobartoletti } from '@stefanobartoletti/eslint-config'
export default stefanobartoletti()
设置选项和使用自定义规则
可以使用以下配置添加自定义规则。
- 第一个项必须包含要传递给的选项
@antfu/eslint-config(详细阅读 它的文档 以获取可能的选项)。 即使空着，它也必须一直存在。 - 从第二项开始，你可以根据需要添加任意多的自定义ESlint平面配置对象。
// eslint.config.js
import { stefanobartoletti } from '@stefanobartoletti/eslint-config'
export default stefanobartoletti(
// @antfu/eslint-config options, must be the first argument
{
stylistic: false,
},
// Addtionals flat configs start from here
{
rules: {
curly: 'off',
},
},
)
使用可选的Vue和Tailwind规则
这个包还提供了Vue和Tailwind的可选配置。它们可以一起使用，也可以单独使用，还可以与其他自定义规则一起使用。
// eslint.config.js
import { stefanobartoletti, tailwind, vue } from '@stefanobartoletti/eslint-config'
export default stefanobartoletti(
{}, // @antfu/eslint-config options, must always be present as first item even if empty
vue,
tailwind(),
{
// ESlint Flat config rule object
},
)
[!警告) 从
v2.x，则必须显式导入所有与vue相关的自定义规则vue关键。它们以前包含在基本配置中，即使在不真正需要或Vue插件未激活时也会自动激活。
配置顺风
tailwind 是一个函数，因为 eslint-plugin-tailwindcss v4 目标顺风CSS v4，需要一个 共享 settings.tailwindcss 对象，最明显的 cssConfigPath，指向项目的主Tailwind CSS文件。插件接受的任何选项都可以通过：
// eslint.config.js
import { stefanobartoletti, tailwind } from '@stefanobartoletti/eslint-config'
export default stefanobartoletti(
{},
tailwind({
cssConfigPath: './src/styles/tailwind.css',
}),
)
[!警告) 从
v6.x，只支持Tailwind v4 ！ 此外，您不再需要手动安装eslint-plugin-tailwindcss作为开发依赖项。
Vue可访问性（a11y）检测
这个包裹运送 eslint-plugin-vuejs-accessibility 作为一个依赖项，所以它总是可用的，不需要单独安装。默认情况下它是禁用的，和 @antfu/eslint-config 本身，因为启用它可以显示现有标记上的实际发现，而不是透明的更新。打开它 @antfu/eslint-config的自己的 vue.a11y 的第一个参数中传递 stefanobartoletti()：
// eslint.config.js
import { stefanobartoletti, vue } from '@stefanobartoletti/eslint-config'
export default stefanobartoletti(
{
vue: { a11y: true },
},
vue,
)
[！提示) 插件的默认值
label-has-for规则要求标签为 两个 嵌套在控件周围 和 通过for/id，有效的HTML只需要其中之一。如果这对你的标记来说太严格了，可以在每个项目中通过附加重写来放松它：export default stefanobartoletti( { vue: { a11y: true } }, vue, { files: ['**/*.vue'], rules: { 'vue-a11y/label-has-for': [ 'error', { required: { some: ['nesting', 'id'] } } ], }, }, )
与next集成
[!请注意) 这个包过去用于提供与next一起使用的自定义规则，但是最新版本的官方next配置有效地使它们变得冗余和不必要。
从
v3.x当这个包中删除了nuext规则时，建议使用这个配置的方法是直接将它与nuext模块集成。
-
安装ESLint模块
npx nuxi module add eslint，如 官方文档 -
将其设置为“standalone”，以防止与
@antfu/eslint-config：
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/eslint',
],
eslint: {
config: {
standalone: false, // <-- Important to work correctly
},
},
})
- 通过将其添加到next提供的配置中来集成此配置：
// eslint.config.js
import { stefanobartoletti, tailwind, vue } from '@stefanobartoletti/eslint-config'
import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
// More ESlint Flat configs, appended to Nuxt's
)
.prepend(
stefanobartoletti(
{}, // Antfu Options, required
vue, // Optional, but recommended to follow this config style preferences
tailwind(), // Optional, depending on the project
),
)
📝VS代码支持
如果你使用VS Code，你应该手动启用对ESLint平面配置的支持。
安装 VS Code ESLint扩展.
将以下设置添加到 .vscode/settings.json：
{
// Enable the ESLint flat config support
"eslint.experimental.useFlatConfig": true
}
要了解更多设置，请查看中的“VS Code支持”部分 antfu / eslint-config
🤝贡献
[!请注意) 如果你想贡献你可以从阅读 贡献指南.
[!重要的) 我非常乐意接受关于改进和贡献的建议，并尝试修复可能出现在其他人特定环境中的问题，以允许该软件包也用于其他人的项目。
无论如何，请记住这是我的个人配置，其主要目标是根据我的偏好和我个人每天使用的支持工具和框架，提供一个可共享的基础，供我自己的项目使用。
不幸的是，我没有时间和资源来支持我目前没有使用的框架、工具或特性。ESlint Flat配置非常容易自定义，如果我的设置不能满足你的需要，但你仍然想要构建antfu的，你可以使用这个存储库作为你自己自定义的基础。
📝许可证
©2023年至今 斯特凡诺Bartoletti