I use Vue sfc, ts-loader will check html and css, but I don't want that #112
Description
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
