prettier 草案

说明

项目需要使用 vscode + prettier进行风格统一，prettier 规则由@pospal/prettier-config提供。

提示

非 vscode 用户需要自行搜索配置 prettier

为什么要使用 Prettier

• 不需要去修复 ESLint 报告的风格问题
• 保存文件的时候可以自动统一风格
• 团队成员不需要为规则去争论

下面的段落引用自作者原文

首先它是一个 JavaScript 格式化工具，Prettier 会丢弃掉几乎全部的原始的代码风格，从而保证 JavaScript 代码风格的一致性。跟 ESLint 的不同在于它没有大量的 options 和 rules 需要管理。不过同时有一点也很重要，最终的格式都是确定的。在团队中工作时，很需要减少摩擦，特别是在大型团队里。尽管无法完全避免摩擦，我们更多能做的是通过工具变得更容易在一起协作。你可能觉得配置一下 ESLint 不会消耗太多时间，或者说团队里不会花很多时间争论语法。根据我的经验，实际上不是那么美好。即便你配置了大量的 ESLint 规则，它实际上还是无法捕捉到全部的样式的差异。团队仍然会努力去强制推进一套统一的样式，而这显得很让人分心。语法的细节其实没那么重要。就让 Prettier 这样的工具来做格式和排版就好了，程序员应该关注在那些真正的问题上。用了 Prettier 之后你写代码反而更加自由了，怎么写都可以，因为随后一格式化马上就纠正回来了!语法的细节其实没那么重要。就让 Prettier 这样的工具来做格式和排版就好了，程序员应该关注在那些真正的问题上。

规则

@pospal/prettier-config是在 prettier 默认配置之上进行调整，规则如下：

module.exports = {
  tabWidth: 2,

  /**
   * 超过100个字符换行
   * @default 80
   */
  printWidth: 100,

  /**
   * 使用单引号代替双引号
   * @default false
   */
  singleQuote: true,

  /**
   * 在对象或数组最后一个元素后面是否加逗号
   * @default es5
   */
  trailingComma: 'all',

  /**
   * 箭头函数参数需要有括号
   */
  arrowParens: 'always',
};

独立引入不建议

如果需要在项目中独立引入 prettier 配置，步骤如下

• 安装依赖

yarn add @pospal/prettier-config prettier --dev

• 配置文件

在项目根目录下新建.prettierrc.js，并在内部引入

module.exports = {
  ...require('@pospal/prettier-config'),
};

• 忽略文件

在项目根目录下新建.prettierignore

*.lock
yarn-error.log
lib/
coverage/
dist
node_modules/