Razzle: 如何在Typescript中使用eslint？

创建于 2019-11-12 · 11评论 · 资料来源: jaredpalmer/razzle

我添加了razzle-eslint-plugin并将其包含在我的razzle.config.js中，例如

plugins: ['scss', 'eslint']

问题是控制台不会为打字稿文件显示任何棉绒警告。如果我从控制台手动运行eslint，则可以看到棉绒错误，但在运行razzle start看不到

在检查razzle-eslint-plugin源时，我可以看到规则仅提及要检查的js和jsx文件，如下所示

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

如果将ts|tsx到上述配置中，我会立即看到警告。但这需要手动编辑文件unde node_modules ，我想避免这种情况。有没有办法可以从razzle.config.js扩展配置？我尝试通过module.rules.push推送新规则，但导致错误These relative modules were not found:

如果需要将此添加到razzle-eslint-plugin我可以提高PR。请建议

question stale

资料来源

aswin-s

最有用的评论

Tslint在2019年的某个时候不推荐使用ESLint，现在大约是11月中旬，因此可能应该制定一个计划改用ESLint。

fifn2 于 2019-11-17

👍9

所有11条评论

我在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 于 2019-11-12

👍1

@andersnylund感谢您的输入。通过以上配置，我可以在控制台中看到打字稿错误。但是仍然没有护送警告。我可以通过运行npm run lint看到很多棉绒警告。如果我能像在cra项目中一样在控制台中看到警告，那将是一个更好的体验。

aswin-s 于 2019-11-12

这是我当前的配置。

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 于 2019-11-12

Tslint在2019年的某个时候不推荐使用ESLint，现在大约是11月中旬，因此可能应该制定一个计划改用ESLint。

fifn2 于 2019-11-17

👍9

最后，我使用以下配置在控制台上同时收到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',
    })
 }
}

我在Type解析器的项目根目录下有.eslintrc文件

aswin-s 于 2019-11-20

👍1

@ fifn2 @ aswin-s问题是razzle-plugin-typescript使用的Fork TS Checker Webpack插件较旧（v0.4.1），不支持eslint。我创建了一个PR以更新＃1174中的插件