Introduction to fork-ts-checker-webpack-plugin

The fork-ts-checker-webpack-plugin is an indispensable tool for integrating both TypeScript and ESLint in your Webpack projects. This plugin allows developers to check their TypeScript code and lint their JavaScript/TypeScript code with ESLint in a performant manner, thanks to its ability to run these checks in a separate process.

Installation

First, install the plugin via npm:

npm install fork-ts-checker-webpack-plugin --save-dev

Basic Configuration

After installation, configure the plugin in your Webpack configuration file:

  const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

  module.exports = {
    // other webpack config
    plugins: [
      new ForkTsCheckerWebpackPlugin()
    ]
  };

Configuration Options

The plugin offers numerous configuration options to tailor its behavior:

typescript

Specify TypeScript configuration:

  new ForkTsCheckerWebpackPlugin({
    typescript: {
      configFile: './tsconfig.json',
      memoryLimit: 512 // in MB
    }
  });

eslint

Enable and configure ESLint:

  new ForkTsCheckerWebpackPlugin({
    eslint: {
      files: './src/**/*.{ts,tsx,js,jsx}',
      options: {
        cache: true
      }
    }
  });

formatter

Customize formatter for TypeScript diagnostics and ESLint reports:

  new ForkTsCheckerWebpackPlugin({
    formatter: 'codeframe', // 'basic' or 'codeframe'
  });

logger

Customize logging functionality:

  new ForkTsCheckerWebpackPlugin({
    logger: {
      issues: 'console', // 'console' or custom function
    }
  });

Example Application

Below is an example application with fork-ts-checker-webpack-plugin integrated:

Project Structure

my-app/
├── node_modules/
├── src/
│   ├── index.ts
│   └── component.tsx
├── tsconfig.json
├── package.json
├── .eslintrc.js
└── webpack.config.js

webpack.config.js

  const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

  module.exports = {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js']
    },
    output: {
      filename: 'bundle.js',
      path: __dirname + '/dist'
    },
    plugins: [
      new ForkTsCheckerWebpackPlugin({
        typescript: {
          configFile: 'tsconfig.json'
        },
        eslint: {
          files: './src/**/*.{ts,tsx,js,jsx}'
        }
      })
    ]
  };

tsconfig.json

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "commonjs",
      "strict": true,
      "jsx": "react"
    }
  }

.eslintrc.js

  module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended'
    ],
    settings: {
      react: {
        version: 'detect'
      }
    },
    rules: {
      // Custom rules
    }
  };

src/index.ts

  import { greet } from './component';

  console.log(greet('World'));

src/component.tsx

  import * as React from 'react';

  export const greet = (name: string) => {
    return `Hello, ${name}`;
  };

  const Component = () => {
    return 
{greet('TypeScript')}
;
  };

  export default Component;

With this setup, you can now ensure that your TypeScript and ESLint checks run concurrently with your Webpack build process, improving developer productivity and code quality.

Hash: 08f1d3ae80a26301c739518dd1361f1ac3fb83fb260585aa769445de8cafa8ac