求助：Prettier无法格式化Styled Components代码问题

问题根源 #

Prettier默认不识别Styled Components模板字符串内的CSS语法，因此需要专门的插件来处理这类代码的格式化。

步骤1：安装格式化插件 #

首先安装prettier-plugin-styled-components，这是官方推荐的用于Styled Components的Prettier插件：

# npm
npm install --save-dev prettier-plugin-styled-components

# yarn
yarn add --dev prettier-plugin-styled-components

# pnpm
pnpm add -D prettier-plugin-styled-components

步骤2：更新Prettier配置 #

修改你的.prettierrc，添加插件配置，确保Prettier加载该插件：

{
    "arrowParens": "always",
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "useTabs": false,
    "plugins": ["prettier-plugin-styled-components"]
}

步骤3：调整ESLint配置确保协同工作 #

为了让ESLint和Prettier无缝配合，避免规则冲突，更新你的eslintrc.json：

1. 在extends数组末尾添加"plugin:prettier/recommended"，这会启用Prettier作为ESLint规则，并禁用所有和Prettier冲突的ESLint规则
2. 确保prettier插件已在plugins中（你当前配置已经包含）

修改后的eslintrc.json示例：

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "next/core-web-vitals",
        "eslint:recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "project": "tsconfig.json",
        "sourceType": "module"
    },
    "plugins": ["@typescript-eslint/eslint-plugin", "react", "prettier"],
    "rules": {
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "no-shadow": "off"
    },
    "ignorePatterns": ["dist", "node_modules"]
}

步骤4：验证格式化效果 #

运行Prettier手动格式化你的Styled Components文件，验证效果：

npx prettier --write path/to/your/GlobalStyles.tsx

或者在IDE中开启自动格式化（如VSCode中设置editor.formatOnSave为true），保存文件时即可看到代码按你的期望格式化。

额外提示 #

如果需要为Styled Components生成更清晰的组件名称（便于调试），可以在.prettierrc中添加可选配置：

"styledComponents": {
    "displayName": true
}

内容的提问来源于stack exchange，提问作者Javier Sebastián Fernández