Prettier课程：初学者轻松掌握代码格式化

本课程详细介绍了Prettier这一代码格式化工具的功能、优势及其与传统工具的区别，涵盖安装配置、基本使用方法以及与版本控制集成等内容。此外，还探讨了Prettier与其他工具如ESLint和EditorConfig的结合使用，并提供了自定义规则和插件的使用方法。

Prettier简介

Prettier是什么

Prettier 是一个广泛使用的代码格式化工具，支持多种编程语言，包括 JavaScript、TypeScript、CSS、SCSS、HTML 和 JSON 等。它的目标是通过统一代码风格来提高代码的可读性和一致性，从而减少开发者在代码风格上的争论，让团队能够专注于解决问题本身而不是格式之争。

Prettier 通过读取代码并应用预定义格式规则，将代码转换成统一的格式。它会自动调整代码的缩进、空格、换行、括号等格式，将其标准化。

Prettier的作用和优势

Prettier 的主要作用是确保代码风格的一致性，这在多人协作的项目中尤为重要。以下是 Prettier 的一些优势：

1. 一致性：所有团队成员的代码风格保持一致，减少格式差异带来的困扰。
2. 简化代码审核：减少在代码审核过程中对格式问题的关注，提高审核效率。
3. 减少争议：团队成员不需要花费时间讨论代码风格问题，提高团队协作效率。
4. 易用性：配置简单，大多数编辑器都有插件支持，能够直接集成。
5. 自动化：通过脚本或集成工具，可以自动化地格式化代码，减少手动操作。

例如，一个使用 Prettier 格式化的 JavaScript 文件示例如下：

// 原始代码
function add(a, b) {
  return a + b;
}

// Prettier 格式化后的代码
function add(a, b) {
  return a + b;
}

Prettier与传统代码格式化工具的区别

传统的代码格式化工具通常依赖于用户配置的规则，如 Google Style、Airbnb Style 等，并且需要手动调整每个规则。而 Prettier 遵循“自动格式化”的理念，它不依赖于复杂的配置，而是提供了一套默认的规则集，用户只需开启并使用即可。

例如，使用 eslint 与 prettier 的区别在于：

• eslint：用户可以定义详细的代码风格规则，如单行或多行注释、变量命名规则等。规则配置可能非常复杂，需要团队成员达成一致并严格遵守。
• prettier：用户不需要定义复杂的规则，Prettier 会根据内置的规则进行格式化。用户只需关注代码逻辑，剩下的格式化工作由 Prettier 自动完成。

安装和配置Prettier

Prettier的安装方法

Prettier 可以通过 npm 安装。首先，确保你的项目中已经安装了 Node.js 和 npm。在项目根目录下运行以下命令：

npm install --save-dev prettier

安装完成后，Prettier 就会出现在项目的 node_modules 目录中，同时会被添加到 package.json 的 devDependencies 中。

不同编辑器中的配置步骤

不同的编辑器有不同的配置步骤，以下是一些常见编辑器的配置方法。

Visual Studio Code (VSCode)

1. 安装插件：
   在 VSCode 中安装 Prettier 插件。打开 VSCode，点击左侧的扩展图标，搜索 Prettier - Code formatter，点击安装。

2. 配置设置：
   确保 settings.json 中配置了以下内容：

   {
    "editor.defaultFormatter": "esben.prettier-vscode",
    "editor.formatOnSave": true
   }

   这将会在每次保存文件时自动格式化代码。

Sublime Text

1. 安装插件：
   在 Package Control 中搜索 PrettifyCode 插件，并安装。

2. 配置设置：
   在 Preferences > Package Settings > PrettifyCode > Settings - User 中，配置以下内容：

   {
      "prettier_bin_path": "node_modules/.bin/prettier"
   }

常用配置项详解

Prettier 允许用户进行一些自定义配置，以适应不同的需求。配置文件通常放在项目的根目录下，命名为 .prettierrc 或 .prettierrc.js。常见的配置项包括：

• singleQuote：是否使用单引号（true）或双引号（false）。
• semi：是否在语句末尾添加分号（true）。
• trailingComma：是否在对象和数组末尾添加逗号。
• tabWidth：设置 Tab 的宽度，例如，4 表示使用四个空格。
• printWidth：设置每行的最大字符数，例如，80 表示每行最多 80 个字符。

