vue/cli 生成的 tslint 項(xiàng)目中在頁面上無法顯示報(bào)錯(cuò)信息
image.png
image.png
vue.cofnig.js
typescript 踩坑
-
自定義規(guī)則是可以的暇检， 參照官方文檔
- 需要tsc 編譯成js
- 然后在tslint.json 中配置 rulesDirectory离唬， 就可以在rules 里直接引用這個(gè)規(guī)則了
-
自定義formatter 現(xiàn)在還不能用
- tslint 設(shè)置輸出格式也是只能在 tslint 命令行里使用
- 在tslint.json 或者tsconfig.json 配置就別想了 官方issue
-
tslint 規(guī)則報(bào)錯(cuò) overlay
- 親測(cè)辙诞， 由于tslint 正常輸出的格式并不是comand line 中正常的 label 錯(cuò)誤澄步。 只是顏色不同， 輸出文字的格式不同梭冠。 所以webpack的overlay 對(duì)于tslint 根本無效
- fork-ts-checker-webpack-plugin可解创肥， 專為檢測(cè)ts 類型做的一個(gè)插件绢慢。 同時(shí)提供規(guī)則化的輸出。
推薦配置
- 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 [{
//一下幾項(xiàng)都是推薦配置沮稚，async false使其可以在 頁面上顯示
async: false,
tslint: true,
vue: true
}]
})
},
configureWebpack: {
plugins: []
}
}
最終艺沼，頁面上可以顯示報(bào)錯(cuò)信息了
image.png
image.png
todo
- 報(bào)錯(cuò)信息只能顯示一條記錄
