Prettier 简明介绍

2019-05-07 14:19:12 浏览数 (1)

Prettier 是格式化代码工具。用来保持团队的项目风格统一。

安装

yarn 安装:

代码语言:javascript复制
yarn add prettier --dev --exact

npm 安装:

代码语言:javascript复制
npm install --save-dev --save-exact prettier

使用

代码变化后,自动进行代码格式化

按如下步骤做:

1 安装检查文件变化的的第三方包: onchange。

2 在 package.json 加如下内容:

代码语言:javascript复制
"scripts": {
  "prettier-watch": "onchange '**/*.js' -- prettier --write {{changed}}"
}

和 ESLint 配合使用

按如下步骤做:

1 安装第三方包:

代码语言:javascript复制
yarn add eslint-config-prettier eslint-plugin-prettier --dev

2 在 .eslintrc.json 加如下内容:

代码语言:javascript复制
{
  "extends": ["prettier", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

代码提交前,自动进行代码格式化

1 安装第三方包:

代码语言:javascript复制
yarn add pretty-quick husky --dev

2 在 package.json 加如下内容:

代码语言:javascript复制
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

更多代码提交的使用方法见这里。

配置规则

.prettierrc.js 中配置:

代码语言:javascript复制
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true
}

参数说明,见这里。

推荐用 prettier-standard 将代码格式化成 JavaScript 标准风格。

忽略文件

忽略文件, 在 .prettierrc.js 中配置

代码语言:javascript复制
node_modules/

推荐阅读

  • 相关项目
  • 我为什么推荐Prettier来统一代码风格

0 人点赞