Eslint prettier-plugin-tailwindcss config for autosave - standard/ts-standard

Question

How to config **prettier ** to prettier-plugin-tailwindcss in **eslint **and works with just he onsave format

• i just have seen the docs that works with the formatter in prettier.

Initial:

• .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-standard

Answer 1

• Onsave format with eslint config:

.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"
  }