@19h47/prettier-config 中文文档教程

Question

@19h47/prettier-config

19h47 的 prettier 配置基于 Upstatement 的配置。

Installation

yarn

yarn add --dev @19h47/prettier-config prettier

Usage

在项目的根目录下创建一个 prettier.config.js 文件，其中包含：

module.exports = require('@19h47/prettier-config');

Editor Integration

Visual Studio Code

1. Install Prettier extension: View → Extensions then find and install Prettier - Code formatter
2. Reload the editor
3. In your user settings Code -> Preferences -> Settings add editor.formatOnSave: true

Enforced Rules

查看所有 Prettier 的 配置选项。

• 打印宽度

  100 个字符时换行。

• 制表符宽度

  每个缩进级别 4 个制表符。

• 制表符

  使用制表符而非空格缩进行。

• 分号

  始终在语句末尾打印分号。

  const greeting = 'hi';
  

• 引用

  使用单引号而不是双引号。

  const quote = 'single quotes are better';
  

• 尾随逗号

  尽可能使用尾随逗号。

  const obj = {
      a: 'hi',
      b: 'hey',
  };
  

• Bracket Spacing

  打印对象文字中括号之间的空格。

  {
      foo: bar;
  }
  

• JSX Brackets

  将多行 JSX 元素的 > 放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素).

  <button className="prettier-class" id="prettier-id" onClick={this.handleClick}>
      Click Here
  </button>
  

• 箭头函数括号

  尽可能省略括号。

  x => x;