Razzle: ¿Cómo usar eslint con Typescript?

Creado en 12 nov. 2019 · 11Comentarios · Fuente: jaredpalmer/razzle

He añadido razzle-eslint-plugin y lo he incluido en mi razzle.config.js como

plugins: ['scss', 'eslint']

El problema es que la consola no muestra ninguna advertencia de pelusa para los archivos mecanografiados. Si ejecuto eslint manualmente desde la consola, podría ver los errores de lint, pero no mientras ejecuto razzle start

Al verificar razzle-eslint-plugin source, pude ver que las reglas mencionan solo los archivos js y jsx que se deben verificar como se muestra a continuación

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

Si agrego ts|tsx a la configuración anterior, podría ver las advertencias de inmediato. Pero requiere editar manualmente el archivo unde node_modules que me gustaría evitar. ¿Hay alguna manera de extender la configuración de razzle.config.js? Intenté presionar una nueva regla a través de module.rules.push pero resultó en un error These relative modules were not found:

Si esto necesita agregarse a razzle-eslint-plugin , podría aumentar un PR. Por favor recomiende

question stale

Fuente

aswin-s

Comentario más útil

Tslint dejará de estar disponible para ESLint en algún momento de 2019, y es a mediados de noviembre, por lo que Razzle probablemente debería crear un plan para cambiar a ESLint.

fifn2 en 17 nov. 2019

👍9

Todos 11 comentarios

He configurado en mi archivo razzle.config.js la siguiente configuración:

'use strict'

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

y luego .eslintrc.json siguiente manera

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

y luego en mi package.json la siguiente fila para realizar el linting:

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

andersnylund en 12 nov. 2019

👍1

@andersnylund Gracias por tu aporte. Con la configuración anterior, puedo ver errores mecanografiados en la consola. Pero todavía no hay advertencias eslint. Pude ver muchas advertencias de pelusa al ejecutar npm run lint . Sería una experiencia mucho mejor si pudiera ver las advertencias allí mismo en la consola, como las tenemos en los proyectos de cra.

aswin-s en 12 nov. 2019

Esta es mi configuración actual.

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 en 12 nov. 2019

Tslint dejará de estar disponible para ESLint en algún momento de 2019, y es a mediados de noviembre, por lo que Razzle probablemente debería crear un plan para cambiar a ESLint.

fifn2 en 17 nov. 2019

👍9

Finalmente, logré obtener errores de Typecript y advertencias de ESLint en la consola usando la siguiente configuración.

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

Y tengo mi archivo .eslintrc en la raíz del proyecto con el analizador mecanografiado

aswin-s en 20 nov. 2019

👍1

@ Fifn2 @ aswin-s El problema es que el plugin Fork TS Checker Webpack que usa razzle-plugin-typescript es antiguo (v0.4.1) y no es compatible con eslint. Creé un PR para actualizar el complemento en # 1174