TypeScript如何使用ESLint进行代码检测

1.什么是ESLint 

    ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。简单的说这个插件可以根据你设置的规则检查你的(JavaScript)代码，提示哪些地方不符合规范并提供解决方案。想详细了解ESLint可以访问官网(ESLint - Pluggable JavaScript linter - ESLint中文)

2.ESLint是否也能用于TypeScript

    TypeScript一开始也有个规范插件叫TSLint，但是TSLint和ESLint其实差不多，所以后来TSLint已经停止维护了。可以在TSLint的github上看见已经向ESLint迁移了，所以现在无论是JS还是TS都推荐使用ESLint进行代码检查。

3.如何在VsCode上使用ESLint

    这里将介绍如何在VsCode上使用这个插件，其他编辑器应该也差不多。首先我新建了一个文件夹在里面新建了一个ts文件。

图1

    接着我们在vscode商店下载ESLint插件。

图2

    前两步就绪后，我们就可以把ESLint这个包下载下来，包的管理需要package.json这个文件，假如你没这个文件可以使用命令npm init生成这个文件，输入这个命令之后一直回车回车就可以了。有了这个文件之后，我们就可以开始下载ESLint的包了，输入命令npm install eslint。包下载好后，一般会出现node_modules的文件夹和package-lock.json文件，node_modules里面就是放我们下载下来的包。我们检验一下eslint是否安装好。输入命令./node_modules/.bin/eslint -v，有可能会出现图3的报错，首先使用使用管理员身份重新打开vscode，一般来说如果使用的是cmd话问题已经解决了，如果使用的是powershell就需要改变他的执行策略了。输入命令：Set-ExecutionPolicy RemoteSigned既可。然后我们再输入上面检验eslint是否安装好的命令，如果出现图4就证明安装好了。

图3

图4

    接着我们初始化eslint的配置文件，输入命令：./node_modules/.bin/eslint --init，然后会有选项让你选，我们按需选择。因为我们使用的是TypeScript所以图5红框部分选yes，初始化好后就会生成一个配置文件，因为我选择的是json格式的配置文件所以这个配置文件叫.eslintrc.json。

图5

    打开这个配置文件，内容如图6，各个字段是什么意思，上官网解释的很清楚，但是一般来说我们只需设置rules字段，这个字段就是以什么样的规则规范你的代码的。至于rules怎么配置在官网上也解释的很清楚。这里我先拿"no-console"规则试试ESLint是否生效。这个规则的意思使用console就会报错。然后我们使用命令./node_modules/.bin/eslint ./Test.ts测试我们的文件，如果出现报错多半是缺少某些模块。报错提示缺少什么模块我们就装什么模块，就如图7提示缺少typescirpt模块。

图6

图7

    需要的模块都齐全了，我们再次运行检测命令检测Test.ts。出现图8代表我们的ESLint插件成功运行起来了。

图8

    我们打开Test.ts文件可以看见不符合规则的地方都出现相应的提示，我们把光标移到不符合规则的代码上会出现提示。提示违反了哪个规则。并且还有快速修复选项给你提供一些怎么修复的建议。

图9