Help us understand the problem. What is going on with this article?

VSCodeでvue-cliで作成したプロジェクトのESLintを適用する際に.vueファイルが適用されない問題の対処法

More than 1 year has passed since last update.

eslintが反映されない

vue-cliいいですよね。コマンド一つで環境を整えてくれるのはありがたいです!
vue-cliが生成するファイルの中にESLintの設定ファイルがあるのですが、VSCodeの拡張を入れるだけでは反映されず、ちょっと設定をいじる必要があったのでシェア。

使用した拡張は以下
image.png

設定方法

上記の拡張インストール後に
ファイル→基本設定→設定
としてeslintを検索します。デフォルトではユーザ設定を変更するモードになっているので、忘れずに「ワークスペースの設定」タブを選択して、今回の影響範囲をプロジェクトだけに抑えましょう(設定ファイルはプロジェクト固有なので)

image.png

いくつかの設定はsettings.jsonを直接いじる必要があるので、以下のように記述します

setting.json
{
  "eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

特に"eslint.validate"vueを追加するのを忘れがちなので気を付けましょう!

これで動作すると思います。設定すれば自動で修正する機能もあるのでお好みでカスタマイズしてみてください!

koyo-miyamura
九州大学大学院システム情報科学府卒 面白法人カヤック・サーバサイドエンジニア note: https://note.mu/m_k9071 ポートフォリオ: https://koyo-miyamura.github.io/portfolio/
http://maple-daily.com/
fukuokaex
エンジニア/企業向けにElixirプロダクト開発・SI案件開発を支援する福岡のコミュニティ
https://fukuokaex.fun/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away