Prettier配置指南

53,770 阅读3分钟

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.jsprettier.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 安装,即可运用编辑器快捷键进行格式化。

常见的编辑器对应插件名
VS CodePrettier - Code formatter
Emacsprettier-emacs
Vimvim-prettier
Sublime TextJsPrettier
Atomprettier-atom

重要提示:编辑器中的 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>
  );
}