美文网首页
前端代码风格自动化(4)--Prettier

前端代码风格自动化(4)--Prettier

作者: Jonath | 来源:发表于2019-10-08 15:52 被阅读0次


demo地址


Prettier是一个支持多语言的代码格式工具,如常用的:jsjsxVueFlowTsHTMLCSS等,非常全面,将代码解析为AST,然后重新组装,目的是最终输出风格统一的代码,对比eslint对error的fix要强一些,如最大长度的改动,eslint只是对有问题的地方进行格式化修改,不改动源代码风格,而prettier是对全量的代码进行格式化。

安装

npm install --save-dev prettier 
or
yarn add prettier --dev

配置

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,json,css,md}": ["prettier --write", "git add"]
  }
}

这里我们结合之前用到的huskylint-staged,默认prettier是直接标准输出到终端的,--write,这个配置代表直接改写文件。
prettier让我们专注于业务逻辑,无需再纠结代码风格,配合其它工具,实现了代码提交到仓库前,统一格式化。

相关文章

  • 前端代码风格自动化(4)--Prettier

    1. 前端代码风格自动化(1)--Husky 2. 前端代码风格自动化(2)--Commitlint 3. 前端代...

  • 前端代码风格自动化(3)--Lint-staged

    1. 前端代码风格自动化(1)--Husky 2. 前端代码风格自动化(2)--Commitlint 3. 前端代...

  • 前端代码风格自动化(1)--Husky

    1. 前端代码风格自动化(1)--Husky 2. 前端代码风格自动化(2)--Commitlint 3. 前端代...

  • 前端代码风格自动化(2)--Commitlint

    1. 前端代码风格自动化(1)--Husky 2. 前端代码风格自动化(2)--Commitlint 3. 前端代...

  • Prettier

    格式化代码风格的前端工具 在 CLI 中使用 本地安装 Prettier 在项目根目录中创建配置文件 .prett...

  • eslint + prettier统一前端代码风格

    1、背景: 为了统一代码风格,项目中会配置eslint或者prettier进行规范,那么他们分别作了什么呢? 2、...

  • Prettier

    Prettier 简介:Prettier 是一个可配置化的代码美化(格式化)工具,往往用于统一项目中的代码风格。 ...

  • prettier 格式化插件

    prettier 格式化插件 prettier代码风格统一的号插件, 可以在多个编辑器上面安装对应的插件,通过简单...

  • vscode 配置统一代码风格

    ESLint:作代码质量检测、编码风格约束等; Prettier: 专注于代码格式化的工具,美化代码; Edito...

  • Prettier 学习笔记

    Prettier 特点 一键改变代码风格,无需改变开发风格 => 1. 安装Node 环境 自行安装 => 2....

网友评论

      本文标题:前端代码风格自动化(4)--Prettier

      本文链接:https://www.haomeiwen.com/subject/slwbpctx.html