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

本文主要是介绍Prettier课程：初学者轻松掌握代码格式化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

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

Prettier简介

Prettier是什么

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

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

Prettier的作用和优势

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

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

例如，一个使用 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)

安装插件：
在 VSCode 中安装 Prettier 插件。打开 VSCode，点击左侧的扩展图标，搜索 Prettier - Code formatter，点击安装。
配置设置：
确保 settings.json 中配置了以下内容：
```
{
 "editor.defaultFormatter": "esben.prettier-vscode",
 "editor.formatOnSave": true
}
```
这将会在每次保存文件时自动格式化代码。

Sublime Text

安装插件：
在 Package Control 中搜索 PrettifyCode 插件，并安装。
配置设置：
在 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 集成到项目中主要是通过脚本和配置文件完成的。

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

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

设置脚本：
在 package.json 中添加一个脚本，用于格式化代码。
```
{
 "scripts": {
   "format": "prettier --write \"./src/**/*.js\""
 }
}
```
这样，你就可以通过运行 npm run format 来格式化项目中的所有 .js 文件。

常见问题与解决方法

问题：代码格式化后，原有的代码风格被改变了。
解决方法：检查 .prettierrc 文件中的配置，调整为符合原有风格的规则。
问题：格式化时遇到错误。
解决方法：确保所有依赖库都已经正确安装，检查配置文件是否有语法错误。
问题：一些编辑器插件可能导致冲突。
解决方法：确保编辑器中只安装了一个 Prettier 插件，并且配置正确。

Prettier与版本控制集成

Prettier与Git的配合使用

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

创建 .gitignore 文件：
确保 .prettierrc 文件不被 Git 管理。
```
.prettierrc
```
使用预提交钩子：
创建一个预提交钩子，确保每次提交前所有代码都经过 Prettier 的格式化。
```
# .git/hooks/pre-commit
#!/bin/sh
npx prettier --write .
```

配置提交模板：
在项目根目录下创建 .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的技巧

启用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 .

自定义提交信息模板：
在项目根目录下创建 .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 结合使用可以提供更全面的代码检查功能。具体步骤如下：

安装 ESLint：
在项目根目录下安装 ESLint。
```
npm install --save-dev eslint
```

配置 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',
     },
   },
 ],
};

安装 Prettier 插件：
安装 eslint-plugin-prettier，并将其集成到 ESLint 中。
```
npm install --save-dev eslint-plugin-prettier
```

配置 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 结合使用，可以进一步增强代码的一致性。

安装 EditorConfig：
在项目根目录下安装 EditorConfig。
```
npm install --save-dev editorconfig
```

创建 .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

配置 Prettier 使用 EditorConfig：
在 .prettierrc 文件中设置 useTabs 和 tabWidth。
```
{
 "useTabs": false,
 "tabWidth": 4
}
```

其他常用工具的整合方法

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

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

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

Prettier 与 Commitlint：
Commitlint 是一个 Git 提交信息检查工具，可以与 Prettier 结合使用，确保每次提交的格式符合规范。
```
npm install --save-dev commitlint @commitlint/config-conventional
```
在项目根目录下创建 .commitlintrc 文件。
```
{
 "extends": ["@commitlint/config-conventional"]
}
```

Prettier的进阶用法

自定义Prettier规则

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

单引号与双引号：
使用单引号（singleQuote）。
```
{
 "singleQuote": true
}
```
逗号：
在对象和数组末尾添加逗号。
```
{
 "trailingComma": "es5"
}
```
换行符：
使用 LF（Unix 风格）换行符。
```
{
 "endOfLine": "lf"
}
```

Prettier插件的使用

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

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

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

配置插件：
在 .prettierrc 文件中启用插件。
```
{
 "plugins": ["prettier-plugin-unicorn"]
}
```

Prettier的自动化测试

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

创建 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 .

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

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

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

这篇关于Prettier课程：初学者轻松掌握代码格式化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程