vue3-ts：husky + prettier / 代码格式化工具

news2024/9/24 12:17:03

一、Prettier简介

Prettier是一个流行的代码格式化工具，它的主要作用是帮助开发者自动规范化代码的格式，提高代码的可读性和一致性。Prettier通过解析代码并使用自己的规则重新打印它，以确保代码风格的一致性和符合预设的格式化标准。

二、prettier主要特点

2.1、自动化格式化：Prettier能够自动识别代码中的缩进、换行、空格等格式，并根据预设的规则进行格式化，无需手动调整代码格式。

2.2、支持多种语言：Prettier支持多种编程语言，包括JavaScript、TypeScript、CSS、HTML等，可以满足不同项目的需求。

2.3、配置灵活：Prettier提供了丰富的配置选项，可以根据项目需求进行个性化配置，包括缩进大小、换行符类型、引号风格等。

2.4、快速高效：Prettier采用了先进的解析器和格式化算法，能够快速处理大型代码库，并保持良好的性能。

三、prettier主要功能

3.1、代码风格统一：Prettier可以确保团队成员在不同的编辑器中编写的代码具有相同的格式，避免因个人编码风格差异导致的代码混乱。

3.2、提高代码可读性：通过一致的代码风格，Prettier可以帮助提高代码的可读性，使得代码更加易于理解和维护。

3.3、减少代码审查工作量：在团队开发中，Prettier可以作为代码规范的一部分，减少代码审查时因格式问题而产生的工作量。

3.4、集成多数编辑器：Prettier可以集成到大多数编辑器和开发环境中，如Visual Studio Code、Atom、Sublime Text等，方便开发者使用。

四、prettier使用场景

Prettier适用于各种开发场景，包括个人项目、团队协作和开源项目等。在个人项目中，开发者可以使用Prettier来保持代码的一致性和可读性；在团队开发中，Prettier可以作为代码规范的一部分，确保团队成员编写的代码风格一致；在开源项目中，Prettier可以帮助维护者和贡献者保持代码的一致性，提高项目的可维护性。

五、prettier配置方式

5.1、安装 Prettier / v3.3.3

pnpm add prettier

5.2、配置 Prettier

Prettier 支持多种配置方式.prettierrc.json（或 .prettierrc.json、.prettierrc.yaml、.prettierrc.js）

创建 .prettierrc.json 文件，并添加以下基础配置

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

这个配置定义了一些基本的格式化选项，如是否使用分号、单引号、行宽等。

5.3、package.json / script集成

提交代码之前运行 Prettier 来格式化所有更改的文件

{  
  "scripts": {  
    "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,scss,json,md}\""  
  }  
}

终端中运行 pnpm run format 来格式化项目中的所有指定文件。

六、husky / pre-commit（方法一）

pnpm run format

七、集成到 Git 钩子（方法二）

为了更进一步自动化这个过程，你可以使用像 husky 和 lint-staged 这样的工具来将 Prettier 集成到 Git 钩子中。这样，每次提交之前都会自动运行 Prettier 来格式化暂存的文件。

安装 husky 和 lint-staged

pnpm add husky lint-staged

执行后会检查文件并自动修正

然后，在 package.json 中配置它们：

{  
  "husky": {  
    "hooks": {  
      "pre-commit": "lint-staged"  
    }  
  },  
  "lint-staged": {  
    "*.{js,jsx,ts,tsx,vue}": [  
      "eslint --fix"
    ],  
    "*.{js,jsx,ts,tsx,css,scss,json,md,yaml,yml}": [  
      "prettier --write"
    ]  
  }  
}