Tslint: समर्थन लाइनिंग vue/html फ़ाइल

@ nrip-monotype, आप vue-loader को कॉन्फ़िगर करके Vue एकल फ़ाइल घटकों के साथ TSLint का उपयोग कर सकते हैं। उदाहरण के लिए वेबपैक 2 में मैं इसे इस तरह उपयोग कर रहा हूं ( loaders विकल्प पर एक नज़र डालें vue-loader ):

module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'tslint-loader',
                exclude: /(node_modules)/,
                options: {
                    configFile: 'tslint.json'
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true,
                    isolatedModules: true
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader'
                    }
                }
            },
        }
    }
}

@romandragan , आपका सुझाव काम करता है, लेकिन ऐसा लगता है कि no-consecutive-blank-lines साथ समस्याएं हैं। ऐसा लगता है जैसे मार्कअप तत्वों को खाली लाइनों से बदल दिया गया है, उदाहरण के लिए:

<template>
   <span class='hello'>hello world</span>
</tempalte>
<script lang="ts">
    return {};
</script>
<style>
    .hello { background-color: pink }
</style>

tslint द्वारा देखा जाता है:

    return {};

अगर मैं "no-consecutive-blank-lines": [true, 3] सेट करता हूं तो यह विफल हो जाता है, लेकिन "no-consecutive-blank-lines": [true, 4] सफल हो जाता है ... कोई विचार है कि इसके आसपास कैसे पहुंचे? (एक और प्लगइन की कमी जो अग्रणी और पिछली सफेद जगह को स्ट्रिप्स करती है ...)

@lucastheisen , मेरे लिए एक ही मुद्दा 😞 समाधान खोजने की कोशिश कर रहा है ...

@romandragan के सेटअप ने मेरे लिए काम किया, लेकिन ध्यान देने वाली बात यह है कि typeCheck tslint-loader के लिए ध्वज vue-loader में काम नहीं करता है। आप अभी भी इसे सामान्य रूप से Vue-loader के बाहर उपयोग कर सकते हैं।

>

module: {
        rules: [
            {
                enforce: 'pre',
                test: /\.ts$/,
                loader: 'tslint-loader',
                exclude: /(node_modules)/,
                options: {
                    configFile: 'tslint.json'
                }
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true,
                    isolatedModules: true,
                    typeCheck: true // This is ok.
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader' // Can't append `?typeCheck` here.
                    }
                }
            },
        }
    }
}

Vue-loader में टाइप-चेक किए गए नियमों का उपयोग करने का प्रयास इस तरह की त्रुटि उत्पन्न करता है:

ERROR in ./app.ts
(10,29): error TS2307: Cannot find module './components/sidebar.vue'.

ERROR in ./~/ts-loader!./~/tslint-loader?formatter=verbose&typeCheck!./~/vue-loader/lib/selector.js?type=script&index=0!./components/sidebar.vue
Module build failed: Error:
Invalid source file: /absolute/path/to/sidebar.vue. Ensure that the files supplied to lint have a .ts, .tsx, .js or .jsx extension.

मुझे @lucastheisen और @romandragan के समान no-consecutive-blank-lines झूठी सकारात्मक भी मिल रही है।

इस कॉन्फ़िगरेशन का उपयोग करते समय मुझे यह ERROR in Entry module not found: Error: Can't resolve 'ts-loader!tslint-loader' मिल रहा है:

            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader!tslint-loader'
                    }
                }
            },

@ARomancev , आप ts-loader और tslint-loader npm मॉड्यूल स्थापित हैं?

@romandragan , यहाँ
```
"tslint": "^5.1.0",
"टीएस-लोडर": "^2.0.3",
"वेबपैक": "^2.4.1",

And this is the webpack config:

  {
    test: /\.tsx?$/,
    enforce: 'pre',
    loader: 'tslint-loader'
  },
  {
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      appendTsSuffixTo: [/\.vue$/]
    }
  },

```
ts-loader और tslint-loader दोनों स्थापित हैं और ठीक काम करते हैं क्योंकि मुझे *.ts फाइलों से सही लिंट मिलता है।

