前端工具小指南之Prettierprettier是个代码格式化工具，格式化的时候不关心语法，只关心代码风格，看似抢了es

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

在一些脚手架搭建的项目中总会在根目录中发现一个配置文件，prettierrc.js或者prettier.config.js，合理分析应该是prettier的配置文件，那么问题来了，prettier是个啥？

先说结论再讲过程，这是个代码格式化工具，格式化的时候不关心语法，只关心代码风格，prettier的英文意思就是好看的（pretty），那么可以理解为代码的颜值矫正器，强迫症福音，不过审美因人而异。

简单的 🌰

话不多说，写几段代码，你就能快速理解

func(arg1, arg2, arg3, arg4);

这是一个很正常的函数调用，有4个短小的参数，可读性还行，但是如果每个参数命名比较长，就会变成下面的样子：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

你是不是正在用滚轮往右划 [狗头]，如果用了prettier，这段代码就可以被格式化成如下：

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

看到这里，想必你已经大概知道了prettier是做什么的了，不关心语法，只关心代码的style。

PS：如果你赶时间，看到这里其实就可以了，点个赞，下次用到了再来看下面的内容。

官方介绍 📖

🎛 An opinionated code formatter
🌈 Supports many languages
⌨️ Integrates with most editors
🔧 Has few options

上面列的几个点是官网的介绍，其中有两个重点：

一是强制的代码格式化，风格统一

二是配置轻量化，降低理解成本

每个人的代码习惯是不一样的，比如写字符串用单引号还是双引号，代码结尾带不带分号等等问题。

这些并不会影响你的代码运行，但会在团队开发的时候会增加协作成本，所以prettier的想法就是，避免口头约定，约定好配置文件，就统一了代码风格。

prettier的配置轻量化也很好理解，就是官方提供的配置其实不算多，就20多个，理解成本也很低，这个原因是作者在维护的时候发现虽然大家停止讨论代码风格，但是新的问题变成讨论要不要加新的字段选项，作者索性就停止了issue的意见收集，简单，简单，极致的简单。

eslint和prettier的区别

机智的小伙伴其实可能已经发现，eslint好像也会干类似的活，但是eslint能做的显然更多更杂，prettier的出现是为了降低eslint的工作量，减少eslint的配置。

prettier只关注于代码风格

左边是eslint原本的配置，右边注释给出的是prettier的解决方案。

[
  "max-len",                    // 最大长度 printWidth
  "no-mixed-spaces-and-tabs",   // 缩进风格 useTabs
  "keyword-spacing",            // 区分空格 bracketSpacing
  "comma-style",                // 末尾逗号 trailingComma
]

eslint更加关注于代码质量，下面就是一些纯语法相关的eslint配置。

[
  "no-unused-vars",              // 不能有未使用的变量
  "no-extra-bind",               // 不必要的函数调用绑定
  "no-implicit-globals",         // 全局的上下文内不能用var 和 function
  "prefer-promise-reject-errors" // Promise的reject方法只能范围error对象
]

安装使用

安装非常简单：

yarn add --dev --exact prettier
echo {}> .prettierrc.json

yarn安装开发环境（--dev）依赖prettier，并且把版本给固定住（--exact），防止仓库升级带来麻烦。
根目录下定义一个json配置文件

Eslint冲突

如果你的项目里安装了eslint，可能会出现相互冲突的情况，这时候还得安装两个依赖：

yarn add --dev eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier

这个是一个eslint配置，把eslint里所有和prettier冲突的配置都关闭，需要在.eslintrc.*文件里加下extends的选项（要放最底下，这样才能进行全面覆盖）：

// .eslintrc.js

{
  // ...其他配置
  extends: [
      'eslint:recommended',
      'plugin:vue/essential',
      'plugin:prettier/recommended'
  ],
  // ...
}

eslint-plugin-prettier

很好理解，这是个eslint的插件，可以让eslint用prettier的配置来进行错误提示，如下图所示，只要提示框中有eslint(prettier/prettier) 就说明这个插件生效了。

最后再来解释下plugin:prettier/recommended的含义，这个其实是多个eslint的配置集合，一个配置搞定，降低配置成本，下面代码就是实际eslint的原子配置：

{
  "extends": ["prettier"],        // 生效 eslint-config-prettier 屏蔽配置
  "plugins": ["prettier"],        // 生效 eslint-plugin-prettier 提示配置
  "rules": {
    "prettier/prettier": "error",   // prettier报错的级别，红色波浪线
    "arrow-body-style": "off",      // 冲突无法解决，直接关闭
    "prefer-arrow-callback": "off"  // 冲突无法解决，直接关闭
  }
}

vscode环境

因为我平时前端开发用的是vscode居多，所以这里暂时就介绍vscode的环境配置

在根目录的.vscode/settings.json添加如下：

{
    "eslint.enable": true,
    "eslint.alwaysShowStatus": true,
    "eslint.options": {
        "extensions": [
            ".js",
        ]
    },
    "eslint.validate": [
        "javascript",
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

并且确保Vscode安装过下面的插件：

好奇的jym就会问了，这篇文章讲的不是prettier吗？其实主要原因就是项目中一般不会单独去使用prettier，还是会结合eslint一起用，所以这里会用eslint的能力去做提示和自动化修复，所以不要搞混淆了。

只要按了保存快捷键，就会自动格式化，一步到位，效果如下：

vscode插件库里其实还有一个prettier的专属插件，这个就是单独使用prettier的时候，用起来比较方便了，实际效果和上面动图里差不多。

下面是.vscode/settings.json中要加上的配置：

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

从我开发的角度出发，我还是比较推荐用上面的 eslint 插件配置模式，毕竟在格式不对的时候实时出现下标红色提示，还是很友好的，不用等到保存的时候突然来个代码闪烁。

结语

工欲善其事，必先利其器，在敲代码之前其实可以想想是不是可以用一些工具来帮自己提高效率（高效摸鱼），这类工具其实非常多，只是需要慢慢去发现，甚至可以自己去造工具。

创造不易，希望jym多多点赞 + 关注二连，持续更新中！！！

PS: 文中有任何错误，欢迎掘友指正

参考： prettier.io/docs/en/ind…

前端工具小指南之Prettier