Angular中如何将迁移tslint至eslint
这篇文章主要介绍Angular中如何将迁移tslint至eslint,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联公司主要从事成都网站建设、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务木兰,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
tslint vs eslint
lint类型 | 用处 | 现状 |
---|---|---|
tslint | 用来检查ts语法规范的插件 | 已经不再维护;Angular从11起弃用 |
eslint | 检查js/ts代码规范 | 仍在维护,官方推荐 |
如何迁移
1. 安装eslint依赖,运行以下命令:
ng add @angular-eslint/schematics
运行结果:
.eslintrc.json文件自动在root生成,默认使用
@angular-eslint
eslint插件。
{ "root": true, "ignorePatterns": [ "projects/**/*" ], "overrides": [ { "files": [ "*.ts" ], "parserOptions": { "project": [ "tsconfig.json" ], "createDefaultProgram": true }, "extends": [ "plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates" ], "rules": { "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ], "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ] } }, { "files": [ "*.html" ], "extends": [ "plugin:@angular-eslint/template/recommended" ], "rules": {} } ] }
以下eslint相关的cli配置被添加至angular.json,今后如果通过ng命令行生成lib或者application,将会自动在该模块下生成.eslintrc.json
"cli": { "defaultCollection": "@angular-eslint/schematics" }
2. 移除或替换tslint相关文件或者配置
删除根目录或模块下的tslint.json
删除tslint相关dev依赖包,如
tslint
或者typescript-tslint-plugin
等(如有)在tsconfig.json中删除tslint-plugin相关配置,如
将angular.json下的tslint配置(如有)改为eslint,可能需要手动修改
原始tslint配置:
修改后的eslint配置(e.g.配置为在projects/lint-test目录下执行lint):
3. 如需暂时关闭一些代码或者文件的eslint检查
在代码上方添加以下注释可暂时关闭该代码eslint检查
/* eslint-disable */ const some_un_used_var;
可以在注释中加入eslint检查报错时的rule以表明暂时关闭检查的原因。例如以下代码,不希望某未用变量被eslint检查出来而抛错
/* eslint-disable @typescript-eslint/no-unused-vars */ const some_un_used_var;
需要关闭某些文件的eslint检查,可添加.eslintignore文件在root下
可在.eslintrc中配置需要lint检查的pattern(本文不赘述,官方介绍)
4. 检验是否可以使用
运行lint命令
ng lint
如运行成功,那么恭喜你迁移完成!
(可选)其他可配套的eslint插件
eslint-plugin-deprecation:验证代码是否过时
eslint-plugin-header:验证文件头部注释是否遵循一定规则(可用于版本,专利校验等)
eslint-plugin-import:验证import地址拼写或者名字错误,语法等
eslint-plugin-prefer-arrow:验证使用箭头函数
eslint-plugin-unicorn:验证js,ts语法相关
eslint-plugin-jsdoc:文档相关
...
可在.eslintrc.json中配置(官方文档)
(可选)配置VS code
安装eslint插件
保存时VS code自动修正eslint相关问题
在.vscode/settings.json中设置
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
或者在File->Preferences->Settings下搜索onsave设置,可找到eslint相关设置
以上是“Angular中如何将迁移tslint至eslint”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
当前名称:Angular中如何将迁移tslint至eslint
当前链接:http://scyanting.com/article/jjoshg.html