Razzle: टाइपस्क्रिप्ट के साथ एस्लिंट का उपयोग कैसे करें?

को निर्मित 12 नव॰ 2019 · 11टिप्पणियाँ · स्रोत: jaredpalmer/razzle

मैंने razzle-eslint-plugin जोड़ा है और इसे अपने razzle.config.js में शामिल किया है

plugins: ['scss', '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 जोड़ता हूं, तो मैं तुरंत चेतावनी देख सकता हूं। लेकिन इसके लिए मैन्युअल रूप से फ़ाइल को संपादित करना होगा node_modules unde module.rules.push माध्यम से एक नए नियम को आगे बढ़ाने की कोशिश की, लेकिन परिणाम These relative modules were not found: त्रुटि

अगर इसे razzle-eslint-plugin जोड़ने की आवश्यकता है तो मैं एक PR बढ़ा सकता हूं। कृपया सुझाव दे

question stale

स्रोत

aswin-s

सबसे उपयोगी टिप्पणी

2019 में ESLint के लिए Tslint को पदावनत किया जा रहा है, और यह नवंबर के मध्य में है, इसलिए razzle को शायद ESLint पर स्विच करने की योजना बनानी चाहिए।

fifn2 17 नव॰ 2019

👍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 12 नव॰ 2019

👍1

@andersnylund आपके इनपुट के लिए धन्यवाद। उपरोक्त कॉन्फ़िगरेशन के साथ, मैं कंसोल में टाइपस्क्रिप्ट त्रुटियों को देखने में सक्षम हूं। लेकिन फिर भी कोई चेतावनी नहीं है। मैं npm run lint चलाकर कई लिंट चेतावनी देख सकता था। यह एक बेहतर अनुभव होगा यदि मैं कंसोल में ठीक उसी तरह चेतावनी देख सकता हूं जैसे हमारे पास क्रिएक प्रोजेक्ट्स में है

aswin-s 12 नव॰ 2019

यह मेरा वर्तमान विन्यास है।

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 12 नव॰ 2019

fifn2 17 नव॰ 2019

👍9

अंत में, मैं नीचे दिए गए कॉन्फ़िगरेशन का उपयोग करके कंसोल पर टाइपस्क्रिप्ट त्रुटियों और 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 20 नव॰ 2019

👍1

@ 85n2 @ aswin-s समस्या यह है कि रेक-प्लगइन-टाइपस्क्रिप्ट द्वारा उपयोग किया जाने वाला फोर्क टीएस चेकर वेबपैक प्लगिन पुराना है (v0.4.1) और यह एस्लेंट का समर्थन नहीं करता है। मैंने # 1174 में प्लगइन को अपडेट करने के लिए एक पीआर बनाया है