Razzle: Comment utiliser eslint avec Typescript?

J'ai défini dans mon fichier razzle.config.js les paramètres suivants:

'use strict'

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

puis .eslintrc.json comme suit

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

puis dans mon package.json la ligne suivante pour effectuer le peluchage:

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

@andersnylund Merci pour votre contribution. Avec la configuration ci-dessus, je suis en mesure de voir les erreurs dactylographiées dans la console. Mais toujours pas d'avertissements eslint. J'ai pu voir de nombreux avertissements de charpie en exécutant npm run lint . Ce serait une bien meilleure expérience si je pouvais voir les avertissements juste là dans la console comme nous en avons dans les projets de cra

Ceci est ma configuration actuelle.

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 est obsolète pour ESLint dans le courant de 2019, et c'est un peu mi-novembre, donc razzle devrait probablement créer un plan pour passer à ESLint.

Enfin, j'ai réussi à obtenir à la fois les erreurs Typescript et les avertissements ESLint sur la console en utilisant la configuration ci-dessous.

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

Et j'ai mon fichier .eslintrc à la racine du projet avec un analyseur typographique

@ fifn2 @ aswin-s Le problème est que le plug-in Fork TS Checker Webpack utilisé par le razzle-plugin-typescript est ancien (v0.4.1) et ne prend pas en charge eslint. J'ai créé un PR pour mettre à jour le plugin # 1174

Ce PR est-il prêt à être utilisé?

@ imagine10255 ce n'est pas un PR, mais nous avons des plans pour cela

nous publierons une nouvelle version de razzle-plugin-eslint avec prise en charge du typographie dans quelques semaines

@ nimaa77 Merci,

@ nimaa77 une mise à jour? ou une façon d'aider?

C'est possible. Nous avons maintenant les discussions github activées. Veuillez déplacer ceci ici :) De plus, un nouveau plugin typographique utilisera eslint.