vue/cli 生成的 tslint 项目中在页面上无法显示报错信息
image.png image.pngvue.cofnig.js
typescript 踩坑
-
自定义规则是可以的, 参照官方文档
- 需要tsc 编译成js
- 然后在tslint.json 中配置 rulesDirectory, 就可以在rules 里直接引用这个规则了
-
自定义formatter 现在还不能用
- tslint 设置输出格式也是只能在 tslint 命令行里使用
- 在tslint.json 或者tsconfig.json 配置就别想了 官方issue
-
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.pngtodo
- 报错信息只能显示一条记录
网友评论