Ability to work with .vue files.

[prograhammer]

Hi guys,

This PR adds ability to work with .vue files. The files are parsed in such a way as line numbers are preserved. Just ensure the script tag is set ts in your .vue files, for example:

<script lang="ts">
  // ...
</script>

For a quick test, I created a temp branch with the built lib folder included. So you can install like this:

npm install git://github.com/prograhammer/fork-ts-checker-webpack-plugin.git#temp --save-dev

If you are testing in Webpack, (in addition to this plugin) you'll need something like this in your rules:

  {
    test: /\.ts$/,
    loader: 'ts-loader',
    include: [resolve('src'), resolve('test')],
    options: {
      appendTsSuffixTo: [/\.vue$/],
      transpileOnly: true
    }
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },

I also currently use tslint-config-standard so my tslint.json looks something like:

{
    "defaultSeverity": "error",
    "extends": [
      "tslint-config-standard"
    ]
}

I'll try to put together a simple typescript example project for you to test with as well. If you are working in VSCode, you'll need extensions Vetur and TSLint Vue (a forked extension which I also currently maintain) and the editor will match the output you get from this fork-ts-checker-webpack-plugin.

Let me know what more you need. Also, if Vue functionality is too specific for this repo, I can do a fork and release it seperately via npm instead.

Thanks!

[prograhammer]

I just found a critical problem that I'm working to fix. It looks like the .vue file has to be referenced somewhere in the import dependency chain that leads back to the entry point (ie. main.ts). It is also having problems with relative path imports of .vue files. I somehow missed this before PR. Working on it...

[prograhammer]

I found a better way! We just need to rename .vue to .vue.ts and have the plugin parse files with .vue.ts. Much cleaner and full proof! I'll submit a new PR later today. Closing this one!

[johnnyreilly]

Hey @prograhammer, ts-loader has a similar approach which you might find helpful. See here: https://github.com/TypeStrong/ts-loader/blob/master/README.md#appendtssuffixto-regexp-default You might want to consider aligning option names with the ones used in ts-loader if that's a road you want to travel 👍

[prograhammer]

Yeah @johnnyreilly , I've seen ts-loader do that. But ultimately I think TypeScript just prefers .ts extensions and logic just appears all throughout with that assumption. Even though I finally got .vue working, I think for maintenance reasons it is much better for Vue developers to rename their .vue files to .vue.ts. So all we need is to just detect .vue.ts and parse it in fork-ts-checker-webpack-plugin. I'll PR for this. Also, if folks are using VSCode, they can set in their settings.json to associate *.vue.ts to Vue (and using Vetur extension and TSLint Vue extension) and everything works nicely.

[johnnyreilly]

That's super interesting. @HerringtonDarkholme I know you're not that keen on how ts-loader does vue. How do you feel about the approach suggested here? Just curious as I think the Vetur extension is your handiwork?

[prograhammer]

@HerringtonDarkholme @johnnyreilly These are the benefits I find:

1. For Vetur, I can just update the file association in my settings.json and everything continues to work great:

    "files.associations": {
        "*.vue.ts": "vue"
    },

2. There was a limitation where .vue imports needed to be referenced in the chain of dependencies leading up to some .ts file (ie. main.ts entry) for the typechecker program to find the module and resolve it. This doesn't happen with .vue.ts.
3. All other tools/packages for TypeScript all assume the typescript extension. For maintenance reasons, it's just better to use .vue.ts.
4. Special path alias like @ was not working for .vue extension in TypeScript. I did some hacky stuff to make it work (and later could read from the paths option in tsconfig.json), but these sort of things can became frustrating maintenance issues later. With .vue.ts we don't have this problem.
5. VSCode does better "click into" on the import with .vue.ts (basically you can click on the import statement and go to that file).
6. Vue-loader can work with .vue.ts by simply adjusting the glob-like pattern on the loader.

[HerringtonDarkholme]

Thank @prograhammer for your contribution. And thank you again for your interesting finding.
As for the editor part, vetur doesn't assume file extension in its template/style service. So changing file extension would not impact much(except some component related completion I guess). Script part is handled by tsserver, as the extension has already changed. One caveat is that tsserver is robust enough to handle html like syntax, so changing vue to vue.ts won't matter. But TS team probably won't support such robustness.

While I don't think every one will like changing extension, it is an effective work around!

[prograhammer]

@HerringtonDarkholme @johnnyreilly

I got it working fully for .vue files! You can see it working with my forked VSCode extension TSLint Vue. Now I plan to make a new PR here for you guys to see if you want .vue ability! I hope to have the PR ready for you later today or tomorrow.

[aweiu]

@prograhammer your PR has been closed.Any way to do that?I want the fork-ts-checker-webpack-plugin can check type for Vue file.

[prograhammer]

Yeah @aweiu I finally got it working nicely with .vue in a local branch on my machine. I got a little distracted, but I'm back now. I'll post a new PR tonight and a test branch so you can npm install ... and try it out tonight. Watch this thread here: #70.