TypeScriptVue.jsコンポーネントをWotanでリンティングする

TypeScriptは特別な言語です。人々はそれを愛するか、激しく嫌う傾向があります（それを試した人のほとんどはそれを愛しているようですが）。あなたの意見に関係なく、TypeScriptは時々非常に便利です。ただし、Vueで適切に機能させるのは面倒な場合があります。 TypeScriptは独自のリンティングおよびコンパイルツールを使用するため、TypeScriptを既存のツールチェーンに統合することは、難解な芸術のかなりの探求になる可能性があります。 TypeScriptをlintにすること、たとえばVue Single File Componentsは、tslintで直接実行することはできません。リモートで実行可能なものを取得できるようにするには、複雑なコード変換などを実行する必要があります。しかし、別の方法があった場合はどうなりますか？プラグ可能なTypeScriptおよびJavaScriptリンターであるwotanを入力します。 Vueシングルファイルコンポーネント用のプラグインがあり、既存のtslintプロジェクトに直接追加できます。

wotanを使用してVueシングルファイルコンポーネントをリントする方法を見てみましょう。

このチュートリアルは、TypeScriptでプロジェクトがすでに設定されていることを前提としています。 Microsoftの公式TypeScript-VueStarterProjectに沿った何か

Wotanおよび関連プラグインをインストールする

3つのパッケージが必要になります。

wotanCLI。 CLIが行う通常のことを行います。
Vé[X6X]-Vueシングルファイルコンポーネントからスクリプトを抽出してリンティングするWotan用のプリプロセッサ。
Valtýr-tslintのドロップイン代替として効果的に機能するWotanのプラグイン。 tslint.jsonファイルを変更せずに使用できます。

$ npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr

Wotanを構成する

.fimbullinter.yamlという名前の新しいファイルを作成します。これは、wotanにプロジェクトをリントする方法を指示する構成を保持します。

.fimbullinter.yaml

# Tell wotan to use the valtyr module for linting.
modules: "@fimbul/valtyr"
# Valtýr configuration.
valtyr:
  overrides:
    # Use the Vé preprocessor for all *.vue files.
    # Valtýr will still run for *.ts files by default.
    - files: "*.vue"
      processor: "@fimbul/ve"

リント！

これで、プロジェクトディレクトリでwotanを実行するだけで、プロジェクトをリントできます。

たとえば、デフォルトの TypeScript-Vue StarterProjectでwotanを実行したときに得られる出力は次のとおりです。

うわぁ！

ありがたいことに、これらのエラーはすべてwotan --fixを使用して自動的に修正できます。

リンター構成が気に入らないですか？他のTypeScriptプロジェクトと同じように、tslint.jsonを構成するだけです。

現時点では、wotanはかなり若いプロジェクトであり、どのエディターとも直接統合されていないようです。おそらくあなたはそれを手伝うことができますか？

Wotan とValtýrのの多くのオプションを見て、彼らが何ができるかを感じ取ってください。

そしてそれで、あなたは行ってもいいはずです！