前言

在前端开发中，代码的格式化一直都是个比较麻烦的问题，不仅需要保持一致性，还要保证易读性。而且代码格式化应该是一项可自动化的任务，因为它往往只是为了代码美观而做，不会增加代码的功能，因此我们可以使用自动化工具来完成这项任务。在这个方面，prettier 是目前最受欢迎的代码格式化工具之一，它可以与任何代码编辑器、构建工具和版本控制系统集成使用。而在 prettier 基础上，有一个 npm 包更进一步，more-prettier ，它提供了更多的自定义选项和功能，本篇文章将会介绍如何使用 more-prettier 以及其更为细节的设置选项。

安装 more-prettier

在安装更多 prettier 选择及特殊格式化功能时，需要安装更多 prettier 的 npm 包。可以使用 npm 全局安装 more-prettier：

npm install more-prettier --global

使用 more-prettier

使用 more-prettier 和 prettier 的方式基本相同，可以使用 CLI 命令行或配置文件的方式使用。

CLI 命令行

在命令行中使用 more-prettier，需要使用 -f 参数指定文件名：

more-prettier -f index.js

使用 -w 参数可以直接修改源文件：

more-prettier -f index.js -w

更多 CLI 命令可以查看：

more-prettier --help

配置文件

在项目根目录下创建 .more-prettierrc 文件，即可进行更多自定义的配置。例如：

-- -------------------- ---- -------
-
    ---------- -----
    ----------- --
    ------------- ----
    ------- ------
    -------------- -----
    ---------------- -------
    ----------------- ------
    --------------------- -----
    ----------------- -----
    -------------- --------
    ------------ ---------
    ------------ -
      -
        -------- -------
        ---------- -
          ------------ ---------
          ------------- --
        -
      -
    -
-

这里的配置和 prettier 的配置一样，但是多了一个 overrides 对象，可以为特定文件和文件类型指定 prettier 配置。

示例代码

更改 .more-prettierrc 文件中的 useTabs 属性，并使用 more-prettier 格式化 index.js 文件：

{
    "useTabs": true
}

function foo() {
  console.log('foo');
}

more-prettier -f index.js

function foo() {
	console.log('foo');
}

总结

使用 more-prettier 可以更加方便和灵活地配置和调整 prettier 的功能，使之更符合自己和团队的编码规范。通过一些例子，我们也可以体会到自动化工具的优势，提高了代码的美观性、可读性，同时自己也的确注意到了一些细节上的问题。因此在实际工作中，我们应该重视代码格式化的工作，并尽可能应用自动化工具来减少非必要的人力成本，提升开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005595f81e8991b448d6c7d

npm 包 more-prettier 使用教程

前言

安装 more-prettier

使用 more-prettier

CLI 命令行

配置文件

更多关于 more-prettier 的选项

useTabs

tabWidth

printWidth

semi

singleQuote

trailingComma

bracketSpacing

jsxBracketSameLine

jsxSingleQuote

arrowParens

proseWrap

示例代码

总结

纠错反馈