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-Wotanのプラグインで、
tslint
. それはあなたを使うことができますtslint.json
ファイルは変更されません。
$ npm install --save-dev @fimbul/wotan @fimbul/ve @fimbul/valtyr
Wotanを構成する
と呼ばれる新しいファイルを作成します .fimbullinter.yaml
. これは、wotanにプロジェクトをリントする方法を指示する構成を保持します。
# 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のの多くのオプションを見て、彼らが何ができるかを感じ取ってください。
そしてそれで、あなたは行ってもいいはずです!