为什么 Prettier 在 Remix 应用程序中找不到 "prettier-plugin-tailwindcss" 插件？

Question

背景

我正在尝试使用 Tailwind CSS 设置 Remix 应用程序进行样式设置，并使用 Prettier 进行样式设置。最近 Tailwind 团队发布了他们的官方类-sorting 插件，但出于某种原因 Prettier 说它“找不到它”。

Prettier 输出中的错误类似于以下内容：


    ["INFO" - 1:17:09 PM] Formatting file:///home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx
    ["ERROR" - 1:17:09 PM] Error resolving prettier configuration for /home/juanzitelli/dev/human-decode/burger-reviews-hd/app/routes/dashboard/index.tsx

我的文件结构（与问题相关的文件）如下所示：


    /prettier.config.js
    /tailwind.config.js

/package.json


    "devDependencies": {
        "@remix-run/dev": "^1.1.3",
        "@remix-run/serve": "^1.2.2",
        "@types/node": "^17.0.21",
        "@types/react": "^17.0.24",
        "@types/react-dom": "^17.0.9",
        "autoprefixer": "^10.4.2",
        "concurrently": "^7.0.0",
        "dotenv": "^16.0.0",
        "postcss": "^8.4.6",
        "prettier": "^2.5.1",
        "prettier-plugin-tailwindcss": "^0.1.8",
        "prisma": "^3.10.0",
        "tailwindcss": "^3.0.23",
        "typescript": "^4.1.2"
      },
      "engines": {
        "node": ">=14",
        "yarn": "1.22.17"
      },

Prettier config 

`/prettier.config.js`

    module.exports = {
      plugins: [require('prettier-plugin-tailwindcss')],
    };


> When hovering over that "require" I get an error that says:

module "/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index"
Could not find a declaration file for module 'prettier-plugin-tailwindcss'. '/home/juanzitelli/dev/human-decode/burger-reviews-hd/node_modules/prettier-plugin-tailwindcss/dist/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/prettier-plugin-tailwindcss` if it exists or add a new declaration (.d.ts) file containing `declare module 'prettier-plugin-tailwindcss';`ts(7016)```

Answer 1

我以前也遇到过这个问题。虽然我只是尝试将 Tailwind Prettier 插件添加到新的 Remix 项目中，但一切似乎都在工作。以下是我执行的步骤：

Installed Tailwind npm install -D tailwindcss postcss autoprefixer concurrently
完成上述 link 中概述的所有步骤后，我运行 npm install -D prettier prettier-plugin-tailwindcss

我没有更漂亮的配置文件。我可以运行 Prettier 通过 vscode 并且我可以确认 Tailwind 类是自动排序的。

为什么 Prettier 在 Remix 应用程序中找不到 "prettier-plugin-tailwindcss" 插件？

Why can't Prettier find the "prettier-plugin-tailwindcss" plugin on a Remix app?

prettier

tailwind-css

remix.run

背景