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 에서 다음 행에 linting을 수행합니다.

"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를 사용합니다.