Razzle: Wie verwende ich eslint mit Typescript?

Ich habe in meiner razzle.config.js -Datei die folgenden Einstellungen vorgenommen:

'use strict'

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

und dann .eslintrc.json wie folgt

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

und dann in meinem package.json die folgende Zeile, um das Flusen durchzuführen:

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

@andersnylund Danke für deine Eingabe. Mit der obigen Konfiguration kann ich Typoskriptfehler in der Konsole sehen. Aber immer noch keine Eslint-Warnungen. Ich konnte viele Flusenwarnungen sehen, indem ich npm run lint . Es wäre eine viel bessere Erfahrung, wenn ich die Warnungen genau dort in der Konsole sehen könnte, wie wir sie in Cra-Projekten haben

Dies ist meine aktuelle Konfiguration.

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 wird irgendwann im Jahr 2019 für ESLint veraltet sein, und es ist Mitte November, daher sollte Razzle wahrscheinlich einen Plan für den Wechsel zu ESLint erstellen.

Schließlich gelang es mir, mit der folgenden Konfiguration sowohl Typescript-Fehler als auch ESLint-Warnungen auf der Konsole abzurufen.

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

Und ich habe meine .eslintrc -Datei im Projektstamm mit Typoskript-Parser

@ fifn2 @ aswin-s Das Problem ist, dass das vom razzle-plugin-typescript verwendete Fork TS Checker-Webpack-Plugin alt ist (v0.4.1) und eslint nicht unterstützt. Ich habe eine PR erstellt, um das Plugin in # 1174 zu aktualisieren

Ist diese PR einsatzbereit?

@ Imagine10255 Dies ist keine PR, aber wir haben Pläne dafür

Wir werden in ein paar Wochen eine neue Version von razzle-plugin-eslint mit Unterstützung von Typoskript veröffentlichen

@ nimaa77 Danke, ich integriere derzeit Typoskript.

@ nimaa77 irgendein Update? oder eine Möglichkeit zu helfen?

Das ist möglich. Wir haben jetzt Github-Diskussionen aktiviert. Bitte verschieben Sie dies dorthin :) Auch das neue Typoskript-Plugin wird eslint verwenden.