prettier.config.js is not working with .prettierrc

Unanswered

Siberian Accentor posted this in #help-forum

Siberian AccentorOP

2024-04-24T13:22:22.898Z

/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "es5",
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/registry/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],

  plugins: ["@ianvs/prettier-plugin-sort-imports"],
}

.prettierrc

{ "plugins": ["prettier-plugin-tailwindcss"] }

when I add prettierrc the prettier.config.js is not working, how should I do to make them both working

6 Replies

Siberian AccentorOP

2024-04-26T10:39:17.784Z

anyone ??

@Siberian Accentor javascript /** @type {import('prettier').Config} */ module.exports = { endOfLine: "lf", semi: false, singleQuote: false, tabWidth: 2, trailingComma: "es5", importOrder: [ "^(react/(.*)$)|^(react$)", "^(next/(.*)$)|^(next$)", "<THIRD_PARTY_MODULES>", "", "^types$", "^@/types/(.*)$", "^@/config/(.*)$", "^@/lib/(.*)$", "^@/hooks/(.*)$", "^@/components/ui/(.*)$", "^@/components/(.*)$", "^@/registry/(.*)$", "^@/styles/(.*)$", "^@/app/(.*)$", "", "^[./]", ], plugins: ["@ianvs/prettier-plugin-sort-imports"], } .prettierrc json { "plugins": ["prettier-plugin-tailwindcss"] } when I add prettierrc the prettier.config.js is not working, how should I do to make them both working

joulev

2024-04-26T10:58:24.161Z

Remove .prettierrc, add "prettier-plugin-tailwindcss" to the plugins array in the config js file

Siberian AccentorOP

2024-04-26T11:34:50.144Z

@joulev I have tried that but not working

/** @type {import('prettier').Config} */
module.exports = {
  endOfLine: "lf",
  semi: false,
  singleQuote: false,
  tabWidth: 2,
  trailingComma: "es5",
  importOrder: [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^types$",
    "^@/types/(.*)$",
    "^@/config/(.*)$",
    "^@/lib/(.*)$",
    "^@/hooks/(.*)$",
    "^@/components/ui/(.*)$",
    "^@/components/(.*)$",
    "^@/registry/(.*)$",
    "^@/styles/(.*)$",
    "^@/app/(.*)$",
    "",
    "^[./]",
  ],

  plugins: [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-tailwindcss",
  ],
}

everything work, but the pretter-plugin-tailwindcss is not working, also prettier extension show error ( tailwindclass sorting is not working which is working when .prettierrc was available after I deleted it, stops working )

This is the .eslintrc

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:tailwindcss/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}