वर्कअराउंड के रूप में हम टाइपस्क्रिप्ट लॉजिक को .vue फ़ाइल से अलग कर सकते हैं और tslint-loader को vue लोडर से हटा सकते हैं। फिर, no-consecutive-blank-lines गायब हो जाता है।

@romandragan यह काम करता है, लेकिन <script> टैग के अंदर कोड को लिंट करना अच्छा होगा: यह संपादक समर्थन के लिए आवश्यक है और tslint कमांड को अलग से चलाना बहुत आसान है, बल्कि पूरे वेबपैक के माध्यम से बहे।

@adidahiya इस सुविधा के लिए कोई योजना?
या एस्लिंट प्लगइन्स की तरह tslint में समर्थन प्लगइन सिस्टम के लिए कोई योजना?

यदि आप वेबपैक का उपयोग कर रहे हैं, तो मुझे फोर्क-टीएस-चेकर-वेबपैक-प्लगइन में .vue फाइलें काम कर रही हैं और टाइपचेकर स्तर पर कोई no-consecutive-blank-lines समस्या नहीं है। आप यहां पीआर देख सकते हैं (और एक परीक्षण शाखा से npm install और अभी इसका उपयोग करें, पीआर थ्रेड के शीर्ष देखें): https://github.com/Realytics/fork-ts-checker-webpack-plugin /पुल/77

साथ ही, यदि आप VSCode संपादक का उपयोग कर रहे हैं, तो TSLint Vue एक्सटेंशन देखें ।

मैंने एक पुल अनुरोध बनाया है जो tslint में एक प्लगइन सुविधा लागू करता है, और "vue" एकल फ़ाइल घटकों को पार्स करने में सक्षम पहला प्लगइन लिखा है।

https://github.com/palantir/tslint/pull/3596
https://github.com/Toilal/tslint-plugin-vue

यह एक प्रगति पर काम है, लेकिन कोशिश करने के लिए स्वतंत्र महसूस करें। आप npm install git+https://https://github.com/Toilal/tslint-plugin-vue साथ प्लगइन जोड़ सकते हैं और plugins: 'vue' को tslint.json जोड़कर इसे सक्षम कर सकते हैं। वर्तमान में यह -p/--project विकल्प के साथ काम नहीं करता है, आपको -c/--config विकल्प का उपयोग करना होगा।

हाय दोस्तों, एक और वैकल्पिक समाधान, अभी के लिए, फ़ाइल की शुरुआत में स्क्रिप्ट टैग को स्थानांतरित कर रहा है और इस नियम को ध्यान में न रखने के लिए अंतिम पंक्ति में /* tslint:disable:no-consecutive-blank-lines */ जोड़ें।
नीचे दी गई छवि की जाँच करें

Vue-loader वास्तव में Vue फ़ाइलों से जावास्क्रिप्ट या टाइपस्क्रिप्ट निकाल सकता है, इसलिए vue फ़ाइलों को पार्स करना वेबपैक के लिए कोई समस्या नहीं है। हालांकि, TSLint अभी भी "अमान्य स्रोत फ़ाइल" फेंकता है क्योंकि फ़ाइल नाम ".vue" के साथ समाप्त हो जाते हैं यदि टाइपचेक सक्षम है ...

इसके अलावा, हम टीएसलिंट को वीयू फाइलों की शुरुआत या अंत में लगातार रिक्त लाइनों की अनुमति देकर लगातार खाली लाइनों की शिकायत करना बंद कर सकते हैं, क्योंकि वीयू-लोडर टाइपस्क्रिप्ट के लिए अप्रासंगिक लाइनों को नहीं हटाता है, बल्कि सही लाइन नंबर बनाए रखने के बजाय उन्हें साफ करता है।

मैं वर्तमान में एक लिंटर पर काम कर रहा हूं जो वेबपैक की आवश्यकता के बिना इन समस्याओं को हल कर सकता है: https://github.com/ajafff/wotan
यह वर्तमान में अवधारणा का प्रमाण है और TSLint में एकीकृत हो भी सकता है और नहीं भी। यह खरोंच से एक पूर्ण पुनर्लेखन है और TSLint के साथ काफी असंगत है।

