I use Vue sfc, ts-loader will check html and css, but I don't want that

[martinko2009]

I use Vue SFC to develop, but I find that ts-loader will throw checking errors in html and css. I think ts-loader check the html in tag and css in <style> tag, but I don't want it to check html and css, just only check ts is good.
webpack.config.js

{
	enforce: "pre",
	test: /\.(vue)$/,
	include:[path.resolve(__dirname,"./src"), path.resolve(__dirname,"./assets")],
	exclude: [path.resolve(__dirname,"./node_modules/"), path.resolve(__dirname,"./assets/components/skeleton")],
	use: [
		{
			loader: 'tslint-loader',
			options: { 
			}
		}
		]
},
{
	test: /\.vue$/, 
	loader: 'vue-loader',
		  options: {
			  loaders:{
				  js: [{
					  loader: 'babel-loader',
					  options: {
						  compact: false,
						  cacheDirectory: true,
						  presets: ['@babel/preset-env'],
						  plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-object-rest-spread',["@babel/plugin-proposal-decorators", { "legacy": true }]]
						  }
					  }],
					  ts: "ts-loader",
					  tsx: "babel-loader!ts-loader",
				      css: [MiniCssExtractPlugin.loader, 'css-loader'], 
					  scss: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
					  extractCSS:true
				  }
			  }
		  },

code：

<template>
	<div>
        <div>欢迎您[<span class="visitor" v-text="marks"></span>]
            来到Typescript的世界</div>
        <button @click="changed">换个人</button>
    </div>
</template>
<script lang='ts'>
class Test {
    names: Array<string> = ['小王', '小强', '小张'];
    idx = 0;
    GetVisitor (): string {
        this.idx++;
        if (this.idx === this.names.length) {
            this.idx = 0;
        }
        return this.names[this.idx];
    }

};
const tester = new Test();
import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class HelloHello extends Vue {
    //data
	marks = tester.GetVisitor();

    //methods
	changed () {
		this.marks = tester.GetVisitor();
    }
}
</script>

error information:

./src/demo/type-script/hello/hello.vue?vue&type=template&id=183bd9b1& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/tslint-loader??ref--1-0!./src/demo/type-script/hello/hello.vue?vue&type=template&id=183bd9b1&)
Module Warning (from ./node_modules/tslint-loader/index.js):
[3, 30]: " should be '
[3, 47]: " should be '
[5, 24]: " should be '
[3, 29]: Missing semicolon
[3, 39]: Missing semicolon
[3, 46]: Missing semicolon
[3, 63]: Missing semicolon
[5, 16]: Missing semicolon
[8, 8]: Missing semicolon
[35, 10]: Missing semicolon
[3, 41]: missing whitespace
[3, 42]: missing whitespace
[3, 54]: missing whitespace
[3, 55]: missing whitespace
[5, 10]: missing whitespace
[4, 28]: missing whitespace
[4, 29]: missing whitespace
[8, 2]: missing whitespace
[7, 2]: missing whitespace
[6, 6]: missing whitespace
[5, 37]: missing whitespace
[5, 38]: missing whitespace
[5, 33]: missing whitespace
[5, 34]: missing whitespace
[8, 13]: missing whitespace
[8, 14]: missing whitespace
[8, 18]: missing whitespace
[3, 30]: missing whitespace
[3, 47]: missing whitespace
[5, 24]: missing whitespace
[1, 1]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[3, 18]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[3, 55]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[35, 1]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
[1, 1]: missing file header

[martinko2009]

@bhovhannes @wbuchwalter

[akoidan]

Any progress? I'm facing the same issue I end up using vue-tslint-loader. The example you can check on vue-webpack-minimal . I would like to switch to tslint-loader

[akoidan]

You can also use configuration like bellow, but it seems it's tricky, it shows 1 warning to template line, but everything else is fine:

npx vue-cli init deathangel908/vue-webpack-minimal#tslint
yarn install
yarn run build

[Marcus-Rise]

Same issue