【VS Code】解决 Prettier 插件配置无效的问题并优化 TypeScript 配置

Prettier 是一款广受欢迎的代码格式化工具，可以帮助开发者保持代码风格一致。在 VS Code 中使用 Prettier 的过程中，你可能会遇到一些配置无效的问题。本文将以一个实际案例为切入点，分享如何解决插件无效问题，并优化 Prettier 与 TypeScript 的配置，最终提升开发效率和代码可读性。

一、问题背景

在 VS Code 中安装并使用 Prettier 插件时，用户可能会发现如下现象：

1. Prettier 图标是暗的：表示插件未被激活。
2. 相关配置项显示为暗色：说明配置未生效。

这种情况可能是因为插件未正确加载，或者存在其他格式化工具冲突。

二、解决插件无效问题

1. 检查插件状态

首先，在 VS Code 的扩展面板中搜索 Prettier - Code Formatter，检查是否已安装该插件。如果图标是暗的，说明插件未激活。

解决方案：

• 重启 VS Code：有时插件未激活是因为启动时未正确加载，重启可能解决问题。

• 卸载并重新安装 Prettier 插件：

  • 在扩展市场中搜索 Prettier - Code Formatter。

• 点击卸载，然后重新安装。

2. 设置 Prettier 为默认格式化工具

在 settings.json 中，确保 Prettier 被设置为默认格式化工具：

{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3. 启用保存时自动格式化

为了让 Prettier 在保存文件时自动格式化代码，添加以下配置：

{
    "editor.formatOnSave": true
}

4. 验证插件是否生效

打开一个 .tsx 文件，尝试保存。如果代码格式化成功，说明 Prettier 已正常工作。

三、优化 Prettier 配置

为了在项目中使用更统一的代码风格，可以根据团队需求优化 Prettier 的配置。以下是推荐的配置项及其作用：

配置示例

在 settings.json 中添加以下内容：

{
    "prettier.bracketSameLine": false,   // JSX 闭合标签单独占一行
    "prettier.singleQuote": true,        // 使用单引号
    "prettier.semi": true,               // 语句末尾加分号
    "prettier.printWidth": 80,           // 每行最多显示的字符数
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode" // 指定 Prettier 格式化 TypeScript React 文件
    }
}

配置项详解

1. prettier.bracketSameLine: false

   • 控制 JSX 闭合标签的位置。

   • false：将闭合标签（>）移到单独一行，更清晰。

   • 示例：

     <MyComponent
         prop1="value1"
         prop2="value2"
     />
     

2. prettier.singleQuote: true

   • 强制使用单引号而非双引号。

   • 示例：

     const message = 'Hello, world!';
     

3. prettier.semi: true

   • 在语句末尾添加分号，提高代码的可读性和稳定性。

   • 示例：

     const sum = a + b;
     

4. prettier.printWidth: 80

   • 每行最多显示的字符数，超出部分自动换行。建议设置为 80，符合最佳可读性标准。

   • 示例：

     const longString =
         'This is a very long string that exceeds 80 characters and will be wrapped.';
     

5. [typescriptreact]

   • 将 Prettier 设置为 TypeScript React 文件的默认格式化工具，确保格式化规则的一致性。

四、TypeScript 项目中的 Prettier 与 ESLint 整合

在 TypeScript 项目中，Prettier 通常会与 ESLint 一起使用。两者的职责分工：

• Prettier：负责代码格式化。
• ESLint：负责代码质量检查。

配置步骤

1. 安装相关依赖

使用以下命令安装 Prettier 和 ESLint 及其相关插件：

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

2. 配置 ESLint

在 .eslintrc.json 文件中添加以下内容：

{
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended" // 让 Prettier 的规则覆盖 ESLint 的格式化规则
    ],
    "rules": {
        "prettier/prettier": "error" // 报告不符合 Prettier 的代码格式为错误
    }
}

3. 配置 Prettier

在项目根目录创建 .prettierrc 文件，添加以下内容：

{
    "singleQuote": true,
    "semi": true,
    "printWidth": 80,
    "trailingComma": "all"
}

五、实际效果演示

1. 未格式化的代码

以下是一段未格式化的 TypeScript React 代码：

const App = () => { return (<div><h1>Welcome to the App</h1></div>) }

2. 保存后格式化的代码

使用上述配置保存后，代码会自动格式化为：

const App = () => {
    return (
        <div>
            <h1>Welcome to the App</h1>
        </div>
    );
};

六、总结

通过解决 Prettier 无效问题，并优化 Prettier 与 TypeScript 的配置，我们可以大幅提升代码的可读性和一致性。在团队协作中，统一的代码风格还能减少代码审查中的摩擦点，提升整体开发效率。

推荐：

• JavaScript
• react
• vue