Razzle: Bagaimana cara menggunakan eslint dengan Typecript?

Dibuat pada 12 Nov 2019 · 11Komentar · Sumber: jaredpalmer/razzle

Saya telah menambahkan razzle-eslint-plugin dan telah memasukkannya ke dalam razzle.config.js saya

plugins: ['scss', 'eslint']

Masalahnya adalah konsol tidak menampilkan peringatan lint apa pun untuk file skrip ketikan. Jika saya menjalankan eslint secara manual dari konsol, saya dapat melihat kesalahan lint, tetapi tidak saat menjalankan razzle start

Saat memeriksa razzle-eslint-plugin source saya dapat melihat bahwa aturan hanya menyebutkan file js & jsx yang akan diperiksa seperti yang ditunjukkan di bawah ini

 config.module.rules = [
    {
      test: /\.(js|jsx|mjs)$/,
      enforce: 'pre',
      loader: require.resolve('eslint-loader'),
      options: mainEslintOptions,
      exclude: /node_modules/,
    },
    ...config.module.rules,
  ]

Jika saya menambahkan ts|tsx ke konfigurasi di atas, saya dapat segera melihat peringatannya. Tetapi itu membutuhkan pengeditan file secara manual unde node_modules yang ingin saya hindari. Apakah ada cara untuk memperpanjang konfigurasi dari razzle.config.js? Saya mencoba mendorong aturan baru melalui module.rules.push tetapi menghasilkan kesalahan These relative modules were not found:

Jika ini perlu ditambahkan ke razzle-eslint-plugin saya bisa mengumpulkan PR. Mohon saran

question stale

Sumber

aswin-s

Komentar yang paling membantu

Tslint sudah tidak digunakan lagi untuk ESLint sekitar tahun 2019, dan ini agak pertengahan November, jadi mungkin harus membuat rencana untuk beralih ke ESLint.

fifn2 pada 17 Nov 2019

👍9

Semua 11 komentar

Saya telah menetapkan dalam file razzle.config.js pengaturan berikut:

'use strict'

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

dan kemudian .eslintrc.json sebagai berikut

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

dan kemudian di baris package.json , baris berikut untuk melakukan linting:

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

andersnylund pada 12 Nov 2019

👍1

@andersnylund Terima kasih atas masukan Anda. Dengan konfigurasi di atas, saya dapat melihat kesalahan skrip ketikan di konsol. Tapi tetap tidak ada peringatan eslint. Saya bisa melihat banyak peringatan lint dengan menjalankan npm run lint . Akan menjadi pengalaman yang jauh lebih baik jika saya bisa melihat peringatan di konsol seperti yang kami miliki di proyek cra

aswin-s pada 12 Nov 2019

Ini adalah konfigurasi saya saat ini.

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

aswin-s pada 12 Nov 2019

Tslint sudah tidak digunakan lagi untuk ESLint sekitar tahun 2019, dan ini agak pertengahan November, jadi mungkin harus membuat rencana untuk beralih ke ESLint.

fifn2 pada 17 Nov 2019

👍9

Akhirnya, saya berhasil mendapatkan kedua kesalahan Ketikan & peringatan ESLint di konsol menggunakan konfigurasi di bawah ini.

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

Dan saya memiliki file .eslintrc di root proyek dengan pengurai skrip

aswin-s pada 20 Nov 2019

👍1

@ fifn2 @ aswin-s Masalahnya adalah bahwa Fork TS Checker Webpack Plugin yang digunakan oleh razzle-plugin-typescript sudah lama (v0.4.1) dan tidak mendukung eslint. Saya telah membuat PR untuk memperbarui plugin di # 1174