配置 prettier-plugin-tailwindcss 以使用 Eslint standard/ts-standard 进行自动保存

Question

如何在 **eslint ** 中将 **prettier ** 配置为 prettier-plugin-tailwindcss 并仅使用他 onsave 格式

• 我刚刚看到了与 Prettier 中的格式化程序一起使用的文档。

首字母：

• .eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "./node_modules/ts-standard/eslintrc.json",
        "plugin:react/recommended",
        "next/core-web-vitals"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {        
    }
  }

• prettier.config.js

  // prettier.config.js
  module.exports = {
    plugins: ['prettier-plugin-tailwindcss'],
  }
  

• package.json

  ts 标准

Answer 1

• Onsave 格式与 eslint 配置：

.eslintrc.json

{
  "root": true,
  ...
  "plugins": [
    "react","prettier"
  ],
  "extends": [
      "./node_modules/ts-standard/eslintrc.json",
      "plugin:react/recommended",
      "next/core-web-vitals",
      "plugin:prettier/recommended"
  ],
  ...
  "rules": {    
    "prettier/prettier": [
      "warn",
      {
        "printWidth": 100,
        "trailingComma": "all",
        "tabWidth": 2,
        "semi": false,
        "singleQuote": true,
        "bracketSpacing": false,
        "arrowParens": "always",
        "endOfLine": "auto",
        "plugins": ["prettier-plugin-tailwindcss"]
      }
    ],         
  }
}

package.json

  "devDependencies": {
    "eslint-plugin-prettier": "5.0.0",
    "eslint-config-prettier": "8.8.0",
    "prettier": "3.0.1",
    "prettier-plugin-tailwindcss": "0.5.2",
    "ts-standard": "12.0.2"
  }