Vueファイル の Auto Format

## 本記事の背景

- Udemy で Vue.js のコースを受講中
  - [Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)](https://www.udemy.com/vuejs-2-the-complete-guide/) 
  - 英語だけど個人的にはわかりやすい
- VSCode で ファイルを保存すると Auto Format できるようにしたい
- 他の Qiita の参考記事を見ても中々再現できない
- 自分なりにやってみる

## 本記事の目的

vue-cli と ESLint を使って、vue ファイルを Auto Format できる環境を作ること

## 環境
OS: Windows 10 Pro

## 前提
参考記事をもとにインストール
必須のものをpick up

### 事前インストール

- Visual Studio Code: 1.27.2
- node.js: v8.11.3
- Vue: 2.5.17
- vue-cli: v2.9.6

### Visual Studio Code のプラグイン
- [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
- [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Vue 2 Snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets)

## 手順

### vue-cli でプロジェクト作成

下記コマンドを実行すること
必要に応じて Yes/No を切り替えること
とりあえず、ESLint は Yes にしましょう
コマンドの処理終了後に sample フォルダが作られます

```bash
vue init webpack sample
? Project name sample
? Project description A Vue.js project
? Author hage <xxx@yyy.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

# move project folder
cd sample
```

### .eslintrc.js の編集

sample フォルダの直下に「.eslintrc.js」があります
下記をコピーして、Vue の設定を付け加えましょう
prettier のルールは[ここ](https://prettier.io/docs/en/options.html)を見て書くとよい
※ trailingComma は好みが分かれそうですね

```javascript
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    sourceType: "module",
    parser: "babel-eslint"
  },
  env: {
    browser: true
  },
  extends: ["prettier", "prettier/standard", "plugin:vue/recommended"],
  plugins: ["vue", "prettier"],
  rules: {
    "generator-star-spacing": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "properties": "always",
    "ignoreDestructuring": false,
    "prettier/prettier": [
      "error",
      {
        trailingComma: "none",
        singleQuote: true,
        semi: false,
        printWidth: 120,
      }
    ]
  }
};
```

### VSCode のワークスペースの設定
sample フォルダの直下に「.vscode」のフォルダを作成
作成したフォルダの中に、下記内容をコピーして「settings.json」を格納

```json
{
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "eslint.run": "onType",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.style": true,
  "vetur.validation.template": true
}
```

### eslint と prettier の連携

下記を実行すること

```bash
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
```

## まとめ

上記手順を実行することで、Vue ファイルを保存したときに Auto Format されます
※うまくいかない場合はコメント下さい

## 参考
[Visual Studio CodeでVue.jsアプリケーションの開発環境を構築する](https://qiita.com/rubytomato@github/items/b35b819671e7cbb3dff7)
[Formatting Vue.js Code with ESLint & Prettier](https://alligator.io/vuejs/vue-eslint-prettier/)
[Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier](https://medium.com/@doppelmutzi/eslint-prettier-vue-workflow-46a3cf54332f)