इसमें एक प्रोसेसर (ESLint प्रोसेसर के समान) का उपयोग करके फ़ाइलों को बदलने की क्षमता है। एक वीयू प्रोसेसर एसएफसी से टाइपस्क्रिप्ट कोड निकालता है, लिंटर केवल कोड को लिंट करता है, फिर प्रोसेसर त्रुटियों को मूल फ़ाइल में सही स्थान पर मैप करता है। यह टाइप चेकिंग के साथ भी काम करता है।
आप यहाँ एक Vue फ़ाइल को लाइन करने का एक नमूना आउटपुट देख सकते हैं:
https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

यह स्वचालित फिक्सिंग की भी अनुमति देता है। ऊपर के रूप में एक ही फ़ाइल स्वचालित रूप से तय: https://github.com/ajafff/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue#L28

एक बार जब मैंने https://github.com/ajafff/wotan/issues/32 तय कर लिया तो मैं एक रिलीज प्रकाशित करूंगा ताकि आप इसे अपने वास्तविक विश्व कोड पर आजमा सकें।
ध्यान दें कि Vue प्रोसेसर मुख्य प्रोजेक्ट का हिस्सा नहीं है, लेकिन मैं यह सुनिश्चित करूंगा कि मैं प्रोसेसर के लिए एक अलग पैकेज प्रकाशित करूं।

क्या किसी को पता है कि मैं tsconfig.json कैसे सेट करूंगा ताकि कमांड-लाइन tslint मेरी Vue फाइलों के TS हिस्से को लिंट कर सके? यह वीएस कोड में ठीक काम करता है, लेकिन मैं चाहता हूं कि कमांड लाइन भी काम करे।

मैंने जितना सोचा था उससे थोड़ा अधिक समय लिया, लेकिन यहाँ यह है: https://www.npmjs.com/package/@fimbul/wotan

आप TSLint नियमों को निष्पादित करने के लिए लिंटर रनटाइम ( @fimbul/wotan ) का भी उपयोग कर सकते हैं। आपको केवल @fimbul/heimdall , देखें https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

Vue फ़ाइलों को लिंट करने के लिए, @fimbul/ve (कोई टाइपो नहीं, 've' में कोई 'u' नहीं है): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

क्या कोई शेड्यूल है जब tslint linting vue/html फ़ाइल का समर्थन करेगा? @Toilal

इसे लागू करना समुदाय पर निर्भर है, लेकिन VueJS लेखक Vue-cli (वर्तमान में अल्फा में) के अंतिम संस्करण के बजाय ESLint टाइपस्क्रिप्ट प्लगइन्स के पक्ष में जाता है।

ऐसा लगता है कि यह सुविधा पहले से ही [email protected] । Daud:

$ npm install -g @vue/cli
$ vue create project-name

और लिंटर के रूप में TSLint का उपयोग करने का विकल्प होगा।

मैं इस सूत्र पर सभी के लिए और भी बड़ी ख़बरों के साथ वापस आया हूँ:

वॉटन का नवीनतम संस्करण आपके tslint.json अनुसार TSLint नियमों को निष्पादित कर सकता है और प्रोसेसर के लिए समर्थन जोड़ता है। इसका मतलब है कि आपको अपना कॉन्फिगर बदलने की जरूरत नहीं है और अब आप अपनी Vue फाइलों को लाइन करना शुरू कर सकते हैं:

1. इंस्टॉल
   sh yarn add -D @fimbul/wotan @fimbul/ve @fimbul/valtyr # or npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
2. कॉन्फ़िगर
   अपनी परियोजना की मूल निर्देशिका में एक नई फ़ाइल .fimbullinter.yaml जोड़ें और निम्नलिखित सामग्री जोड़ें:
   yaml modules: "@fimbul/valtyr" valtyr: overrides: - files: "*.vue" processor: "@fimbul/ve"
