Linting support for typescript

[timeu]

I am not sure, if this issue belongs here or rather in vscode-tslint, but is there any way to add support for linting typescript script blocks (<script lang="ts">) in single file vue components (similar to what is possible with eslint?) or is there any workaround ?

In my current webpack setup, I managed to get linting to work from the command line when I run the build step (can be done with vue-loader and ts-loader).
However VSCode does not display the linting errors and warnings.

[octref]

Do you have an example project where I can test it?

If you can get linting to work on CLI I should be able to surface the errors to VSCode.

[timeu]

I created a repo based on vue-cli's official webpack-simple template and replaced javascript with typescript using the vue-loader together with the ts-loader and tslint-loader.

To re-produce:

git clone git@github.com:timeu/vue-typescript-linting.git
cd vue-typescript-linting
npm install 

You also need typescrpt and tslint installed globally.
If you run npm run build you will see some warnings from tslint for main.ts and the App.vue file.
In Visual Studio Code however only the warnings are displayed for the main.ts file but not for the App.vue file.

Hope this helps

[ppasieka]

I'm not sure if this is supported by tslint. Not yet I guess.

palantir/tslint#2099

[timeu]

@ppasieka: tslint works fine for .vue files in the command line with this setup. The problem is that those lint errors are not surfaced/displayed in visual studio code.

[romandrahan]

@timeu, do you have TSLint no-consecutive-blank-lines error for .vue files in your repo? Cause I have it with my proposed configuration.

[timeu]

@romandragan yeah I have the same issue with no-consecutive-blank-lines, but I guess this is independent of this issue.

[octref]

Actually I'm planning to have better integration between vetur and eslint/tslint by just sending the js/ts region to eslint/tslint and add padding to the errors position. vetur already divides Vue SFC into multiple regions so it has this info.

[octref]

I'll build a tslint-plugin-vue on top of BenoitZugmeyer/eslint-plugin-html, similar to what vuejs/eslint-plugin-vue did.

[octref]

Well tslint doesn't support plugins yet :(
I'll see what I can do. Probably will end up sending the TS region to a TSLint LS like this: https://github.com/angelozerr/tslint-language-service

[akoidan]

In webpack I can specify the rule for vue-loader like below. Is there anything I can do to view linting errors from Webstorm? (For .vue files)

rules:  [{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    ts:  'ts-loader!tslint-loader'
  }
]