您的位置:

Prettier:让代码优雅起来的全能代码格式化工具

一、Prettier介绍

Prettier是一个快速、强制一致的JavaScript/TypeScript代码格式化工具,不仅仅支持JavaScript和TypeScript,还支持HTML、CSS、JSON、Markdown等多种语言。

相较于其他代码格式化工具,Prettier有以下几个特点:

1、支持自动适应ES6+语法,比如箭头函数、模板字面量、可选链式调用等。

2、强制性格式化,相同的代码在不同的开发者环境下,格式都是一致的,避免了团队代码风格不统一的问题。

3、Prettier对于代码格式的优化和排版,比其他类似工具更优秀,让代码看起来更美观、简洁。

二、在项目中使用Prettier

1、全局安装Prettier:


npm install prettier -g

2、在项目中安装Prettier:


npm install prettier --dev --save-exact

安装完成后,可以使用Prettier的命令行工具格式化代码,如:


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

其中--write的意思是将格式化结果覆盖到原文件中,src/**/*.js是格式化所有src目录下的js文件。也可以使用--check命令检查是否符合规范,如:


prettier --check src/**/*.js

3、在编辑器中使用Prettier:建议在编辑器中安装Prettier插件,当保存文件时会自动格式化代码。

在VS Code中安装Prettier插件的方法:

1、按Ctrl+Shift+X打开扩展搜索框,搜索Prettier安装即可。

2、在.vscode/settings.json文件中添加以下配置(可选):


{
    "editor.formatOnSave": true, //每次保存代码自动格式化
    "editor.defaultFormatter": "esbenp.prettier-vscode" //指定Prettier为默认代码格式化工具
}

三、Prettier的配置项

Prettier提供了很多配置项,可以根据自己的需要进行定制。例如:

1、tabWidth:指定缩进的空格数,默认为2。


{
    "tabWidth": 4
}

2、semi:控制是否在语句末尾加上分号,默认为true。


{
    "semi": false
}

3、singleQuote:控制是否使用单引号代替双引号。


{
    "singleQuote": true
}

使用方法:在项目中新建一个.prettierrc.json文件,并添加需要的配置项。

四、与ESLint集成

ESLint是一个代码检查工具,常用于检查代码质量和风格问题。

将Prettier与ESLint结合使用可以实现代码格式化与代码质量检查的结合。

步骤如下:

1、安装ESLint的prettier插件:


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

2、在ESLint配置中添加prettier插件,并进行相关配置:


{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended" //添加prettier插件
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error", //规则配置
    //...
  }
}

3、根据自己的需求添加其他需要的规则。

五、与Git结合使用

将Prettier与Git结合使用可以实现在代码提交前自动格式化代码,并确保代码仓库中所有的代码都符合同一种风格。

方法如下:

1、使用.git/hooks/pre-commit文件,在代码提交前自动执行Prettier检测和格式化:


#!/bin/sh

echo -e "\\033[1;33mRunning Prettier...\\033[0m"
if ! git diff --diff-filter=d --cached --exit-code --quiet -- '*.js' '*.jsx' '*.ts' '*.tsx' '*.html' '*.css'; then
  echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
  exit 1
fi
prettier --list-different '**/*.+(js|jsx|json|less|css|ts|tsx|md|graphql|yml|yaml)'
if [ $? -ne 0 ]; then
  echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
  exit 1
fi
echo -e "\\033[1;32mPrettier has completed !\\033[0m"
exit 0

2、安装Husky,并在.git/hooks/pre-commit文件中添加precommit命令:


npm install husky --save-dev
npx husky add .husky/pre-commit "bash .git/hooks/pre-commit"

3、在项目中添加Prettier配置文件,如上文所述。

六、小结

Prettier是一款优秀的代码格式化工具,能够让我们在开发中省去代码风格的细节问题。通过与编辑器、ESLint、Git等工具的结合,可以进一步提高代码质量和开发效率。在团队协作中,可以使用Prettier统一代码风格,规避风格不一致的问题。