{
  "singleQuote": true,
 "semi": true,
 "trailingComma": "es5",
 "tabWidth": 4,
 "printWidth": 80
}

基本使用教程

代码格式化的基本规则

Prettier 应用了一套默认的格式化规则，以下是一些常见的规则：

• 缩进：使用四个空格或一个 Tab，具体取决于配置文件中的 tabWidth。
• 行宽：默认情况下，每行最多 80 个字符，超过部分会自动换行。
• 逗号：对象和数组末尾会自动添加逗号（如果有配置 trailingComma）。
• 分号：语句末尾会添加分号（如果有配置 semi）。
• 引号：默认使用单引号（如果有配置 singleQuote）。

如何将Prettier集成到项目中

将 Prettier 集成到项目中主要是通过脚本和配置文件完成的。

1. 创建配置文件：
   在项目根目录下创建一个 .prettierrc 文件，定义格式化规则。

   {
    "singleQuote": true,
    "semi": true,
    "trailingComma": "es5",
    "tabWidth": 4,
    "printWidth": 80
   }

2. 设置脚本：
   在 package.json 中添加一个脚本，用于格式化代码。

   {
    "scripts": {
      "format": "prettier --write \"./src/**/*.js\""
    }
   }

   这样，你就可以通过运行 npm run format 来格式化项目中的所有 .js 文件。

常见问题与解决方法

1. 问题：代码格式化后，原有的代码风格被改变了。
   解决方法：检查 .prettierrc 文件中的配置，调整为符合原有风格的规则。

2. 问题：格式化时遇到错误。
   解决方法：确保所有依赖库都已经正确安装，检查配置文件是否有语法错误。

3. 问题：一些编辑器插件可能导致冲突。
   解决方法：确保编辑器中只安装了一个 Prettier 插件，并且配置正确。

Prettier与版本控制集成

Prettier与Git的配合使用

将 Prettier 与 Git 结合使用，可以确保提交到版本控制系统的代码始终符合 Prettier 的格式。具体步骤如下：

1. 创建 .gitignore 文件：
   确保 .prettierrc 文件不被 Git 管理。

   .prettierrc

2. 使用预提交钩子：
   创建一个预提交钩子，确保每次提交前所有代码都经过 Prettier 的格式化。

   # .git/hooks/pre-commit
   #!/bin/sh
   npx prettier --write .

3. 配置提交模板：
   在项目根目录下创建 .gitmessage 文件，定义提交模板。

   # .gitmessage
   # Please fill in the template below, remove everything except the header and the
   # first empty line.
   
   Summary of the commit
   
   - [ ] 代码提交后已运行 `npm run format` 格式化代码

在GitHub中使用Prettier的技巧

1. 启用GitHub Actions：
   在 .github/workflows 目录下创建一个 CI 任务，在拉取请求时自动运行 Prettier。

   name: Format Code with Prettier
   
   on:
    pull_request:
      branches:
        - main
   
   jobs:
    prettier:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - name: Setup Node.js
          uses: actions/setup-node@v2
          with:
            node-version: '14.x'
        - name: Install Prettier
          run: npm install --save-dev prettier
        - name: Run Prettier
          run: npx prettier --check .

2. 自定义提交信息模板：
   在项目根目录下创建 .gitcommit 文件，定义提交模板。

   # .gitcommit
   # Please fill in the template below, remove everything except the header and the
   # first empty line.
   
   Summary of the commit
   
   - [ ] 代码提交后已运行 `npm run format` 格式化代码

Prettier与其他工具的配合使用

Prettier与ESLint的结合使用

ESLint 是一个非常流行的代码检查工具，与 Prettier 结合使用可以提供更全面的代码检查功能。具体步骤如下：

1. 安装 ESLint：
   在项目根目录下安装 ESLint。

   npm install --save-dev eslint

2. 配置 ESLint：
   创建 .eslintrc.js 配置文件，定义 ESLint 规则。

   module.exports = {
    parser: '@babel/eslint-parser',
    env: {
      es6: true,
      node: true,
    },
    extends: ['eslint:recommended'],
    rules: {
      // 自定义规则
    },
    overrides: [
      {
        files: ['*.js'],
        parserOptions: {
          ecmaVersion: 2020,
          sourceType: 'module',
          ecmaFeatures: { jsx: true },
        },
        env: {
          browser: true,
          node: true,
        },
        plugins: ['prettier'],
        rules: {
          'prettier/prettier': 'error',
        },
      },
    ],
   };

