fuse-box / fuse-box-typechecker

MIT License
31 stars 8 forks source link

Typechecker doesn't work with Vue.js single file components. #44

Open wujekbogdan opened 6 years ago

wujekbogdan commented 6 years ago

I've set up typechecker, it works fine, but only with *.ts files. It doesn't work with *.vue Single file components at all.

I've added the following lines to my tslint.json file But it didn't change anything:

  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ]

It seems that tslint is not able to parse the JS code that's wrapped in <script lang="ts"> tags. Is there any workaround? I know that in Webpack they use some trick to pass the content of the script tag into typescript loader. But it's a Webpack specific solution, so I'm afraid that here we have to use a different approach.

I'm not sure is it a bug or is it just a missing feature... and is it an issue related to the fuse-box-typechecker or is something to be implemented directly in the VueComponentPlugin?


Here's my repository, so that you could reproduce: https://github.com/wujekbogdan/fuse-vue-ts/tree/typechecker

vegarringdal commented 6 years ago

Typechecker is not using fusebox, just the tslint.json/tsconfig settings and can be used as a own simple typescript transpiler like I do here. https://github.com/vegarringdal/node-typescript-skeleton https://github.com/vegarringdal/node-typescript-skeleton/blob/master/build.js

For it to be able to support vue.js then tslint/typescript needs to be able to support it.

Been trying to look into it and found this: https://github.com/vuejs/vetur/issues/673

If this plugin structure is coming and its just to add as part of the tsconfig.json then it might be possible (if anyone creates a plugin..)

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "sourceMap": true,
    "inlineSources": true,
    "importHelpers": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "plugins": [
      {
        "name": "typescript-vue-plugin"
      }
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ]
}

But Im not a vue.js user, if you find out more about this plugin structure then please add it as information here