npm 包 atma-formatter 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在开发过程中，代码的规范性和可维护性是至关重要的。而对于前端来说，这一问题尤为突出，因为前端技术生态的变化比较快，导致我们需要时时刻刻关注新技术、新标准和新规范。

本文主要介绍一种利用 npm 包 atma-formatter 进行代码格式化的方法，以提高前端代码的质量和可读性。

atma-formatter 简介

atma-formatter 是一款基于 node.js 的代码格式化工具，支持 JavaScript、CSS、HTML 和 JSON 等多种文件格式，同时支持各种开发流派的格式化方式（比如空格缩进、位置缩进、单行/多行等），并且具有高度的可配置性。使用 atma-formatter 可以方便快捷地对代码文件进行格式化，提高开发效率与代码质量。

atma-formatter 的安装

atma-formatter 的安装非常简单，只需要在终端或命令行界面中输入下面的代码即可完成安装：

npm install atma-formatter -g

这里我们使用了 npm 进行包的安装。其中 -g 表示全局安装，这样我们就可以在任意的项目中使用 atma-formatter 了。

atma-formatter 的使用

使用 atma-formatter 进行代码格式化的命令是：

atma-formatter <file_or_directory>

其中，file_or_directory 表示要格式化的文件或目录。atma-formatter 可以接受文件夹名、文件名、以及通配符等多种类型的参数。如果要格式化多个文件，只需要将它们的路径一一列出即可。示例：

atma-formatter my/js/file.js my/css/file.css my/html/file.html

在命令行中执行这个命令后，atma-formatter 将会自动根据文件类型和配置规则对代码进行格式化，并将原始代码替换成新的格式化后的代码。你也可以通过一些参数来对格式化进行定制化。

具体的参数和用法，可以通过 atma-formatter 的帮助命令查看：

atma-formatter --help

配置 atma-formatter

atma-formatter 支持丰富的配置选项，整体上分为三类：

文件格式配置
规则配置
优化配置

这三类配置项可以通过在项目目录下添加一个 .formatter 格式的配置文件来进行配置。下面我们分别介绍这三类配置项的具体内容：

文件格式配置

文件格式配置包括了一些针对各种代码文件格式的配置项，atma-formatter 会根据它们来生成对应的格式化规则。这些配置项主要包括：

js (object)：JavaScript 文件格式和规则配置
css (object)：CSS 文件格式和规则配置
html (object)：HTML 文件格式和规则配置
json (object)：JSON 文件格式和规则配置

示例：

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

其中，indent 表示缩进字符；newLine 表示换行字符；mlTextLineMaxLength 表示多行文本行的最大长度。具体的格式配置参数还有很多，可以根据自己的需要进行设置。

规则配置

规则配置是 atma-formatter 的核心，它定义了代码格式化的规则和流派。atma-formatter 内置了多种规则，不同规则之间的差异在于代码缩进、代码换行、空格、括号、注释等方面的差别。在代码格式化时，开发者可以根据自己的需要来选择不同的规则。

示例：

{
  "rules": {
    "js": "good-parts",
    "css": "default",
    "html": "default",
    "json": "default"
  }
}

上面的代码表示，针对 JavaScript 文件，我们采用了“good-parts”规则进行格式化，而对于其他类型的文件，我们采用默认的规则进行格式化。

优化配置

优化配置包括了一些能够提高代码可读性的配置项，包括：

ensureSpaceBeforeValue : true/false：是否在键值对的键和值之间加入空格
spaceAfterControlStatements : true/false：是否在 if、for、while 等控制语句后添加空格
addTrailingSemicolon : true/false：是否在语句末尾加上分号

示例：

{
  "optimizations": {
    "ensureSpaceBeforeValue": true,
    "spaceAfterControlStatements": true,
    "addTrailingSemicolon": true
  }
}

atma-formatter 的示例

下面是一个使用 atma-formatter 进行代码格式化的完整示例：

假设我们有一个格式糟糕的 JavaScript 文件，代码如下：

var name='John';
  var age=20;
if(age>=18){
console.log(name+' can vote!');
  }else{
console.log(name+' cannot vote yet!');
  }

我们想要使用 atma-formatter 对这个文件进行格式化，首先将 atma-formatter 安装到本地：

npm install atma-formatter --save-dev

然后在项目中添加一个 .formatter 格式的配置文件来进行格式化规则配置和优化配置：

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

然后，在终端或命令行界面中进入该文件目录，并运行以下命令：

atma-formatter path/to/file.js

执行命令后，代码会被格式化成以下形式：

var name = 'John';
var age = 20;
if (age >= 18) {
  console.log(name + ' can vote!');
} else {
  console.log(name + ' cannot vote yet!');
}

可以看到，atma-formatter 格式化后的代码可读性更好，结构更清晰，阅读起来非常方便。

批量处理多个文件

如果我们需要批量对一个目录下的所有 JavaScript 文件进行格式化，只需要将目录作为参数传入 atma-formatter 命令中即可：

atma-formatter path/to/files/*.js

这时，atma-formatter 会自动识别该目录下的所有 js 文件，并进行格式化处理。

上述示例是比较简单的，实际中需要根据不同场合使用不同的规则和选项进行格式化。总的来说，atma-formatter 是一款非常强大的代码格式化工具，在项目开发中会为我们带来极大的方便和效率。

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

npm 包 atma-formatter 使用教程

前言