Razzle: كيفية استخدام eslint مع تنضيد؟

تم إنشاؤها على ١٢ نوفمبر ٢٠١٩ · 11تعليقات · مصدر: jaredpalmer/razzle

لقد أضفت المكون الإضافي razzle-eslint وضمنته في razzle.config.js مثل

plugins: ['scss', 'eslint']

المشكلة هي أن وحدة التحكم لا تعرض أي تحذيرات من النسالة لملفات الكتابة المطبوعة. إذا قمت بتشغيل eslint يدويًا من وحدة التحكم ، فقد أرى أخطاء Lint ، ولكن ليس أثناء تشغيل razzle start

عند التحقق من razzle-eslint-plugin source وجدت أن القواعد تذكر فقط ملفات 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 لـ ESLint في وقت ما في عام 2019 ، وهو نوع من منتصف نوفمبر ، لذا من المحتمل أن تضع Razzle خطة للتبديل إلى ESLint.

fifn2 في ١٧ نوفمبر ٢٠١٩

👍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 الخاص بي لإجراء الفحص:

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

andersnylund في ١٢ نوفمبر ٢٠١٩

👍1

andersnylund شكرا npm run lint . ستكون تجربة أفضل بكثير إذا كان بإمكاني رؤية التحذيرات هناك في وحدة التحكم كما لدينا في مشاريع cra

aswin-s في ١٢ نوفمبر ٢٠١٩

هذا هو التكوين الحالي الخاص بي.

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 في ١٢ نوفمبر ٢٠١٩

fifn2 في ١٧ نوفمبر ٢٠١٩

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

ولدي ملف .eslintrc في جذر المشروع باستخدام المحلل اللغوي المطبوع

aswin-s في ٢٠ نوفمبر ٢٠١٩

👍1

@ fifn2 @ aswin-s تكمن المشكلة في أن Fork TS Checker Webpack Plugin الذي يستخدمه البرنامج الإضافي razzle-plugin-typecript قديم (v0.4.1) ولا يدعم eslint. لقد قمت بإنشاء PR لتحديث المكون الإضافي في # 1174