美文网首页我爱编程
overlay for vue-tslint

overlay for vue-tslint

作者: kakaka0234 | 来源:发表于2018-07-29 10:19 被阅读0次

    vue/cli 生成的 tslint 项目中在页面上无法显示报错信息

    image.png image.png

    vue.cofnig.js

    typescript 踩坑

    1. 自定义规则是可以的, 参照官方文档

      • 需要tsc 编译成js
      • 然后在tslint.json 中配置 rulesDirectory, 就可以在rules 里直接引用这个规则了
    2. 自定义formatter 现在还不能用

      • tslint 设置输出格式也是只能在 tslint 命令行里使用
      • 在tslint.json 或者tsconfig.json 配置就别想了 官方issue
    3. tslint 规则报错 overlay

      • 亲测, 由于tslint 正常输出的格式并不是comand line 中正常的 label 错误。 只是颜色不同, 输出文字的格式不同。 所以webpack的overlay 对于tslint 根本无效
      • fork-ts-checker-webpack-plugin可解, 专为检测ts 类型做的一个插件。 同时提供规则化的输出。

    推荐配置

    • tslint.json
    {
      defaultSeverity: "warning"
      // other settings
    }
    
    • vue.config.js
    module.exports = {
      devServer: {
        // quiet: true,
        overlay: {
          warnings: true,
          errors: true
        }
      },
      chainWebpack: config => {
        config.plugin('fork-ts-checker').tap(([options]) => {
          return [{
            //一下几项都是推荐配置,async false使其可以在 页面上显示
            async: false,
            tslint: true,
            vue: true
          }]
        })
      },
      configureWebpack: {
        plugins: []
      }
    }
    

    最终,页面上可以显示报错信息了

    image.png image.png

    todo

    • 报错信息只能显示一条记录

    相关文章

      网友评论

        本文标题:overlay for vue-tslint

        本文链接:https://www.haomeiwen.com/subject/gffdpftx.html