tw-lint 缩写

一个非官方命令行插件 尾风 CSS 由Tailwind CSS语言工具提供动力.

[注] 这个 非正式 项目。 它不附属于、经核可或 由Tailwind实验室赞助. "Tailwind CSS"是Tailwind Labs Inc的商标.

特征

• 检测由 Tailwind CSS IntelliSense 所浮出的问题,包括: cssConflict, (中文(简体) ), invalidApply, (中文(简体) ), invalidScreen, (中文(简体) ), invalidVariant, (中文(简体) ), invalidConfigPath, (中文(简体) ), invalidTailwindDirective, (中文(简体) ), invalidSourceDirective, (中文(简体) ), recommendedVariantOrder, (中文(简体) ), usedBlocklistedClass, (中文(简体) ), deprecatedAtRule, (中文(简体) ), suggestCanonicalClasses。 。 。 .
• 调整每项规则的严厉性(ignore 编号 : warning 编号 : error)通过 --severity <rule=level> 或者一个配置文件.
• 与 Tailwind CSS v3 合作(tailwind.config.js)和 v4(基于 CSS 配置) 工程——该版本由语言服务器自动检测.
• Lints HTML、JSX/TSX、Vue、Svelte、Astro、PHP和其他模板语言, 还有CSS文件.
• 人可读文本输出, 机器可读 --format json,以及 --format github gitHub 动作说明.
• --fix 编号 : --fix-dry-run 应用语言服务器的快取.
• CI友好出口代码和 --max-warnings。 。 。 .

所需资源

• 节点.js 22
• 工作空间中的 Tailwind CSS 项目 :
  • 页:1(单位:千美元) tailwind.config.{js,cjs,mjs,ts} 财务报告和审定财务报表 tailwindcss 安装在 项目的 node_modules。 。 。 .
  • 页:1: CSS 进口 Tailwind (例如:. @import "tailwindcss";(中文(简体) ) 财务报告和审定财务报表 tailwindcss 安装在项目中 node_modules。 。 。 .

语言服务器加载项目本身 tailwindcss (和它的配置)从 node_modules 用来计算诊断。 这意味着 目标项目 依赖关系必须已经安装 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在倒地之前 {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}我还没说 在 CI 中运行您的安装 步骤(例如:. npm ci)第一个:

npm ci
npx tw-lint "src/**/*.{tsx,html}"

如果没有安装依赖关系,则没有检测到 Tailwind 工程 无问题.

安装

npm install --save-dev @dayflower/tw-lint

使用量

tw-lint [globs...] [options]

实例:

# Lint everything (default globs) in the current project
tw-lint

# Lint specific files
tw-lint "src/**/*.{tsx,html}"

# Machine-readable output
tw-lint "src/**/*.tsx" --format json

# Treat class conflicts as errors
tw-lint --severity cssConflict=error

# Apply fixes
tw-lint "src/**/*.html" --fix

# Apply fixes in a single pass (do not loop)
tw-lint "src/**/*.html" --fix --fix-passes 1

单身时 class 属性有重叠的修饰(例如 冲突实用性的去除和犬类重写),只有 非重叠编辑可以在一个通道中应用. --fix 因此,最多为 --fix-passes 通过( 默认) 10,像 ESLint 的自定义,重新应用修正 直到一切改变。 设定 --fix-passes 0 或者说 --fix-passes 1 保留 旧的单行道行为.

固定问题一旦适用即从报告中消失(只显示一个计数,如: 还有ESLint). 过 --report-fixed 将每个应用的固定线也列于 a Fixed 节(以及 --format json页:1 fixedMessages 每个文件的阵列 :

Fixed
src/Button.tsx
  4:17  fixed  Replace with 'w-xl'  suggestCanonicalClasses
  4:27  fixed  Delete 'p-4'         cssConflict
✔ 2 issues fixed

选项

配置文件

规则断开( 以及一些其他设置) 可以在配置文件中坚持, 所以 他们不需要每次通过命令线。 默认情况下 linter 在工程根中查看, 顺序为:

1. tw-lint.config.json
2. .tw-lintrc.json
3. (单位:千美元) "tw-lint" 键入 package.json

使用 -c, --config <file> 指向特定文件.

{
  // Rule severities: "ignore" | "warning" | "error"
  "rules": {
    "cssConflict": "error",
    "recommendedVariantOrder": "ignore"
  },
  // Attributes/functions whose string values are scanned for classes
  "classAttributes": ["class", "className", "tw"],
  "classFunctions": ["clsx", "cva", "cn"],
  // Map extra language ids to a known one (e.g. for custom templates)
  "includeLanguages": { "plaintext": "html" },
  // Equivalent to --tailwind-config
  "tailwindConfig": "./tailwind.config.ts",
  // Equivalent to --fix-passes (max fix passes; 0 or 1 = single pass)
  "fixPasses": 10,
  // Equivalent to --report-fixed (list the fixes applied)
  "reportFixed": false
}

这些规则是 尾风 CSS 智能 提示设置 (单位:千美元)tailwindCSS.lint.*) (中文(简体) ). 他们是 没有 属于你的部分 tailwind.config.js, (中文(简体) ), 它只配置了Tailwind的设计系统.

--severity 按规则覆盖配置文件,并且 --tailwind-config 覆盖 tailwindConfig。 。 。 .

现行规则

每个值都是 "ignore", (中文(简体) ), "warning" 或者说 "error"。默认值与 尾风 CSS 智能 扩展名.

这些由Tailwind CSS语言服务处界定;权威语言 说明是 tailwindCSS.lint.* 设置 尾风 CSS IntelliSense 扩展设置 (上表按同一顺序排列). 这里接受的规则名称是 键下 tailwindCSS.lint。 。 。 .

退出代码

• 0 ——无出错(和内部警告) --max-warnings,如果设置).
• 1 发现错误,或 --max-warnings 超过.
• 2 - 插件本身失败,或者没有检测到 Tailwind 工程 已挂起的文件( 无已挂起 ) 。 过 --no-error-on-no-project 治疗 后者为 0 换句话说.

