How to use eslint with Typescript?

[aswin-s]

I've added razzle-eslint-plugin and have included it in my razzle.config.js like

plugins: ['scss', 'eslint']

The issue is that the console doesn't display any lint warnings for typescript files. If I manually run eslint from console I could see the lint errors, but not while running razzle start

On checking razzle-eslint-plugin source I could see that the rules mention only js & jsx files to be checked as shown below

 config.module.rules = [
    {
      test: /\.(js|jsx|mjs)$/,
      enforce: 'pre',
      loader: require.resolve('eslint-loader'),
      options: mainEslintOptions,
      exclude: /node_modules/,
    },
    ...config.module.rules,
  ]

If I add ts|tsx to the above config, I could promptly see the warnings. But it requires manually editing the file unde node_modules which I would like to avoid. Is there a way I could extend the config from razzle.config.js? I tried pushing a new rule through module.rules.push but results in an error These relative modules were not found:

If this needs to be added to razzle-eslint-plugin I could raise a PR. Please suggest

[andersnylund]

I have set in my razzle.config.js file the following settings:

'use strict'

module.exports = {
  plugins: [
    {
      name: 'typescript',
      options: {
        useBabel: true,
        useEslint: true,
        forkTsChecker: {
          tsconfig: './tsconfig.json',
          tslint: undefined,
          watch: './src',
          typeCheck: true
        }
      }
    }
  ]
}

and then .eslintrc.json as follows

{
  "extends": [
    "eslint:recommended",
    "prettier",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true,
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

and then in my package.json the following row to perform linting:

"lint": "eslint --ext 'js,jsx,ts,tsx' .",

[aswin-s]

@andersnylund Thanks for your input. With the above configuration, I'm able to see typescript errors in the console. But still no eslint warnings. I could see many lint warnings by running npm run lint. It would be a much better experience if I could see the warnings right there in the console like we have in cra projects

[aswin-s]

This is my current config.

const path = require('path')
module.exports = {
  plugins: ['scss', 'eslint'],
  modify(defaultConfig, { target, dev }, webpack) {
    const config = defaultConfig
    config.resolve.extensions.push('.ts', '.tsx')
    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    })

    if (target === 'node' && !dev) {
      config.entry = path.resolve(__dirname, './src/server.tsx')
      config.output.filename = 'server.bundle.js'
      config.output.path = path.resolve(__dirname, './build')
      config.output.libraryTarget = 'commonjs2'
    }
    return config
  }
}

[fifn2]

Tslint is being deprecated for ESLint sometime in 2019, and it's kind of mid November, so razzle should probably create a plan to switch to ESLint.

[aswin-s]

Finally, I managed to get both Typescript errors & ESLint warnings on the console using the below config.

const ForkTSCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const path = require('path')

module.exports = {
  modify(defaultConfig, { target, dev }, webpack) {
    const config = defaultConfig
    config.resolve.extensions.push('.ts', '.tsx')
    config.plugins.push(
        new ForkTSCheckerWebpackPlugin({
          checkSyntacticErrors: true,
          eslint: true,
        }))
    config.module.rules.push({
      test: /\.(ts|js)x?$/,
      include: [path.resolve(__dirname, 'src')],
      loader: 'babel-loader',
    })
 }
}

And I have my .eslintrc file at project root with typescript parser

[aygee]

@fifn2 @aswin-s The problem is that Fork TS Checker Webpack Plugin used by the razzle-plugin-typescript is old (v0.4.1) and doesn't support eslint. I've created a PR to update the plugin in #1174

[imagine10255]

Is this PR ready to use?

[nimaa77]

@imagine10255 this is not a PR, but we have plans for this

we will release new version of razzle-plugin-eslint with support of typescript in a couple of weeks

[imagine10255]

@nimaa77 Thanks, I am currently integrating typescript, is there any way to use it first?

[tmcdonnell87]

@nimaa77 any update? or any way to help?

[fivethreeo]

This is possible. We have github discussions enabled now. Please move this there :) Also new typescript plugin will use eslint.