curious if this plugin works with vue and typescript?

[davidm-public]

seems to have issues finding typescript classes in .vue files.
wondering if this is a known issue?

[prograhammer]

This actually can be accomplished by overriding default host behavior with host.resolveModuleNames (just like it is already being done in host.getSourceFile in the source here). Since the .vue file is not going to be processed through vue-loader, I'm using a parser to get the AST and strip out the typescript. This might need to be optimized later, but my PR should get it working for everyone eagerly waiting vue support!

Stay tuned, I working on a PR now and should be done by tomorrow-ish!

[Toilal]

Thanks. When PR is ready, I will will include it as soon as possible in my vue webpack template fork https://github.com/Toilal/vue-webpack-template to test this.

[prograhammer]

Hi @Toilal

You can see the PR here: #77
For a quick test, I created a vue branch (out of the feature/vue 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#vue --save-dev

1. Turn on the vue option in the plugin in your webpack config:

    new ForkTsCheckerWebpackPlugin({
      tslint: true,
      vue: true
    })

2. For linting to work in .vue files, you need to ensure your script tag's language attribute is set
   to ts or tsx (also make sure you include the .vue extension in all your import statements as shown below):

<script lang="ts">
import Hello from '@/components/hello.vue'

// ...

</script>

3. 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
},

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

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

5. Ensure your tsconfig.json doesn't exclude .vue files:

// tsconfig.json
{
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ],
  "exclude": [
      "node_modules"
  ],
  "compilerOptions": {
    
    // ...

    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

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.

[prograhammer]

For anyone else following this thread, you can use this plugin right away with npm install git://github.com/prograhammer/fork-ts-checker-webpack-plugin.git#temp --save-dev. Check back in a week and we'll have the PR merged or I'll just put it on npm so we can all just get back to writing Vue apps!

[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]

Alright! I found how to get it to work fully on .vue files (without need to go the route of .vue.ts).

It's working in my vscode extension fork: TSLint Vue. So now I can release a new working PR here. Stay tuned!

[johnnyreilly]

Exciting!!

[prograhammer]

The new PR is up and waiting feedback/approval: #77

For a quick install into your current Vue project (to see it working):

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

See this post further up this thread for instructions on Webpack config and more.

[RehanSaeed]

I seem to be able to build and run my app with and without the vue: true option. What exactly does it do?

[Toilal]

this adds TypeScript type checking and TSLint to vue SFC.