fix import issue, update tests, update README

Author: prograhammer

README.md

@@ -104,6 +104,10 @@ should keep free 1 core for *build* and 1 core for a *system* *(for example syst
 node doesn't share memory between workers - keep in mind that memory usage will increase. Be aware that in some scenarios increasing workers
 number **can increase checking time**. Default: `ForkTsCheckerWebpackPlugin.ONE_CPU`.
 
+* **vue** `boolean`:
+If `true`, the linter and compiler will process VueJs single-file-component (.vue) files. See the 
+[Vue section](https://github.com/Realytics/fork-ts-checker-webpack-plugin#vue) further down for information on how to correctly setup your project.
+
 ### Pre-computed consts:      
   * `ForkTsCheckerWebpackPlugin.ONE_CPU` - always use one CPU
   * `ForkTsCheckerWebpackPlugin.ALL_CPUS` - always use all CPUs (will increase build time)
@@ -141,5 +145,94 @@ This plugin provides some custom webpack hooks (all are sync):
 |`fork-ts-checker-emit`| Service will add errors and warnings to webpack compilation ('build' mode) | `diagnostics`, `lints`, `elapsed` |
 |`fork-ts-checker-done`| Service finished type checking and webpack finished compilation ('watch' mode) | `diagnostics`, `lints`, `elapsed` |
 
+## Vue
+1. Turn on the vue option in the plugin in your webpack config:
+
+```
+    new ForkTsCheckerWebpackPlugin({
+      tslint: true,
+      vue: true
+    })
+```
+
+2. To activate TypeScript in your `.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): 
+
+```html
+<script lang="ts">
+import Hello from '@/components/hello.vue'
+
+// ...
+
+</script>
+```
+
+3. Ideally you are also using `ts-loader` (in transpileOnly mode). Your Webpack config rules may look something like this:  
+
+```
+{
+  test: /\.ts$/,
+  loader: 'ts-loader',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    appendTsSuffixTo: [/\.vue$/],
+    transpileOnly: true
+  }
+},
+{
+  test: /\.vue$/,
+  loader: 'vue-loader',
+  options: vueLoaderConfig
+},
+```
+4. Add rules to your `tslint.json` and they will be applied to Vue files. For example, you could apply the Standard JS rules [tslint-config-standard](https://github.com/blakeembrey/tslint-config-standard) like this:  
+
+```json
+{
+    "defaultSeverity": "error",
+    "extends": [
+      "tslint-config-standard"
+    ]
+}
+```
+5. Ensure your `tsconfig.json` includes .vue files:
+
+```
+// tsconfig.json
+{
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+      "node_modules"
+  ]
+}
+```
+
+6. The commonly used `@` path wildcard will work if you set up a `baseUrl` and `paths` (in `compilerOptions`) to include `@/*`. If you don't set this, then 
+the fallback for the `@` wildcard will be `[tsconfig directory]/src` (we hope to make this more flexible on future releases):  
+```
+// tsconfig.json
+{
+  "compilerOptions": {
+    
+    // ...
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  }
+}
+
+// In a .ts or .vue file...
+import Hello from '@/components/hello.vue'
+```
+
+7. If you are working in **VSCode**, you can get extensions [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) and [TSLint Vue](https://marketplace.visualstudio.com/items?itemName=prograhammer.tslint-vue) to complete the developer workflow.
+
 ## License
 MIT

src/VueProgram.ts

@@ -52,6 +52,10 @@ class VueProgram {
     return moduleName;
   }
 
+  public static isVue(filePath: string) {
+    return path.extname(filePath) === '.vue';
+  }
+
   static createProgram(
     programConfig: ts.ParsedCommandLine,
     basedir: string,
@@ -86,7 +90,7 @@ class VueProgram {
       let source = files.getData(filePath).source;
 
       // get typescript contents from Vue file
-      if (source && filePath.substr(-4) === '.vue') {
+      if (source && VueProgram.isVue(filePath)) {
         const parsed = vueParser.parse(source.text, 'script', { lang: ['ts', 'tsx', 'js', 'jsx'] });
         source = ts.createSourceFile(filePath, parsed, languageVersion, true);
       }
@@ -109,10 +113,20 @@ class VueProgram {
           resolvedModules.push(result.resolvedModule);
         } else {
           // For non-ts extensions.
-          resolvedModules.push({
-            resolvedFileName: VueProgram.resolveNonTsModuleName(moduleName, containingFile, basedir, programConfig.options),
-            extension: '.ts'
-          } as ts.ResolvedModuleFull);
+          const absolutePath = VueProgram.resolveNonTsModuleName(moduleName, containingFile, basedir, programConfig.options);
+
+          if (VueProgram.isVue(moduleName)) {
+            resolvedModules.push({
+              resolvedFileName: absolutePath,
+              extension: '.ts'
+            } as ts.ResolvedModuleFull);
+          } else {
+            resolvedModules.push({
+              // If the file does exist, return an empty string (because we assume user has provided a ".d.ts" file for it).
+              resolvedFileName: host.fileExists(absolutePath) ? '' : absolutePath,
+              extension: '.ts'
+            } as ts.ResolvedModuleFull);
+          }
         }
       }
 

test/integration/vue.spec.js

@@ -45,6 +45,10 @@ describe('[INTEGRATION] vue', function () {
               transpileOnly: true,
               silent: true
             }
+          },
+          {
+            test: /\.css$/,
+            loader: 'css-loader'
           }
         ]
       },

test/integration/vue/src/css.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css' {
+    const css = '';
+
+    export default css;
+}

test/integration/vue/src/example-wild.vue

@@ -7,11 +7,13 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
+import exampleCss from "./example.css";
 
 @Component
 export default class Example extends Vue {
   public msg: string = "Hello World"
   public x: string = "1";
+  public y: string = exampleCss;
 }
 </script>
 

test/integration/vue/src/example.css

@@ -0,0 +1,3 @@
+.test {
+    background-color: blue;
+}

test/integration/vue/src/example.vue

@@ -7,11 +7,13 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "vue-class-component";
+import exampleCss from "./example.css";
 
 @Component
 export default class Example extends Vue {
   public msg: string = "Hello World";
   public x: string = 1;
+  public y: string = exampleCss;
 }
 </script>
 

test/unit/VueProgram.spec.js

@@ -4,6 +4,16 @@ var expect = require('chai').expect;
 var VueProgram = require('../../lib/VueProgram');
 
 describe('[UNIT] VueProgram', function () {
+  it('should determine if file is a Vue file', function() {
+    expect(VueProgram.isVue('./test.vue')).to.be.true;
+    expect(VueProgram.isVue('../test.vue')).to.be.true;
+    expect(VueProgram.isVue('../../test.vue')).to.be.true;
+    expect(VueProgram.isVue('@/test.vue')).to.be.true;
+    expect(VueProgram.isVue('../../.vue')).to.be.false;
+    expect(VueProgram.isVue('./test.css')).to.be.false;
+    expect(VueProgram.isVue('./')).to.be.false;
+  });
+
   it('should properly resolve relative module names', function() {
     var basedir = '/base/dir';
     var containingFile = '/con/tain/ing/main.ts';