VSCodeでVue.jsのフォーマットがうまくいかない #vscode #vuejs #nuxtjs

VSCode Vue.js Nuxt.js

概要

とりあえずNuxt.jsはVSCodeで書いてみてるんだけど、フォーマットをかけるとエラーになってしまう。

前提

Veturというプラグインを入れています。

github.com

結論

Prettierプラグインを入れる。

github.com

VSCodeの設定に下記を追加する。

"prettier.singleQuote": true,
"prettier.semi":false,

.eslintrc.js のrulesに下記を追加する。

rules: {
    // 追加する
    'space-before-function-paren': 0
  },

詳細

VSCodeでフォーマットかけると、エラーになってしまった。

フォーマット書けると下記のようになる。

<script>
export default {
  data: function() {
    return {
      message: "hello world!"
    };
  }
};
</script>

Nuxt.jsを npm run dev で起動しようとするとエラーになる

  10:17  error  Missing space before function parentheses  space-before-function-paren
  12:16  error  Strings must use singlequote               quotes
  13:6   error  Extra semicolon                            semi
  15:2   error  Extra semicolon                            semi

✖ 4 problems (4 errors, 0 warnings)
  4 errors, 0 warnings potentially fixable with the `--fix` option.

--fix オプションは効果なかった(´・ω・｀)

どうも

  • functionの括弧はスペースあけろ
  • シングルクォート使え
  • いらんセミコロンつけるな

ということのようだ。

とりあえずPrettierプラグインを追加

どうもVeturのフォーマットがPrettierをデフォルトにしているっぽい？のでVSCodeに追加する。

github.com

いろいろ調べたけど

github.com

上記のIssueが見つかった。

効果があったのが前述のVSCodeの設定。

"prettier.singleQuote": true,
"prettier.semi":false,

これでシングルクォートとセミコロンは解決された。

しかしfunctionのスペースが解消されない。

javascript.format.insertSpaceBeforeFunctionParenthesis とかすごくそれっぽいのに。。

スペース入れるのを諦めた

結局スペースを入れるのをあきらめて、lintの方のルールでスペースがないものを正しいとするようにした。

.eslintrc.js に追記。

rules: {
    // 追加する
    'space-before-function-paren': 0
  },

なーんか納得行かないし気持ち悪いなぁ。。

参考