3. Daud
   नीचे दिए गए उदाहरण देखें और अपने स्वयं के उपयोग के लिए अनुकूलित करें। उपलब्ध सीएलआई तर्कों के बारे में अधिक जानकारी के लिए दस्तावेज़ पढ़ें।
   sh wotan # finds tsconfig.json and lints the whole project with type information according to your tslint.json wotan 'src/**/*.vue' -f verbose # lint all Vue files, use TSLint's verbose formatter wotan -p tsconfig.json -c tslint.json --fix # lint the whole project with tslint.json and fix failures
4. आगे की पढाई
   वोटन - सीएलआई और कॉन्फ़िगरेशन: https://github.com/fimbullinter/wotan/tree/master/packages/wotan#readme
   Valtýr - TSLint नियमों और स्वरूपकों के लिए प्लगइन - "TSLint रनटाइम जो TSLint से बेहतर है": https://github.com/fimbullinter/wotan/tree/master/packages/valtyr#readme
   Vé - Vue एकल फ़ाइल घटकों के लिए प्रोसेसर: https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme
   Fimbullinter - आपको अभी इस परियोजना का उपयोग क्यों शुरू करना चाहिए: https://github.com/fimbullinter/wotan#readme
5. लाइक, शेयर और सबस्क्राइब :स्टार:

@romandragan

आप Vue-loader को कॉन्फ़िगर करके TSLint का उपयोग Vue एकल फ़ाइल घटकों के साथ कर सकते हैं।

समाधान के लिए धन्यवाद। लेकिन यह सिर्फ एक वेबपैक विशिष्ट समाधान है। यह बहुत अच्छा है, तो वहाँ एक सामान्य समाधान है कि के साथ संकलित फ़ाइलें निर्माण उपकरण ताकि हम Vue tslint सकता है पर निर्भर नहीं है था होगा fusebox (या किसी अन्य निर्माण उपकरण)।

वेबपैक के लिए एक और समाधान।

मैंने एक साधारण लोडर बनाया है जो vue-loader द्वारा प्रदान की गई "फ़ाइल" से सभी सफेद जगहों को ट्रिम करता है और फिर एक लिंटर के लिए सफेद स्थान जोड़ता है।

webpack.config.js:

