Tslint: linting vue / htmlファイルをサポート

@ nrip-monotypeの場合、 vue-loader構成することで、Vue単一ファイルコンポーネントでTSLintを使用できます。 たとえば、webpack 2では次のように使用しています（ vue-loaderのloadersオプションを見てください）：

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のセットアップは私にとってはうまくいきましたが、tslint-loaderのtypeCheckフラグが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 、どのバージョンのwebpackを使用していますか？ ts-loaderとtslint-loader npmモジュールがインストールされていますか？

@romandragan 、これが使用しているnpm
`` `
"tslint"： "^ 5.1.0"、
"ts-loader"： "^ 2.0.3"、
"webpack"： "^ 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ファイルから正しいlintを取得するため、ts-loaderとtslint-loaderの両方がインストールされ、正常に動作します。

回避策として、TypeScriptロジックを.vueファイルから分離し、vueローダーからtslint-loaderを削除できます。 その後、 no-consecutive-blank-lines消えます。

@romandraganこれは機能しますが、 <script>タグ内にコードをリントするのも良いでしょう：これはエディターのサポートに必要であり、Webpack全体ではなくtslintコマンドを個別に実行する方がはるかに簡単ですフロー。

@adidahiyaこの機能の計画はありますか？
またはeslintプラグインのようなtslintのサポートプラグインシステムの計画はありますか？

Webpackを使用している場合、 fork-ts-checker-webpack-pluginにno-consecutive-blank-lines問題がなく、タイプチェッカーレベルで.vueファイルが機能してリンティングしています。 ここでPRを見ることができます（そしてテストブランチからnpm installを今すぐ使用し、PRスレッドの上部を参照してください）： https ：

また、VSCodeエディターを使用している場合は、 TSLintVue拡張機能を確認してください。

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ローダーは実際にvueファイルからJavaScriptまたはTypeScriptを抽出できるため、vueファイルの解析はwebpackにとって問題ではありません。 ただし、typeCheckが有効になっている場合、ファイル名は「.vue」で終わるため、TSLintは「無効なソースファイル」をスローします。

さらに、vue-loaderはTypeScriptに関係のない行を削除せず、代わりに正しい行番号を維持するためにそれらをクリアするため、vueファイルの最初または最後に連続した空白行を許可することでTSLintが連続する空白行の不満を停止するようにすることができます。

私は現在、webpackを必要とせずにこれらの問題を解決できるリンターに取り組んでいます： //github.com/ajafff​​/wotan
これは現在、概念実証であり、TSLintに統合されている場合と統合されていない場合があります。 これはゼロからの完全な書き直しであり、TSLintとはほとんど互換性がありません。

プロセッサ（ESLintプロセッサと同様）を使用してファイルを変換する機能があります。 vueプロセッサはSFCからTypeScriptコードを抽出し、リンターはコードをリントするだけで、プロセッサはエラーを元のファイルの正しい場所にマップします。 これはタイプチェックでも機能します。
ここでvueファイルのリンティングのサンプル出力を見ることができます：
https://github.com/ajafff​​/wotan/blob/master/baselines/integration/processors/vue/default/hello.vue.lint#L29

また、自動修正も可能です。 上記と同じファイルが自動的に修正されました： https ：

https://github.com/ajafff​​/wotan/issues/32を修正したら、リリースを公開して、実際のコードで試すことができるようにします。
vueプロセッサはメインプロジェクトの一部ではありませんが、プロセッサ用に別のパッケージを公開するようにします。

コマンドラインのtslintがVueファイルのTS部分をリントするように、 tsconfig.jsonを設定する方法を知っている人はいますか？ VS Codeでも問題なく動作しますが、コマンドラインでも動作するようにしたいと思います。

思ったより少し時間がかかりましたが、 https ： 。

linterランタイム（ @fimbul/wotan ）を使用してTSLintルールを実行することもできます。 必要なのは@fimbul/heimdallだけです。https：//github.com/fimbullinter/wotan/tree/master/packages/heimdall#readmeを参照して

Vueファイルをリントするには、 @fimbul/ve使用します（タイプミスなし、「ve」に「u」はありません）： https ：

tslintがvue / htmlファイルのリンティングをサポートするスケジュールはありますか？ @Toilal

これを実装するのはコミュニティ次第ですが、VueJSの作者は、vue-cliの最後のバージョン（現在はアルファ版）ではなく、ESLintTypeScriptプラグインを支持しているようです。

この機能はすでに[email protected]実装されているようです。 走る：

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

そして、リンターとしてTSLintを使用するという選択肢があります。

私はこのスレッドのすべての人にさらに大きなニュースを返します：

最新バージョンのwotanは、 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. 走る
   以下の例を参照して、自分の用途に適合させてください。 使用可能な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 ：
   Valtýr-TSLintルールとフォーマッターのプラグイン-「TSLintよりも優れたTSLintランタイム」： https ：
   Vé-Vue単一ファイルコンポーネント用のプロセッサ： https ：
   Fimbullinter-このプロジェクトの使用を今すぐ開始する必要がある理由： https ：
5. いいね、共有、購読：star：

@romandragan

vue-loaderを構成することにより、Vue単一ファイルコンポーネントでTSLintを使用できます。

解決してくれてありがとう。 しかし、これはWebpack固有のソリューションにすぎません。 我々がVueのをtslintことができるようにビルド・ツールに依存しない汎用的な解決策があった場合にコンパイルされたファイルは素晴らしいことだヒューズボックス（または任意の他のビルドツール）。

webpackの別のソリューション。

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') ],....

次に、remove-whitespace-ts-loader：
/* 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; }
_コードフォーマットを改善する方法についてのヘルプを歓迎します_

それは正常に動作し、ソースを変更しないことを許可します、ありがとう

私が同じページにいるのと同じように、PRとして行われない限り、これは修正されないのでしょうか？

no-consecutive-blank-linesがこのセットアップで機能しないことに加えて（カスタムローダーで回避できるはずです）、最近のWebpackとvue-loaderバージョンでも、 typeCheck: true取得できないことに注意してください。 *.vueファイルで機能します。これは、 tslintが拡張子に不満を持っているためです（ appendTsSuffixTo ）。 このデモプロジェクトは、簡単な例を示しています。

マーク

ここにもう少しニュースがありますか？ 🤙

誰かがcliを使用して.vueファイルをリントしたい場合は、 vue-tslintを試すことができます。 完璧ではありませんが、機能します...

@romandraganのソリューションは現在ベストプラクティスではないことに注意してください（以前はそうであったかどうかは\.ts$ルールのuseにtslint-loaderを追加します。 これで、 vue-loaderは一般にテンプレートファイルを処理し、それぞれの拡張機能のWebpack構成にさまざまなセクションを委任します。 vue-loaderのプラグインコンポーネントは、 \.ts$のルールを抽出し、これらのルールを介して<script lang="ts">ブロックをストリーミングします。

Vue CLIを使用している場合は、

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

vue.config.js chainWebpackオプションへのステートメント。 例えば、

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 verbose

クラッシュ：

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ではなく、wotanプロジェクトでそのような問題を提起してください