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

リンティングは常にVueにとって少し悩みの種でした。単一ファイルコンポーネントモデルのため、スクリプト部分をリントしようとするリンターは、最初にその周りのHTML構文を通過できる必要があります。 HTMLの構造とスタイルのリンティングも、これまでほとんど無視されていました。 Vueコンポーネントの公式リンティングプラグインであるeslint-plugin-vueと入力します。以前は、eslint-plugin-htmlといくつかのダーティハックを使用して、Eslintでスクリプトをリントすることができましたが、現在は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-上記に加えて、よく提案されるいくつかのスタイルルール。

.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]に移動し、[eslintを実行するスコープのリスト]オプションにtext.html.vueを追加します。 Atomを再起動する必要があるかもしれません。

結果：

VSCode + Eslintの場合：

ユーザー設定ファイルを開き、追加します

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],

eslint.validateプロパティを既に変更している場合は、上記のリストの最後の項目を追加するだけです。

結果：

これで、eslintが期待どおりに実行され、すべてのVueコンポーネントに小さな警告とエラーが生成されるはずです。やったー！