ESlint入りVue.jsのScript内でjQueryを使いたい【非推奨】

前置き

基本的にVue等のモダンフレームワーク内での外部スクリプトの使用は推奨されないので、可能な限りやめましょう。
理由としては

  • せっかくフレームワークで効率的にライブラリを管理してるのに、外部スクリプトを使うことでリソースが膨れ上がる
  • 外部スクリプトの影響でフレームワークで管理する依存関係解決に支障をきたす恐れがある
  • 特にjQueryはDOMを直接操作するので、仮想DOMとの整合性がとれず動作が破綻する恐れがある

ちなみにjQueryはnpmとかyarnを使って管理することも可能。今回はあえてローカルに落としたjQueryを使う方法について説明する。

やり方

例えば、App.vueで以下のようにしたいとする。

<script>
import $ from "@/assets/js/jquery-3.3.1.min.js";

export default {
  name: "Home",
  props: {
    msg: String
  },
};
</script>

ESlintが正常に動作していると、この時点でlintの制限に引っかかってバチボコに怒られる。
ESlint自体を切りたくはないので、指定ファイルをLint対象外にする方法で対応する。

ルートディレクトリに.eslintignoreを作成し、以下を記述する。

/src/App.vue