在前端开发过程中，格式问题一直是我们最头疼的问题之一。代码缩进、空格、注释等等都是需要注意的。当然，我们可以手动按照某种规范去格式化我们的代码。然而，这是比较繁琐而且耗费时间的。这时候，prettier-tslint 就成了我们的好帮手。
什么是 prettier-tslint
Prettier-tslint 是在 tslint 基础上整合 prettier 的一个工具包。它可以自动将代码格式化为整齐有序的形式，这样我们在写代码的时候就可以不用花费大量的时间去注意格式问题了。
安装
我们可通过 npm 进行安装。打开终端（Terminal）输入以下命令进行安装：
npm install --save-dev prettier-tslint
如果你还没有安装 tslint 和 prettier，也要进行安装。
npm install --save-dev tslint prettier
配置
下载安装完成之后，我们需要对它进行一些配置。在项目的根目录下新建一个 .prettierrc 文件，并写入以下配置：
-- -------------------- ---- ------- - ------------- ---- -- ------- -------------- ----- -- ----- ---------------- ------ -- ----------------------- ------- ----- -- ------ ----------------- ----- -- --------- -------------- --------- -- ------------------- --------------------- ------ -- --- --- ----------- - ----------- - -- ----- -
接下来在 tslint.json 文件中配置 prettier 的规则。在 rules 下面添加以下内容：
-- -------------------- ---- -------
----------- -
---------- -
------------- ---- -- -------
-------------- ----- -- -----
---------------- ------ -- -----------------------
------- ----- -- ------
----------------- ----- -- ---------
-------------- --------- -- -------------------
--------------------- ------ -- --- --- ----------- -
----------- - -- -----
--
----------- ---------
-然后在 lintOptions 中加上 formatter 配置。
"lintOptions": {
"typeCheck": true,
"format": "prettier",
"formatter": "prettier-tslint",
"project": "./tsconfig.json",
"tsconfig": "./tsconfig.json"
}这样，我们就完成了 prettier-tslint 的配置。
使用
使用 prettier-tslint 很简单。我们可以通过以下命令对我们的代码进行突删：
npm run prettier
不过，如果我们只对某一个文件进行操作，那么可以通过以下命令进行：
prettier --write [filename]
这个工具的使用非常简单，不需要额外的学习成本。只需要完成上面的配置就可以用起来了。
总结
prettier-tslint 是一个非常好用的开发工具，它可以给我们省去许多时间，让我们更加专注于核心业务。在配置和使用上也非常简单，只需要记住上述几个命令和配置即可在开发过程中使用，非常的方便。建议大家都来尝试一下，相信在之后的开发中会对我们大有帮助。
Code 示例
在以下 TypeScript 代码中我们演示了 prettier-tslint 的使用：
function helloWorld(message: string) {
console.log(message);
}
helloWorld("Hello, World! ");假如我们没有使用 prettier-tslint 进行代码格式化的话，上面的代码的输出结果为：
function helloWorld(message: string) {
console.log(message);
}
helloWorld("Hello, World! ");但是，如果我们使用了 prettier-tslint 的话，输出结果为：
function helloWorld(message: string) {
console.log(message);
}
helloWorld('Hello, World! ');我们可以看到，标准的格式让代码整洁美观，易读性也会更高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/201908