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

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

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

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

  1. wotanCLI。 CLIが行う通常のことを行います。
  2. Vé[X6X]-Vueシングルファイルコンポーネントからスクリプトを抽出してリンティングするWotan用のプリプロセッサ。
  3. 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"

リント!

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

たとえば、実行時に取得する出力は次のとおりです wotan デフォルトのTypeScript-VueStarterProject

うわぁ!

ありがたいことに、これらのエラーはすべて、 wotan --fix.

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

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

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

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