Prettier+VScode 治好你的代码洁癖

试想一个多人开发的项目，每次同步代码，看到各个风格迥异，换行空格混乱，4格，2格缩进交替上演的代码文件，分分钟逼死强迫症啊。忍无可忍只能拔枪相见了~~。统一的代码风格规范，对于多人开发的大项目一定是必不可少的，但是口头约定又是一定没有用的（nice脸）。这时候就需要Prettier上场了，一个配置文件，配合VScode，保存即格式化，你的同事都不需要知道代码风格是什么，，整个团队只要clone项目，自动保持统一风格。搞定！

Prettier是什么

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是github上的官方解释，其实就是简单的代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)。而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。

Prettier怎么用

• 编辑器插件
• CLI命令行

编辑器

这里介绍VSCode中如何配置Prettier

• 安装 Prettier插件 Prettier - Code formatter
  安装插件后，调出系统设置就能看到prettier相关选项了，如图
  

• 添加自定义配置文件.prettierrc
  作为项目的整体代码规范，如果依赖本地配置，显然是不科学的，所以需要.prettierrc 文件覆盖本地配置。我的配置文件如下

     {
        "singleQuote": true,
        "trailingComma": "es5",
        "printWidth": 140,
        "overrides": [
          {
            "files": ".prettierrc",
            "options": { "parser": "json" }
          }
        ]
      }
  

到此，prettier安装完毕，使用shift+alt+f就可格式化代码。当然每次手动格式化还是很费力啊，怎么办？自动保存。系统设置中增加"editor.formatOnSave": true即可自动保存，还要注意的一点是，如果同时设置了"files.autoSave": "autoSaveDelay",保存及格式化会失效。files.autoSave配置成别的选项即可。

另外，如果项目配置了.editorConfig文件，在配置了"editor.formatOnSave": true后，如果项目成员没有安装 Prettier 插件，保存时就会读取.editorConfig文件，同样可以格式化代码。启用 Prettier 插件后，.editorConfig的配置就会失效，读取.prettierrc 文件的配置

命令行

命令行用法需要安装prettier,npm install prettier --save-dev，使用prettier write **.js 就可以格式化文件。将添加到你的NPM脚本中，prettier --write './src/**/*.js,这样就可以批量格式化项目中的所有文件了。

结语

prettier只关心代码格式，显然是不够的。项目中还是要引入ESlint。两者配合才能使项目代码优雅健壮