Tslint: دعم ملف linting vue / html

@ nrip-monotype ، يمكنك استخدام TSLint مع مكونات الملف الفردي Vue عن طريق تكوين vue-loader . على سبيل المثال في حزمة الويب 2 التي أستخدمها بهذا الشكل (

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 ، نفس المشكلة بالنسبة لي 😞 أحاول إيجاد حل ...

نجح إعداد typeCheck لـ tslint-loader لا تعمل في vue-loader. لا يزال بإمكانك استخدامه بشكل طبيعي خارج محمل vue.

>

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 ينتج عنه خطأ مثل هذا:

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.

أحصل أيضًا على نفس القيمة الإيجابية الزائفة no-consecutive-blank-lines مثل lucastheisen وromandragan.

أحصل على هذا 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 ، ما هو إصدار webpack الذي تستخدمه؟ هل تم تثبيت الوحدات النمطية ts-loader و tslint-loader npm؟

romandragan ، هنا هو تكوين npm im باستخدام:
""
"tslint": "^ 5.1.0"،
"محمل ts": "^ 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.

كحل بديل ، يمكننا فصل منطق TypeScript عن ملف .vue وإزالة tslint-loader من محمل vue. ثم يختفي no-consecutive-blank-lines .

يعمل هذا romandragan ، ولكن سيكون من الجيد <script> أيضًا: هذا مطلوب لدعم المحرر ومن الأسهل بكثير تشغيل الأمر tslint بشكل منفصل ، بدلاً من ذلك عبر حزمة الويب بالكامل تدفق.

adidahiya أي خطة لهذه الميزة؟
أو أي خطة لدعم البرنامج المساعد في tslint مثل ملحقات eslint؟

إذا كنت تستخدم Webpack ، فلدي ملفات .vue تعمل وتتفحص على مستوى مدقق الكتابة بدون مشكلة no-consecutive-blank-lines في fork-ts-checker-webpack-plugin . يمكنك رؤية العلاقات العامة هنا (و 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 استخراج JavaScript أو TypeScript من ملفات vue ، لذا فإن تحليل ملفات vue لا يمثل مشكلة لحزمة الويب. ومع ذلك ، لا يزال TSLint يلقي "ملف مصدر غير صالح" لأن أسماء الملفات تنتهي بـ ".vue" إذا تم تمكين typeCheck ...

بالإضافة إلى ذلك ، يمكننا أن نجعل TSLint يتوقف عن الشكوى من الأسطر الفارغة المتتالية من خلال السماح بأسطر فارغة متتالية في بداية أو نهاية ملفات vue ، لأن محمل vue لا يحذف الأسطر غير ذات الصلة بـ TypeScript ولكن يمسحها بدلاً من ذلك للحفاظ على أرقام الأسطر الصحيحة.

أنا أعمل حاليًا على لينتر يمكنه حل هذه المشكلات دون الحاجة إلى حزمة الويب: https://github.com/ajafff/wotan
يعد هذا حاليًا دليلًا على المفهوم وقد يتم دمجه أو لا يتم دمجه في TSLint. إنها إعادة كتابة كاملة من الصفر وتتعارض إلى حد كبير مع TSLint.

لديه القدرة على تحويل الملفات باستخدام معالج (على غرار معالجات ESLint). يقوم معالج vue باستخراج رمز TypeScript من SFC ، ويقوم linter فقط بفحص الكود ، ثم يقوم المعالج بتعيين الأخطاء إلى الموقع الصحيح في الملف الأصلي. هذا يعمل حتى مع فحص النوع.
يمكنك مشاهدة عينة من إخراج فحص ملف 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 بسطر الأوامر بفحص جزء TS من ملفات Vue الخاصة بي؟ إنه يعمل بشكل جيد في VS Code ، لكني أود أن يعمل سطر الأوامر أيضًا.

لقد استغرقت وقتًا أطول قليلاً مما كنت أعتقد ، ولكن ها هو: https://www.npmjs.com/package/@fimbul/wotan

يمكنك حتى استخدام وقت تشغيل linter ( @fimbul/wotan ) لتنفيذ قواعد TSLint. ما عليك سوى @fimbul/heimdall ، راجع https://github.com/fimbullinter/wotan/tree/master/packages/heimdall#readme

لفحص ملفات Vue ، استخدم @fimbul/ve (بدون خطأ مطبعي ، لا يوجد "u" في "ve"): https://github.com/fimbullinter/wotan/tree/master/packages/ve#readme

هل هناك جدول زمني عندما يدعم tslint ملف linting vue / html؟ تضمين التغريدة

الأمر متروك للمجتمع لتنفيذ ذلك ، ولكن يبدو أن مؤلف VueJS يفضل المكونات الإضافية ESLint TypeScript بدلاً من ذلك في الإصدار الأخير من vue-cli (حاليًا في alpha).

يبدو أن هذه الميزة قد تم تنفيذها بالفعل في [email protected] . يركض:

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

وسيكون هناك خيار لاستخدام TSLint باعتباره linter.

لقد عدت بأخبار أفضل للجميع في هذا الموضوع:

يمكن لأحدث إصدار من wotan تنفيذ قواعد TSLint وفقًا لـ tslint.json ويضيف دعمًا للمعالجات. هذا يعني أنه ليس عليك تغيير التكوين الخاص بك ويمكنك البدء في فحص ملفات 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. يركض
   انظر الأمثلة أدناه والتكيف مع استخدامك الخاص. اقرأ المستندات للحصول على مزيد من المعلومات حول وسيطات CLI المتاحة.
   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. قراءة متعمقة
   Wotan - CLI والتكوين: 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. مثل ، شارك واشترك: نجمة:

تضمين التغريدة

يمكنك استخدام TSLint مع مكونات الملف الفردي Vue عن طريق تكوين vue-loader.

شكرا على الحل. لكنه مجرد حل خاص بـ Webpack. سيكون رائعًا إذا كان هناك حل عام لا يعتمد على أداة بناء حتى نتمكن من إنشاء ملفات tslint Vue التي تم تجميعها باستخدام Fusebox (أو أي أداة إنشاء أخرى).

حل آخر لحزمة الويب.

لقد أنشأت محملًا بسيطًا يقوم بقص جميع المسافات البيضاء من "ملف" يوفره محمل vue ثم إضافة مساحة بيضاء للنتير.

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 لا يعمل في هذا الإعداد (والذي يجب أن يكون قابلاً للتغلب عليه باستخدام أداة تحميل مخصصة) ، فإنني أشير فقط إلى أنه حتى مع إصدارات webpack و vue-loader الحديثة ، لا يمكنني الحصول على typeCheck: true يعمل ل *.vue الملفات ل tslint غير راض عن تمديد (حتى مع appendTsSuffixTo ). يقدم هذا المشروع التجريبي مثالًا بسيطًا للتلاعب به.

علامة

المزيد من الأخبار هنا؟ 🤙

إذا أراد شخص ما استخدام cli لفحص ملف .vue الخاص بك ، فيمكنك تجربة vue-tslint . إنها ليست مثالية ، لكنها تعمل ...

لاحظ أن حل romandragan ليس الآن من أفضل الممارسات (لست متأكدًا مما إذا كان كذلك في السابق). بدلاً من ذلك ، أضف tslint-loader إلى قواعد use في \.ts$ كما تفعل مع ملفات الكتابة العادية ؛ هذا الآن vue-loader يعالج ملفات القوالب بشكل عام ، وتفويض الأقسام المختلفة لتكوين Webpack الخاص بك لتلك الامتدادات المعنية. مكون المكوّن الإضافي 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 core:

نظرًا لعدم وجود مناقشة أو اقتراح ملموس هنا والإيقاف القادم لـ TSLint لصالح ESLint (# 4534) ، سأقوم بإغلاق هذه المشكلة والتقارير الخاصة بـ Vue ذات الصلة لأغراض التدبير المنزلي.

إذا كانت هذه لا تزال تمثل مشكلة بالنسبة لك في print-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 يرجى طرح مثل هذه القضايا مع مشروع wotan ، وليس tslint