Prettier配置指南

theme: smartblue highlight: a11y-dark

Prettier 指南供参考。 因个人理解能力有限，如有纰漏请不吝赐教。

一、安装

安装命令

//npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

二、文件准备

创建 prettier 所需文件

在根目录下创建.prettierrc.js配置文件及.prettierignore忽略文件

三、创建配置

1. 创建格式化参考规则

在.prettierrc.js中写入以下内容：

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

格式化规则还可以写在如下文件中(按优先级由高至低排列)：

1. 项目的package.json文件中

2. .prettierrc.json或 .prettierrc.yml文件中

//格式示例
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

3. .prettierrc.js或 prettier.config.cjs文件中

//格式示例
module.exports = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

除此之外还可以写在很多类型中，详见 preitter 官网，此处不赘述。

2. 配置忽略文件

在.prettierignore中写入以下内容：

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

四、格式化文档

1. 命令行格式化

（1）格式化全部文档

npx prettier --write .
//或
yarn prettier --write .

（2）格式化指定文档

npx prettier --write src/components/Button.js
//或
yarn prettier --write src/components/Button.js

（3）检查文档是否已格式化

npx prettier --check .
//或
yarn prettier --check .
//检查指定文件同上

2. 利用编辑器插件进行格式化

在编辑器中搜索相应的 Prettier 安装，即可运用编辑器快捷键进行格式化。

重要提示：编辑器中的 Prettier 格式化规则也可在设置中编写，但实际执行时会以本地规则为优先。

3. 集成在 ESlint 中

ESlint 与 Prettier 可能会冲突，故需做如下设置：

//1. 安装 eslint-config-prettier 插件
npm i -D eslint-config-prettier
//2. 在eslint的配置文件中写入以下内容
 extends: ['plugin:prettier/recommended'], // 避免与 prettier 冲突

4. 集成在 git 生命周期中

搭配 lint-staged 与 husky 完成

—–正文完—–

—–如下为内容以上规则（三-1）对应的美化效果，供参考—– 配置调试地址

美化前:

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
  
  
  let quotePropsDemo = {
    a:1,
    'b-2':2,
    'c':3
  }

  let arrowParensDemo =x=>x
  
  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}> <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong> {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> } <em> { greeted } </em> { (silent) ? "." : "!"} </div>;

}

美化后:

function HelloWorld({ greeting = 'hello', greeted = '"World"', silent = false, onMouseOver, }) {
  let quotePropsDemo = {
    a: 1,
    'b-2': 2,
    c: 3,
  };

  let arrowParensDemo = (x) => x;

  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, '');

  return (
    <div className="HelloWorld" title={`You are visitor number ${num}`} onMouseOver={onMouseOver} > <strong> {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()} </strong> {greeting.endsWith(',') ? ( ' ' ) : ( <span style={{ color: 'grey' }}>", "</span> )} <em>{greeted}</em> {silent ? '.' : '!'} </div>
  );
}