overlay for vue-tslint

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

image.png image.png

vue.cofnig.js

• devserver configuration
• tsconfig.json

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

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