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

getdocs

2年前

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

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

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

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

wotanCLI。 CLIが行う通常のことを行います。
Vé[X6X]-Vueシングルファイルコンポーネントからスクリプトを抽出してリンティングするWotan用のプリプロセッサ。
Valtýr-Wotanのプラグインで、 tslint. それはあなたを使うことができます 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"