開発者ドキュメント

eslint-plugin-vueを使用したVue.jsコンポーネントのリンティング

リンティングは常にVueにとって少し悩みの種でした。 単一ファイルコンポーネントモデルのため、スクリプト部分をリントしようとするリンターは、最初にその周りのHTML構文を通過できる必要があります。 HTMLの構造とスタイルのリンティングも、これまでほとんど無視されていました。 Vueコンポーネントの公式リンティングプラグインであるeslint-plugin-vueと入力します。 以前は、を使用してEslintでスクリプトをリントすることが可能でした eslint-plugin-html と多くの汚いハックがありますが、Vueファイルを適切にリントすることが可能になりました。 構造とすべて。 それを行う方法を見てみましょう。

インストール

まず、eslinteslint-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つを拡張してください。

使用可能なレベルは次のとおりです。

.eslintrc.json
{
  "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コンポーネントに小さな警告とエラーが生成されるはずです。 やったー!

モバイルバージョンを終了