A Simple Approach to Type Detection for Vue.js Framework ts

wzqnanbei commented 2 months ago

Feature motivation

In the development process, I choose webpack packaging tool and vue^3.1.1 for development, in the use of fork-ts-checker-plugin plugin for ts type error detection, there is fork-ts-checker-plugin plugin can not recognize the following two types of ts type error: 1、The filename ends in .vue 2、using setup syntax in the script tag in vue

I searched for some solutions and found that vue's own tool "vue-tsc" works very well for detecting the type of ts in the vue framework.

When I researched the working principle of vue-tsc^1.8.27, I found that it rewrites the createProgram() method in the program creation process of ts. For this reason, I tried to use the rewritten createProgram() method in the fork-ts-checker-plugin plugin, and the effect has been improved. The ts type error in the above two cases can be recognised effectively.

I would like to ask the developers to consider the feasibility of using the new createProgram() method.

Other than that, I'm not satisfied with the error messages I encountered during the development process, specifically: I only want to get the error number 2322, but I can't filter the other errors, I'd like to ask the developer if he can open this configuration option in the plugin settings, thank you very much.

I really like the fork-ts-checker-plugin, if you want to know more about my idea, I can submit a pull request to express my idea, thanks again!

Translated with DeepL.com (free version)

Feature description

1、Filtering function for error types 2、An approach to vue framework support

Feature implementation

1、Add the type option to the issue of the plugin configuration 2、Replace the createProgram method in the current plugin with the createProgram method in the vue-tsc plugin

piotr-oles commented 3 weeks ago

Hi! We're open for contributions, feel free to send a PR that improves Vue support.

For the filtering, we already provide issue options.

// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      issue: {
        include: [{ code: 2322 }],
      }
    })
  ],
  // ...
};

wzqnanbei commented 3 weeks ago

thank you

Hi! We're open for contributions, feel free to send a PR that improves Vue support.

For the filtering, we already provide issueoptions.

// webpack.config.jsconstForkTsCheckerWebpackPlugin=require('fork-ts-checker-webpack-plugin');module.exports={// ...plugins: [newForkTsCheckerWebpackPlugin({issue: {include: [{code: 2322}],}})],// ...};

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>

TypeStrong / fork-ts-checker-webpack-plugin