温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Angular中如何将迁移tslint至eslint

发布时间:2022-03-31 12:19:08 来源:亿速云 阅读:239 作者:小新 栏目:web开发

这篇文章主要介绍Angular中如何将迁移tslint至eslint,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

tslint vs eslint

lint类型用处现状
tslint用来检查ts语法规范的插件已经不再维护;Angular从11起弃用
eslint检查js/ts代码规范仍在维护,官方推荐

如何迁移

1. 安装eslint依赖,运行以下命令:

ng add @angular-eslint/schematics

运行结果:

  • .eslintrc.json文件自动在root生成,默认使用@angular-eslinteslint插件。

{
  "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中如何将迁移tslint至eslint

  • 将angular.json下的tslint配置(如有)改为eslint,可能需要手动修改

原始tslint配置:

Angular中如何将迁移tslint至eslint

修改后的eslint配置(e.g.配置为在projects/lint-test目录下执行lint):

Angular中如何将迁移tslint至eslint

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插件

Angular中如何将迁移tslint至eslint

保存时VS code自动修正eslint相关问题

在.vscode/settings.json中设置

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

或者在File->Preferences->Settings下搜索onsave设置,可找到eslint相关设置

Angular中如何将迁移tslint至eslint

以上是“Angular中如何将迁移tslint至eslint”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI