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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352