本文原发于我的博客：快运用 Dprint 换掉你的 Prettier 罢（火急 | Ray’s Blog

前语：什么是代码格局化东西？

在写代码的时分，咱们有时分会写出来这些丑恶的代码，没有分号，没有换行，奇怪的缩进和空格，不共同的引号：

// 手动造的（
const a=1;let b= 114514,c='1',d="homo"
function
    a
    (
    ){}
type A={ a:string}

可恶，太丑恶力！假如没有代码格局化东西，咱们就必须一个一个一个修正，并且还没方法做到全部人员写的代码风格都共同。 假如咱们运用了代码格局化东西（这儿运用 Dprint），它会主动将以上代码格局化为：

// 手动造的（
const a = 1;
let b = 114514, c = "1", d = "homo";
function a() {}
type A = { a: string };

是不是好看多了？主动加上了分号，共同了引号，空格也适当地增加了。（代码写得好看的有奖励，写的丑陋的有赏罚）
这就是代码格局化东西的作用：将代码共同为共同的格局。

Why not Prettier？

假如你从前做过 JS 开发，那么你或许对 Prettier 有所耳闻。Prettier 在其官网将自己称为“一个固执己见的代码格局化东西”（An opinionated code formatter），同时“具有很少装备项”（Has few options）。这也使得其开箱即用，不必要为装备而烦恼——它会主动共同你的代码风格（并且默认的并不丑！），能够说是ni prettier，nlx prettier --write . 就能用。

那么，为什么这篇文章不向你推荐 Prettier 而要用 不知名 Dprint？原因有下：

  1. Prettier 的装备项很少。前面说到了，它是一个“固执己见”的代码格局化东西，也就意味着它并不能让你自定义代码风格。比方有些人喜爱把等号对齐到一行，不喜爱在花括号前面加空格（尽管我自己对这种风格不感冒），Prettier 就没法做到这一点。一些示例：

    function foo () {} // 这儿，括号前面带有空格
function bar<T>() {} // 泛型函数没有

    这是我个人比较喜爱的一种码风，Prettier 却并不支撑它。并且你也无法请求增加这一功用，由于 Prettier 不再增加新的装备项。

  2. 速度慢。尽管说 Prettier 比较 ESLint 快了不止一个量级（我知道 ESLint 不是一个专门的格局化东西），可是面对大型代码库时，Prettier 仍然需求数秒时刻来解析代码然后格局化。这是脚本言语自身的约束，指不定 Node 在解析 Prettier 代码的时分原生言语写的东西都格局化完了（指Dprint

出于以上几点，我选择转投 Dprint 的怀有（

Dprint

留意，Dprint 现在没有到达 1.0 稳定版，可是 Bug 不多，能够试着用

反正我的 eslint-config 用的 Dprint 来格局化

Dprint 对自己的描绘是“Rust 写的插件化、可装备的代码格局化平台”（尽管我看不懂这个平台platform是什么意思，可是 nb 就对了），留意奥，Rust 写的，那基本上就意味着高性能（）同时，它运用多线程进行格局化，可装备化也是其一大亮点，像是上面说到的括号前加空格就能够实现。

Talk is cheap, show me the code

没有运用方法的介绍文章都是耍流氓，上代码（这儿运用 @antfu/ni 进行依靠装置)：

$ ni dprint

随后：

$ nlx dprint help

看到输出帮助信息就阐明装置成功了。

然后初始化：

$ nlx dprint init

选择需求装的插件按回车（这儿装了 typescript json markdown toml 插件），应该会在当前目录生成一个 dprint.json：

{
  "typescript": {
  },
  "json": {
  },
  "markdown": {
  },
  "toml": {
  },
  "includes": ["**/*.{ts,tsx,js,jsx,cjs,mjs,json,md,toml}"],
  "excludes": [
    "**/node_modules",
    "**/*-lock.json"
  ],
  "plugins": [
    "https://plugins.dprint.dev/typescript-0.84.1.wasm",
    "https://plugins.dprint.dev/json-0.17.1.wasm",
    "https://plugins.dprint.dev/markdown-0.15.2.wasm",
    "https://plugins.dprint.dev/toml-0.5.4.wasm"
  ]
}

或许你也能够自己指定：

$ nlx dprint init --config .dprint.json

此时运行 nlx dprint check 就能够检测代码中存在的格局问题， nlx dprint fmt 就能主动格局化！

能够看到装置步骤也是非常简单（）

装备

装备这儿不多说，需求自定义请自行查看官网：dprint.dev/config

与编辑器集成

假如不按照编辑器插件，你每次写代码都必须要手动进行格局化，挺烦人的。假如装了编辑器插件，就能够在保存 / 输入时主动格局化！

翻开你的用户设置 settings.json（不会翻开的自己看文档），参加如下内容：

{
  "editor.defaultFormatter": "dprint.dprint",
  "editor.formatOnSave": true
}

或许假如你只想让 JS 运用 Dprint （TS 同理）：

{
  "[javascript]": {
    "editor.defaultFormatter": "dprint.dprint",
    "editor.formatOnSave": true
  }
}

留意，以上装备只适用于 大局装置的 Dprint 。假如是在项目中装的 Dprint，请在作业区装备中增加：

{
  "dprint.path": "./node_modules/dprint/dprint.exe"
}

能够看到，上面这种方式是比较麻烦的。并且，它没法显示格局化更改了那些地方，没有 Diff，看着可难受了。有没有什么更好的方法呢？

有！假如你用了 ESLint，请看下一部分！

与 ESLint 集成

Prettier 有一个插件能够让 Prettier 作为一个 ESLint 规矩来运行，它叫 eslint-plugin-prettier。我也做了个相似的插件，eslint-plugin-dprint-integration （eslint-plugin-dprint 被人抢了），内置了 typescript json markdown toml dockerfile 的格局化，以及 Vue 的 Script 部分。（以后会支撑 CSS）。运用方法很简单：

$ ni eslint-plugin-dprint-integration -D

随后，在你的 ESLint 装备文件（这儿是 .eslintrc.cjs）中增加：

module.exports = {
  extends: [
    "plugin:dprint-integration/recommended",
    // 封闭冲突 ESLint 规矩
    "plugin:dprint-integration/disable-conflict",
  ]
};

齐活！翻开你的 VSCode，装上 ESLint 插件，能够看到格局化的修正都可视化了:P