How to make IntelliJ IDEA lint TS script in .vue?

Question

I've been working with Vue & TypeScript lately, and I just can't get this working:

I'm using tslint to provide a unified code style on all TS script, and it works well for all .ts files. The problem is, that the IDE uses its default settings when linting my .vue files.

Example.vue:

<template>
  <div>Example</div>
</template>
<script lang="ts">
  import Component from "vue-class-component"; //<-- not complaining for double-quotes
  import Vue from 'vue';

  @Component
  export default class Example extends Vue {}
</script>

The same piece of code is resulting in a linter warning by IntelliJ IDEA if put in a .ts file.

What I've tried so far:

• Cache invalidate & restart
• Setting tslint-loader in webpack config

Any idea how could i get this working?

Answer 1

We have a feature request to support TSLint in .vue - WEB-31044. Please follow it for updates. Note that TSLint itself doesn't currently support linting Vue single-file components - see https://github.com/palantir/tslint/issues/2099.