Razzle: Como usar o eslint com Typescript?

Criado em 12 nov. 2019 · 11Comentários · Fonte: jaredpalmer/razzle

Eu adicionei razzle-eslint-plugin e o incluí em meu razzle.config.js como

plugins: ['scss', 'eslint']

O problema é que o console não exibe nenhum aviso de lint para arquivos typescript. Se eu executar manualmente o eslint no console, poderei ver os erros do lint, mas não durante a execução de razzle start

Ao verificar a fonte razzle-eslint-plugin , pude ver que as regras mencionam apenas os arquivos js e jsx a serem verificados, conforme mostrado abaixo

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

Se eu adicionar ts|tsx à configuração acima, poderei ver imediatamente os avisos. Mas requer a edição manual do arquivo unde node_modules que eu gostaria de evitar. Existe uma maneira de estender a configuração de razzle.config.js? Tentei aplicar uma nova regra em module.rules.push mas resultou em um erro These relative modules were not found:

Se isso precisar ser adicionado a razzle-eslint-plugin eu poderia levantar um PR. Por favor sugira

question stale

Fonte

aswin-s

Comentários muito úteis

Tslint está sendo descontinuado para ESLint em 2019 e é meio de novembro, então a Razzle provavelmente deve criar um plano para mudar para ESLint.

fifn2 em 17 nov. 2019

👍9

Todos 11 comentários

Eu defini em meu arquivo razzle.config.js as seguintes configurações:

'use strict'

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

e então .eslintrc.json seguinte maneira

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

e então na minha package.json a seguinte linha para executar o linting:

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

andersnylund em 12 nov. 2019

👍1

@andersnylund Obrigado por sua contribuição. Com a configuração acima, posso ver erros de digitação no console. Mas ainda nenhum aviso eslint. Eu poderia ver muitos avisos de lint executando npm run lint . Seria uma experiência muito melhor se eu pudesse ver os avisos bem ali no console como temos nos projetos do cra

aswin-s em 12 nov. 2019

Esta é minha configuração atual.

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

Tslint está sendo descontinuado para ESLint em 2019 e é meio de novembro, então a Razzle provavelmente deve criar um plano para mudar para ESLint.

fifn2 em 17 nov. 2019

👍9

Por fim, consegui obter erros de tipo de letra e avisos de ESLint no console usando a configuração abaixo.

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

E eu tenho meu arquivo .eslintrc na raiz do projeto com analisador de texto digitado

aswin-s em 20 nov. 2019

👍1

@ fifn2 @ aswin-s O problema é que o plugin Fork TS Checker Webpack usado pelo razzle-plugin-typescript é antigo (v0.4.1) e não suporta eslint. Eu criei um PR para atualizar o plugin em # 1174