@fuf-stack/eslint-config-fuf
观点 Fröhlich QQ Frei ESLint + Pretier配置 JavaScript/TypeScript项目,具有可选的React,故事本,Vitest和Tailwind CSS集成.
- 基础: Airbnb扩展(推荐,平面)+ESLint推荐 + Pretier + Fröhlich + Frei 默认
- 类型脚本数字 :
@typescript-eslint以明智的规则和通过 root 解析类型tsconfig.json - 反应: Airbnb React + Hooks, JSX 运行时间,故事本覆盖
- JSDoc 严格: TypeScript 界面成员 Opt- in描述
- 维特数字 :
plugin:vitest/recommended测试文件 - 高级: 导入排序、可选的 Tailwind 类排序和可选 Astro/ PHP 支持
安装
选择软件包管理器 .
# pnpm
pnpm add -D @fuf-stack/eslint-config-fuf
# npm
npm i -D @fuf-stack/eslint-config-fuf
# yarn
yarn add -D @fuf-stack/eslint-config-fuf
此软件包捆绑了所需的对等工具( slint, better, 插件) , 所以您不需要单独安装 .
迁移到 v1. 0.0( ESLint 9平方配置 ) ? 见Migalation.md在这个包裹.
使用量
创建一个 ESLint 配置, 以扩展提供的一个切入点 .
基地(节点/JS/TS)——平面配置(ESLint 9)
// eslint.config.mjs
import path from 'node:path';
import { includeIgnoreFile } from '@eslint/compat';
import base from '@fuf-stack/eslint-config-fuf/base';
const gitignorePath = path.resolve('.', '.gitignore');
export default [includeIgnoreFile(gitignorePath), ...base];
反应(JS/TS + 反应 + 故事本覆盖) ——平面配置(ESLint 9)
// eslint.config.mjs
import path from 'node:path';
import { includeIgnoreFile } from '@eslint/compat';
import react from '@fuf-stack/eslint-config-fuf/react';
const gitignorePath = path.resolve('.', '.gitignore');
export default [includeIgnoreFile(gitignorePath), ...react];
Vitest( 只测试文件)
如果您想要测试文件的Vitest规则, 请在基础/反应配置后添加 Vitest 配置 :
// eslint.config.mjs
import path from 'node:path';
import { includeIgnoreFile } from '@eslint/compat';
import react from '@fuf-stack/eslint-config-fuf/react';
import vitest from '@fuf-stack/eslint-config-fuf/vitest';
const gitignorePath = path.resolve('.', '.gitignore');
export default [includeIgnoreFile(gitignorePath), ...react, ...vitest];
注释:
- 类型感知林入使用您的根
tsconfig.json。添加任何额外的文件(例如虚拟配置)到include在那座乐园里,你们不要分别使用tsconfig.eslint.json。 。 。 .
示例根 tsconfig.json 添加数 :
{
"extends": "@fuf-stack/typescript-config/base.json",
"include": ["src", "test", "vitest.config.mts", "vitest.workspace.ts"]
}
里面的东西
base作曲: 气分基础通过eslint-config-airbnb-extended+ Fröhlich === Frei Base/ts规则(文档(中文(简体) )react作曲:Airbnb反应+钩子通过eslint-config-airbnb-extended+ jsx-runtime + Fröhlich + Frei 基础/反应/ts规则; 故事书覆盖*.stories.ts(x)vitest扩展 :plugin:vitest/recommended页:1*.spec.*编号 :*.test.*每一JS/TS分机的档案js, (中文(简体) ),mjs, (中文(简体) ),cjs, (中文(简体) ),jsx, (中文(简体) ),ts, (中文(简体) ),mts, (中文(简体) ),cts, (中文(简体) ),tsx) 放松起来import/no-extraneous-dependencies在试验和试验中vitest.config.*编号 :vitest.workspace.*- Fröhlich的Frei规则包括:
- 允许为有意未使用的 vars 设置主下划线
- 执行箭头函数组件; 通过函数默认参数执行默认道具
- 一致的纯类型进口; ts/tsx/js/jsx的进口扩展(
import-x(中文(简体) ) - 界面成员在空白行组内按字母排序
- 初步格式化为唯一的真相来源
TypeScript 接口成员
两者 base 财务报告和审定财务报表 react 使用情况 perfectionist/sort-interfaces 以排序成员
按字母顺序,忽略大小写。 可选的和必要的成员排序在一起.
空行分隔组:成员在每组内排序,永不交叉
这些界限。 评论保留在其成员的后面;仅评论本身不包括在内
创建新组. eslint --fix 应用命令更改并保存组
间距。 文件是可选的.
interface RequestOptions {
retry?: boolean;
timeout: number;
onError?: (error: Error) => void;
onSuccess?: () => void;
}
现有的超载辅助检查仍然能够用于接口、功能和
课程。 项目可以通过压倒性来自定义排序 perfectionist/sort-interfaces
在共享配置后.
专辑 JSDoc 严格
添加 jsdoc-strict 之后 base 或者说 react 需要说明
TypeScript 界面属性、方法和索引签名 .ts 财务报告和审定财务报表 .tsx 文件 :
// eslint.config.mjs
import base from '@fuf-stack/eslint-config-fuf/base';
import jsdocStrict from '@fuf-stack/eslint-config-fuf/jsdoc-strict';
export default [...base, ...jsdocStrict];
此添加剂预设使用 TypeScript 解析器,由 base 或者说 react。 。 。 .
jsdoc/require-jsdoc 需要一个 /** ... */ 注释,和
jsdoc/require-description 需要描述文本。 普通类 // 评论,
无描述的空 docblocks 和标签( 例如, /** @deprecated */(中文(简体) )
不符合这些规则。 自动定义不插入空文档占位符 .
interface RequestOptions {
/** Whether failed requests should be retried automatically. */
retry?: boolean;
/** Maximum time in milliseconds before cancellation. */
timeout: number;
}
此预设仅覆盖接口成员; 它不需要文档 函数、对象类型别名、调用签名或构建签名。 它又说 没有自己的排序或间隔规则.
Pretier 配置帮助器
此套件还导出一个小助手来生成带有导入排序和可选插件(Astro, PHP, Tailwind)的 Pretier 配置.
创建 prettier.config.mjs 并打电话给工厂:
// prettier.config.mjs
import createConfig from '@fuf-stack/eslint-config-fuf/prettier';
export default createConfig({
// Enable Astro support
enableAstro: false,
// Enable PHP support
enablePhp: false,
// Absolute path to your Tailwind config to enable Tailwind class sorting
// e.g. './tailwind.config.ts' or './tailwind.config.js'
tailwindConfig: undefined,
// Additional function names that contain Tailwind classes (besides classNames, cn, tv)
tailwindAdditionalFunctions: [],
// If using a monorepo, group internal packages (e.g. "@acme/") as a separate block in import order
workspacePackagePrefix: undefined,
});
要点 :
- 导入按电源排序
@ianvs/prettier-plugin-sort-imports有意见的群体(类型、vitest、内建、反应、第三方、单repo包,src/**,相对,资产) - 选择的 Tailwind 类排序通过
prettier-plugin-tailwindcss(插头必须是最后一个) - 可选
prettier-plugin-astro财务报告和审定财务报表@prettier/plugin-php - 标记下注解:带有 Pretier
3.9+, 有效的 Setext 标题(Title+ 键===而不是自动转换成ATX(# Title(中文(简体) )
脚本
典型脚本 :
{
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier . --write"
}
许可证
麻省理工学院