test:/\.vue$/, loader: 'vue-loader', options: { loaders: { 'ts': [ 'vue-ts-loader', 'tslint-loader', path.resolve('./path/to/remove-whitespace-ts-loader.js') ],....

और फिर निकालें-व्हाट्सएप-टीएस-लोडर:
/* MIT License http://www.opensource.org/licenses/mit-license.php Author Szymon Sasin */ module.exports = function(source) { let result = source.replace(/^\s+|\s+$/g, '') result += '\r\n' return result; }
_कोड स्वरूपण में सुधार करने के लिए कोई मदद का स्वागत किया_

यह ठीक काम करता है और स्रोतों को संशोधित नहीं करने की अनुमति देता है, धन्यवाद

वैसे ही मैं एक ही पृष्ठ पर हूं, क्या यह तब तक तय नहीं होगा जब तक इसे पीआर के रूप में नहीं किया जाता है?

इसके अलावा no-consecutive-blank-lines इस सेटअप में काम नहीं कर रहा है (जो एक कस्टम लोडर के साथ काम करने योग्य होना चाहिए), मैं सिर्फ यह नोट कर रहा हूं कि हाल के वेबपैक और वीयू-लोडर संस्करणों के साथ भी, मुझे typeCheck: true नहीं मिल सकता है *.vue फाइलों के लिए काम कर रहा है क्योंकि tslint एक्सटेंशन से नाखुश है (यहां तक ​​​​कि appendTsSuffixTo )। यह डेमो प्रोजेक्ट खेलने के लिए एक सरल उदाहरण देता है।

निशान

यहां कुछ और खबरें? मैं

अगर कोई आपकी .vue फ़ाइल को लिंट करने के लिए cli का उपयोग करना चाहता है, तो आप vue-tslint आज़मा सकते हैं । यह सही नहीं है, लेकिन यह काम करता है ...

ध्यान दें कि @romandragan का समाधान अब सर्वोत्तम अभ्यास नहीं है (सुनिश्चित नहीं है कि यह पहले ऐसा था)। इसके बजाय, tslint-loader को अपने use में \.ts$ नियमों में जोड़ें जैसे आप सामान्य टाइपस्क्रिप्ट फ़ाइलों के लिए करते हैं; यह अब vue-loader सामान्य रूप से टेम्प्लेट फ़ाइलों को संभालता है, उन संबंधित एक्सटेंशन के लिए आपके वेबपैक कॉन्फ़िगरेशन के विभिन्न अनुभागों को सौंपता है। के प्लगइन घटक vue-loader के लिए नियमों को निकाल देंगे \.ts$ और स्ट्रीम <script lang="ts"> इन नियमों के माध्यम से ब्लॉक।

Vue CLI का उपयोग करने वालों के लिए, जोड़ें

config.module.rule('ts')
  .use('tslint-loader')
  .loader('tslint-loader');

आपके chainWebpack विकल्प में आपके vue.config.js । उदाहरण के लिए,

vue.config.js

module.exports = {
  chainWebpack: (config) => {
    config.devtool('source-map');
    config.module.rule('ts')
      .use('tslint-loader')
      .loader('tslint-loader');
  },
  pluginOptions: {
    apollo: {
      enableMocks: true,
      enableEngine: true
    }
  }
}

यह मेरे लिए काम किया

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

  defaultConfig.module.rules.push( {
    test: /\.ts$/,
    exclude: /(node_modules)/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
          // transpileOnly: true,
        }
      },
      {
        loader: 'tslint-loader',
        options: {
          configFile: 'tslint.json',
          emitErrors: true,
        }
      }
    ]
  })

  defaultConfig.module.rules.push({ test: /\.less$/, loaders: [ 'style-loader', 'css-loader', 'less-loader' ] })
  defaultConfig.module.rules.push({ test: /\.scss$/, loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] })
  defaultConfig.module.rules.push({ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' })

  defaultConfig.plugins.push(new ForkTsCheckerWebpackPlugin())

  return defaultConfig
}

प्रति #4379, एक Vue-विशिष्ट समाधान TSLint कोर में उतरने में सक्षम नहीं होगा:

यहां चर्चा या ठोस प्रस्ताव की कमी और ESLint (#4534) के पक्ष में TSLint के आगामी बहिष्करण को देखते हुए, मैं आगे जाकर इस मुद्दे को बंद करने जा रहा हूं और हाउसकीपिंग उद्देश्यों के लिए संबंधित Vue-विशिष्ट रिपोर्ट।

यदि यह अभी भी आपके लिए typescript-eslint में एक समस्या है, तो मैं वहां एक समस्या दर्ज करने की अनुशंसा करता हूं। शुभकामनाएं!

./node_modules/.bin/wotan 'src/ */ .vue' -f वर्बोज़

इसके साथ क्रैश:

Error: ENOENT: no such file or directory, open '/home/andrew/PycharmProjects/djangochat/fe/src/components/App.vue.ts'
    at Object.openSync (fs.js:451:3)
    at detectEncoding (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:67:17)
    at walk (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:49:20)
    at Rule.AbstractRule.applyWithFunction (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/language/rule/abstractRule.js:39:9)
    at Rule.apply (/home/andrew/PycharmProjects/djangochat/fe/node_modules/tslint/lib/rules/encodingRule.js:33:21)
    at R.apply (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/bifrost/src/index.js:30:40)
    at Linter.applyRules (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/linter.js:209:31)
    at Linter.getFindings (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/linter.js:125:25)
    at Runner.lintFiles (/home/andrew/PycharmProjects/djangochat/fe/node_modules/@fimbul/wotan/src/runner.js:159:43)
    at lintFiles.next (<anonymous>) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/home/andrew/PycharmProjects/djangochat/fe/src/components/App.vue.ts'
}

@akoidan कृपया इस तरह के मुद्दों को वॉटन प्रोजेक्ट के साथ लाएं, न कि tslint