3. 安装 Prettier 插件：
   安装 eslint-plugin-prettier，并将其集成到 ESLint 中。

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

4. 配置 package.json：
   在 scripts 中添加格式化和检查命令。

   {
    "scripts": {
      "format": "prettier --write \"./src/**/*.js\"",
      "lint": "eslint . --ext .js",
      "lint-fix": "eslint . --ext .js --fix",
      "check": "npm run format && npm run lint",
      "pre-commit": "npm run check"
    }
   }

Prettier与EditorConfig的协同工作

EditorConfig 是一个配置文件，用于定义代码风格，如缩进、换行符等。将 Prettier 与 EditorConfig 结合使用，可以进一步增强代码的一致性。

1. 安装 EditorConfig：
   在项目根目录下安装 EditorConfig。

   npm install --save-dev editorconfig

2. 创建 .editorconfig 文件：
   在项目根目录下创建 .editorconfig 文件，定义编辑器配置。

   # .editorconfig
   root = true
   
   [*]
   charset = utf-8
   end_of_line = lf
   insert_final_newline = true
   trim_trailing_whitespace = true
   indent_style = space
   indent_size = 4

3. 配置 Prettier 使用 EditorConfig：
   在 .prettierrc 文件中设置 useTabs 和 tabWidth。

   {
    "useTabs": false,
    "tabWidth": 4
   }

其他常用工具的整合方法

除了 ESLint 和 EditorConfig，还可以将 Prettier 与一些其他工具结合使用，以提供更全面的开发体验。

1. Prettier 与 Husky：
   Husky 是一个预提交钩子工具，可以与 Prettier 结合使用，确保每次提交前代码都经过格式化。

   # package.json
   {
    "scripts": {
      "format": "prettier --write \"./src/**/*.js\""
    },
    "husky": {
      "hooks": {
        "pre-commit": "npm run format"
      }
    }
   }

2. Prettier 与 Commitlint：
   Commitlint 是一个 Git 提交信息检查工具，可以与 Prettier 结合使用，确保每次提交的格式符合规范。

   npm install --save-dev commitlint @commitlint/config-conventional

   在项目根目录下创建 .commitlintrc 文件。

   {
    "extends": ["@commitlint/config-conventional"]
   }

Prettier的进阶用法

自定义Prettier规则

Prettier 提供了自定义规则的能力，可以通过 .prettierrc 文件进行配置。以下是一些常用的自定义规则：

1. 单引号与双引号：
   使用单引号（singleQuote）。

   {
    "singleQuote": true
   }

2. 逗号：
   在对象和数组末尾添加逗号。

   {
    "trailingComma": "es5"
   }

3. 换行符：
   使用 LF（Unix 风格）换行符。

   {
    "endOfLine": "lf"
   }

Prettier插件的使用

Prettier 插件可以扩展 Prettier 的功能，例如，prettier-plugin-unicorn 提供了一些额外的格式化规则。

1. 安装插件：
   在项目根目录下安装插件。

   npm install --save-dev prettier prettier-plugin-unicorn

2. 配置插件：
   在 .prettierrc 文件中启用插件。

   {
    "plugins": ["prettier-plugin-unicorn"]
   }

Prettier的自动化测试

在 CI/CD 流程中，可以将 Prettier 的格式化和检查步骤自动化，确保代码始终符合格式要求。

1. 创建 CI 脚本：
   在 CI 服务器上创建一个脚本，在每次提交或构建时运行 Prettier。

   # .github/workflows/format-check.yml
   name: Format Check
   
   on:
    push:
      branches:
        - main
   
   jobs:
    format:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - name: Setup Node.js
          uses: actions/setup-node@v2
          with:
            node-version: '14.x'
        - name: Install Prettier
          run: npm install --save-dev prettier
        - name: Run Prettier
          run: npx prettier --check .

2. 集成到 CI/CD 流程：
   在项目根目录下创建一个 CI/CD 脚本，确保每次提交或构建时都运行 Prettier。

   # Jenkinsfile
   pipeline {
    agent any
    stages {
      stage('Format') {
        steps {
          sh 'npm install --save-dev prettier'
          sh 'npx prettier --check .'
        }
      }
    }
   }

通过以上步骤，可以确保项目中的代码始终符合 Prettier 的规范，提高代码的可读性和一致性。