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

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

  • 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を再起動する必要があるかもしれません。

Needed config changes to make Atom play nice with eslint-plugin-vue.

結果:

eslint-plugin-vue integrated with Atom

VSCode + Eslintの場合:

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

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

Needed config changes to make VSCode play nice with eslint-plugin-vue.

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

結果:

eslint-plugin-vue integrated with VSCode.

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