Razzle: Как использовать eslint с Typescript?

Я установил в своем файле razzle.config.js следующие настройки:

'use strict'

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

а затем .eslintrc.json следующим образом

{
  "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"]
      }
    }
  }
}

а затем в моем package.json следующая строка для выполнения линтинга:

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

@andersnylund Спасибо за ваш вклад. С приведенной выше конфигурацией я могу видеть ошибки машинописного текста в консоли. Но все же никаких предупреждений eslint. Я мог видеть много предупреждений о линтах, выполнив npm run lint . Было бы намного лучше, если бы я мог видеть предупреждения прямо в консоли, как в проектах cra.

Это мой текущий конфиг.

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
  }
}

Tslint устарел для ESLint где-то в 2019 году, и сейчас примерно середина ноября, поэтому razzle, вероятно, должен разработать план перехода на ESLint.

Наконец, мне удалось получить как ошибки Typescript, так и предупреждения ESLint на консоли, используя конфигурацию ниже.

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',
    })
 }
}

И у меня есть файл .eslintrc в корне проекта с парсером машинописного текста

@ fifn2 @ aswin-s Проблема в том, что плагин Fork TS Checker Webpack, используемый razzle-plugin-typescript, устарел (v0.4.1) и не поддерживает eslint. Я создал PR для обновления плагина в # 1174

Готов ли этот PR к использованию?

@Image10255 это не пиар, но у нас есть планы на этот

через пару недель мы выпустим новую версию razzle-plugin-eslint с поддержкой машинописного текста

@ nimaa77 Спасибо, я сейчас интегрирую машинописный текст, есть ли способ сначала его использовать?

@ nimaa77 какое-нибудь обновление? или как-нибудь помочь?

Это возможно. У нас есть обсуждения на github. Пожалуйста, переместите это туда :) Также новый плагин typescript будет использовать eslint.