Anolilab JavaScript 样式指南的ESLint可共享配置.
Daniel Bannert的开源工作得到了社区的支持 GitHub 赞助商
安装
npm install @anolilab/eslint-config
yarn add @anolilab/eslint-config
pnpm add @anolilab/eslint-config
目的
我们的软件包为基于 JavaScript/ Typescript 的项目提供了宝贵的资源,提供了可调合性 ESLint 语录 配置 它包含一系列特征,包括性能优化和可以灵活地扩展预先定义的基础配置. 我们的目标是为代码质量和一致性提供一个有意见的坚实基础,同时仍允许根据具体项目需要定制.
-
适合工作空间的配置:通过此软件包,您单列所内的每个工作空间都获得了拥有自己定制的ESLint配置的能力. 这确保了各个项目在遵守总体准则的同时能够保持其具体的要求.
-
在您指尖上的配置: 手动您工作空间的 ESLint 配置是一个微风, 感谢预定义的基础配置的无缝组成 。 这使得您能够调整设置以适应您项目的独特需求,而不从零开始.
-
提高效率:我们通过基于文件命名惯例和项目依赖性的智能化启用插件,优化了软件包的性能。 这种简化的方法可以确保您的ESLint检查高效运行,瞄准相关文件并最大化生产率.
[注] 从v16.0.0开始,这个配置被重写到新的 ESLint 平面配置。 。 。 .
现在需要ESLint v 9.5.0+.
[尖叫声]
请记住,这是 个人配置 有很多意见 变化可能并不总是对每个人和每种用途都有效.
如果你直接使用这个配置,我建议你 每次更新时审查更改或者,如果你想要更多的控制 规则,总是觉得自由 叉出它。 谢谢!
要点
- 零配置用于许多常见的设置,但在需要时可高度配置.
- 执行可读而一致的代码,因为你读的代码比你写的还要多.
- 林特斯的文件范围很广,包括JavaScript,TypeScript,JSON,YAML,Markdown等等.
- 无需指定要插入的文件路径, 因为它会明智地插入相关文件, 尊重
.gitignore和常见的忽略模式. - 每个文件/格子的配置覆盖 .
- 第一等类型脚本支持,如果
typescript在您的工程中检测到. - 包括一整套 ESLint 插件, 如 独角兽, (中文(简体) ), 导入, (中文(简体) ), 声纳,以及 警卫 插件 。 (详见下文) 插件) (中文(简体) ).
- 自动启用基于 发动机 字段中
package.json。 。 。 . - 轻松地配置像缩进和分号那样的风格偏好,而不深潜入规则配置.
- 与 Pretier 同步工作: 我们的配置禁用会与 Pretier 相冲突 的 ESLint 规则, 允许 ESLint 专注于代码质量, Prettier 用于格式化, 如果您同时选择使用两者的话 。 然而,许多风格规则被包含在内,可以由ESLint直接执行.
使用量
我们的默认导出被设计用于ESLint的平面配置系统(例如,, eslint.config.js) (中文(简体) ). 它包含了一套全面的ESLint规则,适合现代ECMAScript(默认为ES2021+)和TypeScript项目.
要使用它,请导入 createConfig 函数从 @anolilab/eslint-config 进入您的 eslint.config.js (或 eslint.config.mjs) (中文(简体) ). 此函数允许您使用自己的设置来生成配置 .
创建 eslint.config.mjs 在您的工程根中 :
// eslint.config.mjs
import { createConfig } from "@anolilab/eslint-config";
export default createConfig();
结合遗产配置 :
如果您仍然使用遗留的 Eslintrac 格式中的配置, 您可以使用 @eslint/eslintrc 将它们转换为平面配置的软件包.
// eslint.config.mjs
import { createConfig } from "@anolilab/eslint-config";
import { FlatCompat } from "@eslint/eslintrc";
const compat = new FlatCompat();
export default createConfig(
{
ignores: [],
},
// Legacy config
...compat.config({
extends: [
"eslint:recommended",
// Other extends...
],
}),
// Other flat configs...
);
请注意:
.eslintignore不再在平面配置中工作.
或者您可以单独配置每个集成,例如:
// eslint.config.js
import { createConfig } from "@anolilab/eslint-config";
/** @type {import("@anolilab/eslint-config").PromiseFlatConfigComposer} */
export default createConfig({
// Enable stylistic formatting rules
// stylistic: true,
// `.eslintignore` is no longer supported in Flat config, use `ignores` instead
ignores: [
"**/fixtures",
// ...globs
],
// Disable jsonc and yaml support
jsonc: false,
// Or customize the stylistic rules
stylistic: {
indent: 2, // 4, or 'tab'
quotes: "single", // or 'double'
},
// TypeScript and Vue are autodetected, you can also explicitly enable them:
typescript: true,
vue: true,
yaml: false,
});
为 package.json 添加脚本
例如:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --cache --concurrency auto --fix"
}
}
工厂函数还接受任意任意自定义配置的任意覆盖 :
// eslint.config.js
import { createConfig } from "@anolilab/eslint-config";
export default createConfig(
{
// Configures for anolilab's config
},
// From the second arguments they are ESLint Flat Configs
// you can have multiple configs
{
files: ["**/*.ts"],
rules: {},
},
{
rules: {},
},
);
我们还提供了 overrides 在每个集成中选项,以方便:
// eslint.config.js
import { createConfig } from "@anolilab/eslint-config";
/** @type {import("@anolilab/eslint-config").PromiseFlatConfigComposer} */
export default createConfig({
typescript: {
overrides: {
"ts/consistent-type-definitions": ["error", "interface"],
},
},
yaml: {
overrides: {
// ...
},
},
});
IDE 支持( 自动修复保存)
QQ VS 代码支持
将以下设置添加到您的 .vscode/settings.json数字 :
{
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in your IDE, but still auto fix them
"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 }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
🟩 Neovim 支持
更新您的配置以使用以下内容:
local 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 },
}
local lspconfig = require('lspconfig')
-- Enable eslint for all supported languages
lspconfig.eslint.setup(
{
filetypes = {
"javascript",
"javascriptreact",
"javascript.jsx",
"typescript",
"typescriptreact",
"typescript.tsx",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
},
settings = {
-- Silent the stylistic rules in your IDE, but still auto fix them
rulesCustomizations = customizations,
},
}
)
Neovim 保存格式
在新维姆中
nvim-lspconfig有一个EslintFixAll命令预定义,可以在保存文件后创建自动调用此命令.
lspconfig.eslint.setup({
--- ...
on_attach = function(client, bufnr)
vim.api.nvim_create_autocmd("BufWritePre", {
buffer = bufnr,
command = "EslintFixAll",
})
end,
})
- 使用 符合。nvim。 。 。 .
- 使用 无一
- 使用 nvim-lint (日语)
使用 getFilesGlobs 用于常见文件类型
@anolilab/eslint-config 软件包还导出一个实用工具功能 getFilesGlobs 为常见文件类型提供预定义的 glob 模式。 这可以简化针对您ESLint配置对象中的特定一组文件.
您可以同时导入 createConfig数字 :
// eslint.config.js
import { createConfig, getFilesGlobs } from "@anolilab/eslint-config";
const baseConfig = createConfig();
// Get glob patterns for all JavaScript and TypeScript files
const jsTsFiles = getFilesGlobs("js_and_ts");
// Get glob patterns for Markdown files
const markdownFiles = getFilesGlobs("markdown");
// Get glob patterns for HTML related files
const htmlFiles = getFilesGlobs("html");
export default [
...baseConfig,
{
files: jsTsFiles,
// languageOptions, rules, etc., specific to JS and TS files
rules: {
// 'your-rule/for-js-ts': 'error',
},
},
{
files: markdownFiles,
// languageOptions, rules, etc., specific to Markdown files
// Often, you might use a specific processor or plugin for Markdown here
// processor: markdownProcessor, // Fictional example
// plugins: { markdownPlugin } // Fictional example
},
{
files: htmlFiles,
// languageOptions, rules, etc., specific to HTML files
},
// ... other configurations
];
类型意识规则
您可以选择启用 类型意识 通过将选项传递到 typescript 配置 :
// eslint.config.js
import { createConfig } from "@anolilab/eslint-config";
/** @type {import("@anolilab/eslint-config").PromiseFlatConfigComposer} */
export default createConfig({
typescript: {
tsconfigPath: "tsconfig.json",
},
});
公用事业
这个 getFilesGlobs 函数接受以下其中之一 FileType 字符串 :
"all":所有JavaScript,TypeScript,和声明文件."astro_ts": Astro 组件内的 TypeScript 文件."astro": Astro 组件文件(.astro) (中文(简体) )."css": CSS文件."types": TypeScript 声明文件 (.d.ts, (中文(简体) ),.d.cts, (中文(简体) ),.d.mts) (中文(简体) )."e2e": 端到端测试文件."graphql": GraphQL 文件 (.gql, (中文(简体) ),.graphql) (中文(简体) )."html": 各种类似 HTML 的模板文件 (.html, (中文(简体) ),.hbs, (中文(简体) ),.erb(见a/c.5/49/70,附件)."js_and_ts": 所有JavaScript和TypeScript源文件(不包括声明)."js": JavaScript 文件 (.js, (中文(简体) ),.mjs, (中文(简体) ),.cjs) (中文(简体) )."jsx_and_tsx"JSX和TSX档案."less": LESS文件."markdown_in_markdown": 嵌入到其他Markdown文件中的Markdown文件."markdown_inline_js_jsx":JS/JSX代码块在Markdown内部."markdown": Markdown 文件 (.md, (中文(简体) ),.mkdn(见a/c.5/49/70,附件)."postcss": PostCSS 配置文件."scss": SCSS文件."storybook":故事书故事文件."svg": SVG文件."toml": TOML 文件."ts": 所有类型脚本文件,包括声明和TSX(.ts, (中文(简体) ),.tsx, (中文(简体) ),.d.ts(见a/c.5/49/70,附件)."vitest": Vitest 测试文件."xml": XML 文件."yaml": YAML 文件 (.yaml, (中文(简体) ),.yml) (中文(简体) ).
使用 getFilesGlobs 可以通过取出特定的光彩图案来使您的配置更加可读和可维护.
插件
我们的配置集成了大量的ESLint插件,以涵盖代码质量,语言支持,安全,以及特定库/框架等各个方面. 当您的工程中检测到相关的依赖性时, 其中许多会自动启用 .
核心码质量( C)
这些插件构成我们线上规则的支柱,侧重于最佳做法、一致性和潜在的出错.
- @slint/js (英语): Core ESLint规则.
- 斯林特-插孔-独角兽各种优异的ESLint规则.
- 埃斯林特- 插孔- sonarjs: 检测出有臭虫和有臭密码的规则.
- 埃斯林特- 插座- 保证:实施JavaScript承诺的最佳做法.
- 埃斯林特-插头-s-x (原为
eslint-plugin-es:防止ES6+语法在ES5环境中被使用. - 埃斯林特-插图-antfu:由安东尼·傅作义(英语:Anthony Fu (film))执导的"倾斜"规则.
- 埃斯林特-插剂-完美药剂师: 各种数据结构的排序和排序规则.
- eslint-plugin- no- for-of-array (英语) (英语): 否定
for...of数组上的循环(促进数组方法). - 未用进口eslint-plugin: 查找并去除未使用的ES6导入.
结构化( F)
这些插件有助于维持一致的代码样式. 在包含这些内容的同时,您也可以使用Pretier格式化,我们的配置被设计为兼容.
- @stylistic/slint-plugin (英语) (和
@stylistic/eslint-plugin-ts:ESLint Stylistic,用于所有结构规则. - eslint-plugin-简单进口型: 导入排序.
- 埃斯林特-插图格式:通过ESLint启用各种文件类型的格式化,使用Pretier或其他格式化器.
语言支持和语法
超过标准JavaScript/TypeScript的特定语言或语法的插件.
- @ typescript- eslint/ eslint- plugin: 使ESLint能够将TypeScript代码擦入的工具.
- 埃斯林特-插座-杰森c:JSON,JSONC,和JSON5文件的ESLint插件.
- 埃斯林特-插图-yml: YAML 文件的ESLint插件.
- 埃斯林特-插头-托姆尔: TOML 文件的ESLint插件.
- 埃斯林特- 插头- html: 一个ESLint插件,用于从HTML文件中取出并插入脚本标记.
- @html-eslint/eslint-plugin (英语): HTML 文件的替代ESLint插件.
- @ slint/ 标记下: Markdown文档中的Lint JavaScript代码块.
- 埃斯林特- 插头- astro: Astro组件的ESLint插件.
导入模块系统( M)
管理进口和模块结构.
- 埃斯林特-插口-进口-x (原为
eslint-plugin-import: Linting of ES2015+(ES6+)进出口语法,并防止文件路径误写出问题,并导入名称.- 用途
eslint-import-resolver-node财务报告和审定财务报表eslint-import-resolver-typescript。 。 。 .
- 用途
- 埃斯林特-插头-n (原为
eslint-plugin-node: 为Node.js附加ESLint规则.
警卫
插件的重点是查明潜在的安全弱点.
- 安全保护:ESLint规则为节点安全.
- 埃斯林特-插座-无机密:一个能检测出潜在机密/证据的ESLint插件.
- 埃斯林特- 插剂- 无未卫生: ESLint 插件,用于关于不可信输入的安全相关规则.
测试
各种测试框架和做法的插件.
- eslint-plugin- 不只测试: 否定
.only调用测试文件. - eslint-plugin-测试-图书馆: 测试库的ESLint插件.
- 埃斯林特- 插座- 播放器: Playwright 的ESLint插件.
框架和图书馆
支持具体的UI框架、图书馆和工具.
- @eslint-resact/slint-plugin (英语): 用于React的综合性ESLint插件.
- eslint-plugin- react-hooks (英语):ESLint规则反应钩.
- eslint-plugin-反应再现: 强制采用最佳做法进行快速更新.
- 埃斯林特-插头-jsx-a11y: JSX元素无障碍规则静态AST检查器.
- 斯林特- 插头- validate- jsx- 清除:验证JSX元素筑巢.
- 斯林特-插管-尾风: Tailwind CSS的ESLint插件.
- 埃斯林特-插图-故事手册:"故事书"的最佳实践规则.
- @tastack/eslint-plugin-query (英语):ESLint规则为谭斯特克查询.
- @tastack/slint-plugin-router (英语):ESLint规则为TanStack路由器.
- 翻译::UnoCSS的ESLint插件.
- 埃斯林特- 插座- 佐德: EsLint规则为"Zod schemas".
- 埃斯林特-插座-你-唐特-需要-低分数: 鼓励在Lodash/Underscore上使用本地JavaScript方法.
文档和评论
- @eslint-community/eslint-plugin-slint-committs 互联网档案馆的存檔,存档日期2013-12-02 (原为
eslint-plugin-eslint-comments: ESLint指令注释的补充ESLint规则(第1行)/*eslint-...*/) (中文(简体) ). - 埃斯林特-插孔-jsdoc: JSDoc具体规则.
- eslint-plugin-tsdoc 语录: TSDoc特定的起伏规则.
兼容性和其他
- 埃斯林特- 插头- compat: 将浏览器兼容您的代码.
- 埃斯林特- 配置- 平面- 吉提格诺:平面配置中使用.gitignore的功能.
- 斯林特平面配置图: 使用ESLint平面配置的公用事业.
- eslint 合并处理器: 合并ESLint处理器的功能.
- @slint/compat (英语): ESLint平面配置和斯林特克相容的公用事业.
已用插件列表( 压缩)
此列表是一个更压缩的版本,如果插件是特定的或基于效用的,则并非详尽无遗. 它旨在提供初级活性起伏插件的快速概览.
@eslint/js@stylistic/eslint-plugin@typescript-eslint/eslint-plugin@eslint-community/eslint-plugin-eslint-comments@eslint-react/eslint-plugin@tanstack/eslint-plugin-query@tanstack/eslint-plugin-router@unocss/eslint-plugineslint-plugin-antfueslint-plugin-astroeslint-plugin-compateslint-plugin-es-xeslint-plugin-formateslint-plugin-html(或@html-eslint/eslint-plugin(中文(简体) )eslint-plugin-import-xeslint-plugin-jsdoceslint-plugin-jsonceslint-plugin-jsx-a11yeslint-plugin-neslint-plugin-no-only-testseslint-plugin-no-secretseslint-plugin-no-unsanitizedeslint-plugin-perfectionisteslint-plugin-playwrighteslint-plugin-promiseeslint-plugin-react-hookseslint-plugin-regexp(通常是SonarJS等其他插件的依赖性)eslint-plugin-securityeslint-plugin-simple-import-sorteslint-plugin-sonarjseslint-plugin-storybookeslint-plugin-tailwindcsseslint-plugin-testing-libraryeslint-plugin-tomleslint-plugin-tsdoceslint-plugin-unicorneslint-plugin-unused-importseslint-plugin-ymleslint-plugin-zodeslint-plugin-you-dont-need-lodash-underscore
我们对格式化的姿态
这种ESLint配置包括了可以格式化你的JavaScript和TypeScript代码的样式规则,促进了一致性.
- 作为主要工具的 ESLint : 对于JS/TS文件,我们鼓励使用ESLint同时进行林入代码质量和强制执行代码样式. 上面的VSCode设置被配置为使用ESLint作为这些文件的默认事由.
- 与Pretier合作: 如果您在您的工程中使用了 Pretier, 此配置被设计为兼容 。 它禁用与Pretier格式化决定相冲突的ESLint规则。 您可以让 Pretier 处理文件ESLint 格式化不覆盖(如 CSS, HTML等), 或者甚至使用 Pretier 来进行 JS/ TS 格式化, 然后让 ESLint 应用进一步修正 。 然而,为了简化JS/TS的经验,让ESLint处理所有方面(质量和风格)往往比较简单.
Lint staged / 预承诺钩
为了确保代码在承诺前被嵌入并固定,我们建议与承诺前的工具相融合,比如: lint-staged 财务报告和审定财务报表 husky我们的姐妹包裹, @anolilab/lint-staged-config,旨在与这种ESLint配置无缝工作.
示例 lint-staged 在您的配置 package.json (或相关文件):
// package.json
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --fix"
// Add other linters for other file types if needed
}
}
保证 husky 设置运行 lint-staged 承诺前.
版本政策
该项目旨在遵循语义版.
- 主要版本: 可能包括打破对ESLint配置的修改,Node.js版本支持,或重大插件修改.
- 小版本 : 可引入新的非突破规则,允许默认的新插件(如果非突破),或以新选项更新已存在的规则.
- 补丁版本 : 通常包括错误修正或小调来统治配置.
规则严格性的变化(例如,将`警告'改为`错误')在小版本中出现,如果它们反映了不断演变的最佳做法。 我们建议在更新时审查变化.
问答
为什么不是标准
标准规格认为,每个人都不应在个性化规格中浪费时间,而整个社区应统一规格. 这个声明是有道理的,但它违背了ESLint的设计哲学. 你不记得ESLint如何打败JSHint, 因为ESLint主张的插件和配置.
因此, @anolilab/eslint-config 也继承了ESLint的哲学. 它不会强迫你使用我们的配置.
相关
支持的节点.js版本
这一生态系统中的图书馆尽最大努力追踪 Node.js的释放时间表。 。 。 .
这里 关于为什么我们认为这很重要的文章。 。 。 .
捐款
说明: 请注意,该项目已连同《协助者行为守则》一起公布。 通过参加这个项目,你同意遵守其条款.
贷项
-
受到以下组合的启发并感恩:
- eslint - 配置 - 空降
- 埃斯林特- 配置- 动画
- @antfu/eslint-config (就其现代做法和明确文件)
在阿诺利拉布制造的
这是一个开源项目,将永远可以自由使用。 如果你觉得很酷. 阿诺利拉布 是一个开发与AI工作室。 联系时间: 你好@anolilab.com 如果你需要帮助 这些技术 或者想打个招呼!
许可证
Anolilab eslint-config是开源软件,根据该软件许可 麻省理工学院