如何在ESLint（ts-standard）中配置prettier-plugin-tailwindcss实现保存自动格式化

一、安装必要依赖 #

先确保安装插件及 ESLint 与 Prettier 的协同依赖：

npm install prettier-plugin-tailwindcss eslint-config-prettier eslint-plugin-prettier --save-dev

二、调整 Prettier 配置 #

在 prettier.config.js 中引入 Tailwind 插件：

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  // 保留你原有的其他 Prettier 配置项
}

三、修改 ESLint 配置（.eslintrc.json） #

结合你使用的 ts-standard，整合 Prettier 相关规则，让 ESLint 识别并应用 Tailwind 格式化规则：

{
  "extends": [
    "ts-standard",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    // 保留 ts-standard 原有规则或按需调整
  }
}

四、配置编辑器保存自动格式化 #

VS Code 配置 #

1. 安装 Prettier 和 ESLint 官方插件
2. 在项目根目录创建 .vscode/settings.json，添加以下内容：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

保存时会先触发 ESLint 修复，再执行 Prettier 格式化，确保 Tailwind 类排序规则生效。

其他编辑器 #

找到对应编辑器的自动格式化设置，指定默认格式化工具为 Prettier，同时开启保存时自动格式化与 ESLint 自动修复功能即可。

五、验证配置 #

运行以下命令手动验证格式化效果：

npx eslint . --fix
npx prettier . --write

若命令执行无报错，且代码中 Tailwind 类按规范排序，说明配置生效。

内容的提问来源于stack exchange，提问作者devdariill