How can I get compilation error without build?

[zuoez02]

Version

3.1.1

Node and OS info

Node 8.14.0 / yarn 1.12.1 / macOS 10.14

Steps to reproduce

1. Generate a vue-typescript project.
2. Write some code having ts-error.
3. Run npm run lint and it reports nothing error.
4. Run npm run build and it said the ts-error

What is expected?

Want a way to get ts error without build.

What is actually happening?

Can't get ts-error without build

---

If I use .ts file to write vue component, it actually goes well by using tsc --noEmit -p .. But it can't in .vue file. What should I do?

I want this feature because I need to check the code whether has problem before commit.

[dousybox]

Have you try to run vue inspect --mode production

[zuoez02]

@dousybox It returns webpack config, no ts error.

[dousybox]

@zuoez02
Forgive me for bad English.
Sorry, I have no way to help you.
It seems like a runtime error, maybe you used a wrong loader for .ts, cause that vue-loader can not process the vue components.
Can you provide link to a GitHub repository that can reproduce the issue?

[zuoez02]

@dousybox My English is not good, either.

I mean the error not report by lint but by build. TS found that error and stop the build process and report it. Such as you defined a variable as string but assign it a number.

const a: string = 1;

I can only get the error by npm run build.

I will generate a GitHub repository for this later

[haoqunjiang]

Thanks for filing this issue! Could you please provide a small reporduction so we can debug this without trying to replicate this ourselves?

That would be very helpful, thanks!

[dousybox]

@zuoez02
Eslint is supported ts. You can add a lint configuration to ts syntax

[zuoez02]

@sodatea @dousybox Here is the repository

I create the project by @vue/cli 3.1.1, use typescript, tslint. Then I just edit the HelloWorld.vue, add a method hello(), write a wrong code.

Then run yarn lint report no lint errors found.

yarn run v1.10.1
$ vue-cli-service lint
No lint errors found.

✨  Done in 1.65s.

Then run yarn build report error.

yarn run v1.10.1
$ vue-cli-service build

⠙  Building for production...Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
⠦  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                                     12:55:11

 error  in /Users/zuoenzhen/workspace/github/vue-typescript-error/src/components/HelloWorld.vue

ERROR in /Users/zuoenzhen/workspace/github/vue-typescript-error/src/components/HelloWorld.vue
42:11 Type '1' is not assignable to type 'string'.
    40 |
    41 |   public hello() {
  > 42 |     const a: string = 1;
       |           ^
    43 |     return a;
    44 |   }
    45 | }

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I think it's the problem of TSlint. Or it seems that it is not a lint error. It is a type checking error. Maybe I should not use yarn lint. I want to know how to do type checking for the project without build anything.

[dousybox]

@zuoez02

I find command vue-cli-service lint is came from @vue/cli-plugin-eslint.

I searched about eslint lint the typescript, and get some bad news for.

Until now, the eslint can not check the ts type error, but tsc do.

That's the reason you can only get the error message from yarn build. because tsc is running at that time by ts-loader.

[zuoez02]

@dousybox But I'm using tslint. I don't have a eslint config in my project.

[dousybox]

tslint.json is working for TSLint, but there no TSLint module in your project.
So I guess it dosen't worked, because no script load it.

[zuoez02]

@dousybox There is TSlint in my project. @vue/cli-plugin-typescript have the dependency. Otherwise it won't report error when I run yarn build.

I'm trying to find if TSlint still support type checking. It used to support it.

[dousybox]

@zuoez02 I removed your tslint.json and run yarn build, the error message is still there.

And I changed the HelloWorld.vue to es6 module, and make some syntax error. When I run yarn lint can also get the es6 error message. Seems yarn lint is not only work in the @vue/cli-plugin-eslint.

@vue/cli-plugin-typescript also provide a vue-cli-service lint command, and it also used the tslint.json file to format the code of ts files.

So your yarn build error message maybe came from tsc at the run time.

[zuoez02]

@dousybox You are right, the error message is from tsc.

I tried to do type check in command line by tslint --project tsconfig.json --config tslint.json --type-check. It support reportting errors in ts/tsx files defined in tsconfig.json but not .vue file. I check the issues in tslint repository. There is no answer about how to lint vue file in command line without Webpack.

yarn build support alert error of type check by using ForkTsCheckerWebpackPlugin in Webpack, you can check the result of ForkTsCheckerWebpackPlugin.

new ForkTsCheckerWebpackPlugin(
      {
        vue: true,
        tslint: true,
        formatter: 'codeframe',
        checkSyntacticErrors: true
      }
    )

Is it possible to use Webpack to do type check without emit any output? I think type chec is really useful in git pre-hooks.

[dousybox]

@zuoez02 I have no experience in typescript development, but I'm interested on it.

Hope the things below might be useful for someone who can help you.

Here is the fork-ts-checker-webpack-plugin's source code.
It's start a child_process to run src/service.ts to do something.

src/service.ts is the sub process program files to load src/IncrementalChecker.ts to check the ts source file. Here is the point of how src/service.ts get the error message.

In src/IncrementalChecker.ts file, It's support two type source file: vue type and other default ts type. IncrementalCheckr explored a function named getDiagnostics, src/service.ts use it to get the error message.

getDiagnostics get the error message from getSemanticDiagnostics, it's a Typescript Compiler's Language Service API for developers.

Hope there information is useful to you.