LoginSignup
10
10

More than 3 years have passed since last update.

VScodeで保存時にESlintが自動補正してくれるようにする

Last updated at Posted at 2019-06-13

はじめに

vue.jsに触り始めて2日くらい
やっとコンパイルやら開発環境サーバーの立ち上げやら、環境構築周りに慣れてきました。
規則に沿ったコーディングがなるべくできるよう、コンパイル時にESlintを走らせるような設定をしています。

VScodeの方で保存時に自動インデント補正をかけていたら、ESlintのテストと競合し永遠にコンパイルが通らなくなったので、メモ程度に残しておきます。

2019/06/19 結論のコード部分を加筆しました
vueファイルに対しEslintが機能してませんでした。。
こちらを参考にさせて頂きました。とてもわかりやすいです・・!
VSCode上でvueファイルに対してESLintが快適に動作する設定

環境

  • mac os highSierra
  • VScode

結論

  • VScodeにESLintのプラグインを入れる
  • settings.jsonに下記を追記

蛇足ですが、何についての設定か忘れないように、無理やりコメントを付けてますw

    "comments": "eslintの自動保存",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "comments": "vueファイル内のJavaScriptに対しVeturを無効にする",
    "vetur.format.defaultFormatter.js": "none",
    "comments": "Vscodeの自動保存なし",
    "editor.formatOnSave": fals

まとめ

"editor.formatOnSave": falseを明記しないと、ESlintのオートセーブと競合してしまうそう。
変なところでハマりましたが、なるほどーとなりました。

10
10
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10