GitHub 动作

tw-lint 作为可再使用的 GitHub 动作的船。 报告的问题作为内在 关于跑和拉请求的说明. 就像CLI一样, 安装目标 项目的依赖关系 因此语言服务器可以检测工程.

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci # install the project's own tailwindcss
      - uses: dayflower/tw-lint@v1
        with:
          globs: "src/**/*.{tsx,html}"
          max-warnings: "0"

投入

匹配的 CLI 选项的每个输入地图 :

产出

error-count, (中文(简体) ), warning-count,以及 fix-count。 。 。 .

这个 github 输出格式也可直接通过CLI从中获取 tw-lint --format github 如果你愿意自己在工作流程中运行二进制.

程序化 API

import { runLint, createTailwindSettings } from '@dayflower/tw-lint'

const summary = await runLint({
  cwd: process.cwd(),
  patterns: ['src/**/*.tsx'],
  settings: createTailwindSettings({ rules: { cssConflict: 'error' } }),
})

console.log(summary.errorCount, summary.warningCount)

如何运作

这个工具驱动器不是重新执行 lint 规则 @tailwindcss/language-server 作为无头 LSP 软件 客户端. 服务器执行工程检测( Tailwind) 页:1 财务报告和审定财务报表 页:1),配置装入 并使用 @tailwindcss/language-service 内部——同一台引擎 尾风 CSS 智能 编辑器 扩展名。 该工具收集了由此产生的诊断结果,并将结果报告于 命令行,并可以应用服务器的快取.

1. 双胞胎 tailwindcss-language-server --stdio 连接JSON -RPC.
2. 初始化工作空间并响应服务器的 workspace/configuration 请求带有线性设置.
3. 打开每个匹配的文档以启动工程初始化, 等待 初始化项目,然后强制每个文件重新验证 收集公布的诊断材料.
4. 对于 --fix,请求 textDocument/codeAction 快速修补并应用 返回编辑.

许可证

麻省理工学院