vscode 使用插件prettier插件格式化TS

最新推荐文章于 2025-05-06 15:29:10 发布

SRE运维充电站

最新推荐文章于 2025-05-06 15:29:10 发布

阅读量5.9k

点赞数 2

文章标签： vscode javascript 前端

版权

要在 VS Code 中配置 Prettier 插件以格式化 TypeScript 代码，请按照以下步骤操作：
1、安装 Prettier 插件：打开 VS Code，按下 Ctrl/Cmd + Shift + X，搜索 “Prettier” 并安装该插件。
2、安装 TypeScript：如果您尚未安装 TypeScript，您需要通过运行 npm install -g typescript 或 yarn global add typescript 在全局安装 TypeScript。
3、在项目中安装 Prettier：在项目中运行 npm install --save-dev prettier 或 yarn add --dev prettier 来安装 Prettier。
4、创建 Prettier 配置文件：在项目根目录下创建一个名为 .prettierrc 的文件，并在其中添加以下内容：

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

这些设置将影响 Prettier 的格式化行为。您可以根据自己的需求进行修改。

5、配置 VS Code：打开 VS Code 的设置（Ctrl/Cmd + ,），搜索 “Prettier” 并找到 “Editor: Default Formatter” 选项。将其设置为 “esbenp.prettier-vscode”。
6、在 VS Code 中使用 Prettier：在 VS Code 中打开一个 TypeScript 文件，然后按下 Shift + Alt + F，或者通过右键单击文件并选择 “Format Document” 来使用 Prettier 格式化代码。

这样，您就可以使用 Prettier 插件来格式化 TypeScript 代码了。