在前端开发中，代码规范是非常重要的，能够提高代码质量和团队的协作效率。而 TSLint 是一个非常流行的 TypeScript 代码检查工具。为了能够通过webpack实现在线文档自动检查，我们需要使用 tslint-webpack-plugin 这个 npm 包。本篇文章将详细介绍如何使用它，以及如何在Webpack配置中加入该插件。
安装和配置
首先，你需要在项目中安装 tslint-webpack-plugin 包。可以使用 npm 命令进行安装：
npm install --save-dev tslint-webpack-plugin
安装完成后，在你的 Webpack 配置文件中引入该插件：
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
-- ---
-------- -
--- --------------
------ -----------------
--
-
--这里，我们使用 TSLintPlugin 工具，并把文件路径作为参数传递给它，以指定要检查的代码文件路径。
配置 Rules
在 Webpack 配置中，除了指定检查的文件路径，我们还可以使用 TSLintPlugin 中的 configuration 属性来开启、关闭或修改 TSLint 的规则。具体来说，我们可以借助该属性指定一个路径，它包含 TSLint 的配置文件，比如 tslint.json。
new TSLintPlugin({
files: ['./src/**/*.ts'],
configuration: './tslint.json',
}),TSLint 配置文件通常定义在项目的根目录下，文件名为 tslint.json，常常用于在项目中容易访问规则。在该文件中，我们可以配置 TSLint 的检查规则，从而自定义 TSLint 的行为。在这里，我们设置了文件路径，这个路径包含了 .ts 的文件（.,当然,可以改成自己项目对应的后缀）。
自定义 Formatter
在使用默认的 TSlint formatter 的时候，工具比较笨重，它会把检查结果全部输出到命令行里。因此，我们需要自定义 Formatter，以便在浏览器中查看比较友好的输出结果。
首先，我们需要安装 tslint-formatter-html 包：
npm install --save-dev tslint-formatter-html
安装完成后，在你的 TSLintPlugin 配置中添加 formatters 属性：
-- -------------------- ---- -------
----- ---- - ----------------
--- --------------
------ ------------------
-------------- ----------------
----------- -
-
---------- -------
-------- -------------------- --------------------------
-
-
---在上面的配置中，我们定义了一个 formatters 属性，它包含一个 formatter 参数指定了 html formatter。此外，我们还指定了 outFile 属性，它定义了 html 输出文件的路径。
总结
以上就是使用 tslint-webpack-plugin 插件进行代码检查的方法。使用该工具可以使我们的项目更加规范整洁，提高团队协作的效率，也能帮助开发人员更好地理解 TypeScript 代码与语法。限于篇幅，该文章并未详细讲解如何配置 TSLint 的检查规则，建议大家可以参考官方文档进行自学、自行探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57850