如何在VS Code中集成Prettier(译)

原文链接 How to use Prettier in VS Code

Prettier是一款可选的代码格式化工具，来帮助开发者统一代码风格。它能够集成进VS Code中使用，能够配置进行格式化的时机，保存文件或者是提交至版本控制系统时(例如Git、SVN等)。因此你无须去关心代码格式问题，全部交由Prettier来处理，可以根据自己的需求进行全局或者是局部配置。例如，你可以配置代码的单行最大长度，当超出时，Prettier会自动进行换行处理。

如何在VS Code中安装Prettier

首先，安装全局的node库npm install -g prettier。当然你也可以为每一个项目进行单独安装。

其次，在VS Code中安装Prettier插件. 安装之后，你可以通过命令的方式CTRL + CMD + P(Mac OS)或CTRL + Shift + P (Windows)手动进行文件、代码块的格式化。手动操作过于繁琐，我们可以配置在文件保存时进行格式化，因此你可以打开VS Code中的 首选项/设置进行配置，以JSON的形式如下:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

如果你是以界面化形式进行配置，可以搜索“Format On Save”关键词，找到之后并启动该选项。设置之后，文件将会在保存之后自动进行Prettier格式化操作。

怎样去配置Prettier

如果你想在每一个独立的项目中去配置不同的Prettier参数，你可以在项目根目录增加.prettierrc文件去处理

touch .prettierrc

下面的配置文件是我个人推荐的配置参数，仅供参考，你也可以在这里查询到所有可用的配置内容

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
}

设置为上面的参数之后，Prettier可以确保代码段尾随分号(semi)和逗号(trailingComma)，仅使用单引号(singleQuote)，并将行长度设置为给定的字符数(printWidth)。

下一篇文章我们将讨论 如何结合ESLint使用