自分の好みのスタイルにしたいので、必要に応じて更新していきます。

基本的な内容はこちら。

• スペースでのインデント (サイズ2)
• JS/Vue(<script>) では シングルクォート、セミコロン無し、配列の最後の要素のコンマは複数行の記法時のみ許容
• ESLint / Prettier / EditorConfig を併用
• VSCodeの保存時にフォーマット実行

意味合いとして、

• EditorConfig で基本的な設定
• Prettier で EditorConfig ではできなかった設定を追加
• ESLint で 上記二つの内容をチェック

といったことになります。

手順

プロジェクト作成

$ vue create sample


Vue CLI v4.2.2
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter (← Linter を指定)
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier (← Prettier を指定)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No


Vue CLI v4.2.2
✨  Creating project in /Users/gray/projects/vue/sample.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.16.0
info No lockfile found.
[1/4] 🔍  Resolving packages...



success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
✨  Done in 18.79s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.16.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 4.53s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample.
👉  Get started with the following commands:

 $ cd sample
 $ yarn serve

$ cd sample

いくつか設定ファイルを書いていく。

設定ファイル1: .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

保存時に自動でフォーマットをかけるための設定。「設定」メニューからは設定できないので、手動で行なう。

設定ファイル2: .editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 2
indent_style = space
trim_trailing_whitespace = true

基本的な設定を EditorConfig で行なう。
インデントサイズの好みはあると思うが、JSとHTMLはスペース2が最近の好み。

設定ファイル3: .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

EditorConfig に無い設定を Prettier で追加。

設定ファイル4: .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "quotes": ["error", "single"],
    "semi": ["error", "never"],
    "comma-dangle": ["error", "only-multiline"],
  }
};

Vue CLI でプロジェクト作成された時点で存在するので、rules に追加する。
ちなみに、この設定ファイル自体にこのルールが適用されないので、なんとなく自己矛盾な気持ち。

Visual Studio Code 拡張

• ESLint dbaeumer.vscode-eslint
• Prettier – Code formatter esbenp.prettier-vscode
• EditorConfig for VS Code editorconfig.editorconfig
• Vetur octref.vetur

必要なのはこの辺りのはず。

この辺りで 保存 → 自動フォーマット を実現しつつ、気に入った形になってくれるので、概ね満足してます。