vue-cliで作成したプロジェクトをVSCodeで編集するときの設定

目的

vue-cliで作成したプロジェクトをVSCodeを使用してフォーマットするとeslintでエラーとなってしまいます。（2017/11/03 時点）
VSCodeの設定を修正しエラーとならずに動作させるようにします。

環境

• vue-cli 2.9.1
• VSCode 1.17.2
  • vetur 0.10.1

結論

以下の設定を追加。

ユーザー設定へ追加

{
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

事象

正常動作確認

プロジェクト作成～起動

vue init webpack sample
cd sample
npm install
npm run dev

フォーマット

エラー内容

 ERROR  Failed to compile with 1 errors                                                        18:53:18

 error  in ./src/components/HelloWorld.vue


  ✘  http://eslint.org/docs/rules/quotes                       Strings must use singlequote
  src\components\HelloWorld.vue:25:9
    name: "HelloWorld",
           ^

  ✘  http://eslint.org/docs/rules/space-before-function-paren  Missing space before function parentheses
  src\components\HelloWorld.vue:26:7
    data() {
         ^

  ✘  http://eslint.org/docs/rules/quotes                       Strings must use singlequote
  src\components\HelloWorld.vue:28:12
        msg: "Welcome to Your Vue.js App"
              ^

  ✘  http://eslint.org/docs/rules/semi                         Extra semicolon
  src\components\HelloWorld.vue:29:6
      };
        ^

  ✘  http://eslint.org/docs/rules/semi                         Extra semicolon
  src\components\HelloWorld.vue:31:2
  };
    ^


✘ 5 problems (5 errors, 0 warnings)


Errors:
  2  http://eslint.org/docs/rules/semi
  2  http://eslint.org/docs/rules/quotes
  1  http://eslint.org/docs/rules/space-before-function-paren

 @ ./src/router/index.js 3:0-49
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

問題点

• シングルクォーテーションがダブルクォーテーションに変換されてしまう。
• 関数名の後ろにあるスペースが除去されてしまう。
• 文の最後にセミコロンが挿入されてしまう。

原因？

veturのデフォルトフォーマッタがjs-beautify⇒prettierへ変更されたから？（参考URL内のコメントより推察）

今後

prettier-eslintの対応が予定されている？ようなのでそのうち直るかもしれない。

参考