リンティングは常にVueにとって少し悩みの種でした。 単一ファイルコンポーネントモデルのため、スクリプト部分をリントしようとするリンターは、最初にその周りのHTML構文を通過できる必要があります。 HTMLの構造とスタイルのリンティングも、これまでほとんど無視されていました。 Vueコンポーネントの公式リンティングプラグインであるeslint-plugin-vueと入力します。 以前は、を使用してEslintでスクリプトをリントすることが可能でした eslint-plugin-html
と多くの汚いハックがありますが、Vueファイルを適切にリントすることが可能になりました。 構造とすべて。 それを行う方法を見てみましょう。
インストール
まず、eslintと eslint-plugin-vue
.
# Yarn
$ yarn add eslint eslint-plugin-vue --save-dev
# NPM
$ npm install eslint eslint-plugin-vue --save-dev
使用法
今、あなたの更新(または作成) .eslintrc.json
ファイル。 eslint-plugin-vueで使用可能なリンティングレベルの1つを拡張してください。
使用可能なレベルは次のとおりです。
plugin:vue/base
-解析を機能させるための基本的なルール。 まだ何もリントしていません。plugin:vue/essential
-上記に加えて、Vueでのエラーや予期しない動作を防ぐためだけに存在するルール。plugin:vue/strongly-recommended
-上記に加えて、一般的にベストプラクティスと見なされるルール。plugin:vue/recommended
-上記に加えて、よく提案されるいくつかのスタイルルール。
{
"extends": [
"eslint:recommended",
"plugin:vue/recommended"
],
}
これらのルールによって検出された問題の多くは、eslintを使用して自動的に修正できます。 --fix
オプション。
エディターの構成
さて、ある種のeslint統合を使用してエディターでVueファイルを開くと、何も表示されない場合があります。 それはあなたが関連付ける必要があるためです vue
リンターを使用したファイルタイプ。 ほとんどの統合はすでにHTMLファイルをサポートしているため、HTMLなどのVueファイルを使用する場合、これは以前は問題ではありませんでした。
AtomとVSCodeの問題を修正する方法は次のとおりです。 SublimeText3でのサポートをまだ待っています。 このPRを追跡する: https://github.com/roadhump/SublimeLinter-eslint/pull/169
Atom + linter-eslintの場合:
[設定]->[パッケージ]->[linter-eslint]に移動し、追加します text.html.vue
「eslintを実行するスコープのリスト」オプションに移動します。 Atomを再起動する必要があるかもしれません。
結果:
VSCode + Eslintの場合:
ユーザー設定ファイルを開き、追加します
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
すでに変更している場合 eslint.validate
プロパティに、上記のリストの最後の項目を追加するだけです。
結果:
これで、eslintが期待どおりに実行され、すべてのVueコンポーネントに小さな警告とエラーが生成されるはずです。 やったー!