前端项目开发之安装prettier和使用

前端项目开发之安装prettier和使用

Prettier 是一个流行的代码格式化工具，可以帮助你保持代码风格的一致性。以下是如何在 Visual Studio Code (VS Code) 中安装和使用 Prettier 的步骤：

安装 Prettier

1. 通过 VS Code 扩展市场安装：
   • 打开 VS Code。
   • 点击左侧活动栏中的扩展图标（或按 Ctrl+Shift+X）。
   • 在搜索栏中输入 Prettier - Code formatter。
   • 找到由 Prettier 提供的扩展并点击 安装。
2. 通过 npm 安装（可选）：
   • 如果你希望在项目中使用 Prettier，可以通过 npm 安装：

     npm install --save-dev prettier
     

配置 Prettier

1. 全局配置：
   • 安装完成后，可以在 VS Code 的设置中配置 Prettier。
   • 打开设置（点击右上角齿轮图标 -> 设置，或按 Ctrl+,）。
   • 搜索 Prettier，并根据需要进行配置，例如设置为默认格式化工具。
2. 项目级配置：
   • 在项目根目录下创建一个 .prettierrc 文件，用于配置 Prettier 的选项。例如：

     {
       "semi": true,
       "singleQuote": true,
       "tabWidth": 2,
       "trailingComma": "es5"
     }
     

使用 Prettier

1. 手动格式化：
   • 打开你希望格式化的文件。
   • 右键点击文件内容，选择 Format Document。
   • 如果 Prettier 已设置为默认格式化工具，它将自动格式化你的代码。
2. 自动格式化
   • 你可以配置 VS Code 在保存文件时自动格式化代码。
   • 打开设置，搜索 Format On Save，并勾选 Editor: Format On Save 选项。
3. 命令行使用：
   • 如果你通过 npm 安装了 Prettier，可以在命令行中使用：

     npx prettier --write "src/**/*.js"
     

   • 这将格式化 src 目录下的所有 JavaScript 文件。

示例

以下是一个示例，展示了如何在项目中使用 Prettier：

1. 安装 Prettier：

   npm install --save-dev prettier
   

2. 创建 .prettierrc 配置文件：

   {
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": true,
     "jsxSingleQuote": true,
     "trailingComma": "none",
     "bracketSpacing": true,
     "jsxBracketSameLine": false,
     "arrowParens": "avoid",
     "endOfLine": "lf",
     "printWidth": 100
   }
   

3. 格式化代码：
   • 在 VS Code 中打开一个 JavaScript 文件。
   • 右键点击文件内容，选择 Format Document，或按 Shift+Alt+F。
   • 代码将根据 .prettierrc 文件中的配置进行格式化。

通过这些步骤，你可以轻松地在 VS Code 中安装和使用 Prettier 来保持代码风格的一致性。