Razzle: Typescriptでeslintを使用する方法は？

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ごnpm run lint実行すると、多くの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は2019年のいつかESLintで非推奨になり、11月中旬のようなものなので、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',
    })
 }
}

そして、typescriptパーサーを使用してプロジェクトルートに.eslintrcファイルがあります

@ fifn2 @ aswin-s問題は、razzle-plugin-typescriptで使用されるFork TS Checker Webpackプラグインが古く（v0.4.1）、eslintをサポートしていないことです。 ＃1174でプラグインを更新するためのPRを作成しました

このPRは使用する準備ができていますか？

@ imagine10255これはPRではありませんが、これについては計画があります

数週間以内にtypescriptをサポートする新しいバージョンのrazzle-plugin-eslintをリリースします

@ nimaa77ありがとう、私は現在typescriptを統合していますが、最初にそれを使用する方法はありますか？

@ nimaa77更新はありますか？ または助ける方法はありますか？

これは可能です。 現在、githubディスカッションが有効になっています。 これをそこに移動してください:)また、新しいtypescriptプラグインはeslintを使用します。