Component:

<template lang="pug"> .container h1 {{ pageTitle }} hr div div V-Model test: div {{ vModelTestProperty }} div: input(type='text' v-model='vModelTestProperty') hr div div {{ defaultTextLabel }} div: RegularButton(:lettering='Non-default label' :onClickEventHandler='executeTest') </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; @Component export default class SPA_Test extends Vue { private pageTitle: string = 'SPA test'; private vModelTestProperty: string = 'What you will input will display here'; private defaultTextLabel: string = 'Default label'; public executeTest(): void { console.log('test, OK!'); } } </script> 

TSLint swears at this component in the following way:

  WARNING in ./SPA_Test.vue ... [1, 16]: " should be ' [18, 14]: " should be ' [1, 15]: Missing semicolon [2, 13]: Missing semicolon [4, 7]: Missing semicolon [4, 20]: Missing semicolon [5, 7]: Missing semicolon [7, 8]: Missing semicolon [8, 10]: Missing semicolon [8, 20]: Missing semicolon [9, 10]: Missing semicolon [9, 32]: Missing semicolon [10, 59]: Missing semicolon [11, 7]: Missing semicolon [13, 8]: Missing semicolon [14, 10]: Missing semicolon [14, 30]: Missing semicolon [18, 8]: Missing semicolon [18, 19]: Missing semicolon [33, 10]: Missing semicolon 

Judging by the numbers of lines and columns, TSLint swears exactly on the section where there is no TypeScript, and there can not be. Apparently, ts-loader is not adapted for Vue-components. I know that there are also vue-tslint-loader , and therefore you need to separate these loaders depending on the file name extension. I tried to do it this way:

 module: { rules: [ { // @see https://regex101.com/r/fqrnCW/1 test: /^(?:\w|-)*?(?!vue.ts).ts$/, loader: 'tslint-loader', enforce: 'pre', options: {}, { // @see https://regex101.com/r/zY6fLn/1 test: /^(?:\w|-)*?.vue.ts$/, loader: 'vue-tslint-loader', enforce: 'pre', options: {}, }, // ... ] } 

Despite the fact that 101regexp (the links are given in the comments to the code) the regular expressions I have written work fine, the loader does not find the necessary files, and now TSLint is completely silent, even if it is not specifically complied with.

  • Incorrect regular schedule. - Qwertiy

1 answer 1

 test: /^(?:\w|-)*?(?!vue.ts).ts$/, 
 test: /^((?!\.vue\.ts$).)*\.ts$/, 
  • Thank you for your reply. Unfortunately, on regex101.com both example.vue.ts and example.ts came under this template. - Bokov Gleb
  • @ BokovGleb, fixed. - Qwertiy