Visual Studio Code で Vue.js  のコードを自動整形する【Vue CLI 3 & ESLint & Prettier】

# 目的
[Vue CLI](https://cli.vuejs.org/) によって自動で生成される **ESLint のプラグインや設定ファイル**を利用して、**`.js`、`.vue`ファイルのコード自動整形**をしたい。

## 使うもの
※各項目に参考記事へのリンクを張っていますので、必要であれば御覧ください。

- [Yarn](https://ics.media/entry/19384) あるいは [npm](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)
- [Vue CLI 3.0](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)
- [Visual Studio Code](https://qiita.com/hi85/items/eaede5ebb509f21f27f5)
- [ESLint](https://qiita.com/mysticatea/items/f523dab04a25f617c87d) の関連プラグイン
- [Prettier](https://qiita.com/soarflat/items/06377f3b96964964a65d) の関連プラグイン

# やることまとめ

Vue CLI と VSCode が大体わかっていらっしゃる方はこちらだけで十分かと思います。

※Yarn or npm と VSCode インストール必須

## コマンド
```bash
# Vue CLI 3.0 のインストール
yarn global add @vue/cli
# npm install -g @vue/cli

# Vue プロジェクトの作成（「my-project」のところは自由なプロジェクト名に）
vue create my-project

# 作成したプロジェクトのフォルダに移動
cd my-project

# Prettier の導入
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
# npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
```

## VSCode

### インストールする拡張機能
- Vetur
- ESLint
- Prettier

### ユーザー設定
```js:setting.json
// デフォルトのコード整形を無効化
"editor.formatOnSave": false,

// ESLint 自動フォーマット有効化
"eslint.autoFixOnSave": true,

// ESLint の Vue.js 設定
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
],

// Prettier の ESLint 連携
"prettier.eslintIntegration": true,
```

# 手順と説明
上記で紹介したインストール・設定等について、順を追って説明していきます。

## Node.js のインストール

こちらから最新版をインストールしてください。
https://nodejs.org/ja/

## Yarn のインストール
npm で良いという方はスルーしてください。
以下の説明では、Yarn だけでなく npm のコマンドも合わせて記述します。

こちらから Yarn インストール。
https://yarnpkg.com/ja/

または以下のコマンド実行。

```bash
npm install -g yarn
```

## Visual Studio Code の入手
こちらから。
https://code.visualstudio.com/

初期設定やおすすめの機能などについては、以下の記事を御覧ください。
[Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け -](https://qiita.com/hi85/items/eaede5ebb509f21f27f5)
[VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

## Vue CLI の導入
ここから本題です。
まずは対象のプロジェクトを作ります。

コマンドプロンプト等から以下のコマンドを実行してください。
※1行目が yarn コマンド、3行目が npm コマンドです。

```bash
yarn global add @vue/cli
# OR 
npm install -g @vue/cli
```

当コマンドは、Vue CLI 3.0 のインストールコマンドです。
旧バージョンを使いたい方は`vue-cli`を指定する必要があり、また`vue-cli`導入済みで 3.0 に更新したい方は以下のコマンドのようにあらかじめアンインストールが必要です。

```bash
yarn global remove vue-cli
# OR
npm uninstall vue-cli -g
```

## Vue プロジェクトの作成

続いて、Vue のプロジェクトを作成します。
任意のディレクトリでコマンドウィンドウを開き、`vue create ＜プロジェクト名＞`と実行します。

```bash
vue create my-project  # my-projectフォルダにプロジェクトを展開
```

次にプロジェクトに関する質問が表示されるので適宜答えていきます。詳細を知りたい方は以下記事へ。

[Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)

デフォルト設定で作成（質問のところで Enter を押すだけ）すると、以下のようなディレクトリ構成が作成されます。

```bash
my-project/
  ├ node_modules/
  ├ public/
  ├ src/
  ├ .gitignore
  ├ babel.config.js
  ├ package.json
  ├ README.md
  └ yarn.lock
```


## Prettier の導入

作成したプロジェクトに Prettier を導入します。

あらかじめ VSCode にて以下の手順を行っておくと楽です。
1. 『フォルダを開く』（**`Ctrl + K` `Ctrl + O`**）でプロジェクトフォルダを開く
2. 『ターミナル』（**`Ctrl + @`**）でターミナルを開く

プロジェクトのルートディレクトリ（当記事では my-project）で以下のコマンドを実行します。

```bash
# Prettier の導入
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
# OR
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
```

## VSCode の拡張機能を導入

VSCode で拡張機能を入手、設定するには、まず以下のどちらかの方法を行います。

- `Ctrl + Shift + X`を入力
- 画面左の拡張機能マーク（四角の迷路のようなマーク）をクリック

続いて、以下の手順で拡張機能をインストールします。

1. 検索窓に拡張機能の名称を入力
2. 対象の拡張機能のインストールをクリック
3. VSCode を再起動

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/cd1fff19-7423-dff6-1b13-06a4e633c468.png) ⇒⇒ ![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/24762b5d-5a6d-88b4-a5e0-e2ee4940d7f4.png)

必要な拡張機能は以下の3つです。

- Vetur
- ESLint
- Prettier

## VSCode の設定

VSCode の設定ファイル `setting.json` を開きます。

VSCode 上でコマンドパレットを開き（`Ctrl + Shift + P`）、`setting` と入力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/4f7e4ef1-ec7f-3cf2-7622-2e9174527561.png)

『設定(JSON)を開く』を選択し、`setting.json` の編集画面を開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/1a75c339-6949-cdf0-b617-d4ed234e49da.png)

赤枠で示したエリアに以下の設定を記述します。
※すでに何らかの記述がある方は、それまでの記述を消さずに追記してください。

```js:setting.json
// デフォルトのコード整形を無効化
"editor.formatOnSave": false,

// ESLint 自動フォーマット有効化
"eslint.autoFixOnSave": true,

// ESLint の Vue.js 設定
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
],

// Prettier の ESLint 連携
"prettier.eslintIntegration": true,
```

### 対象のプロジェクトにだけ設定を適応させる

以下の手順で設定を行います。

1. VSCode で対象プロジェクトを開く
2. setting.json を開く
3. 「ワークスペースの設定」で設定を記述する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/04c916e3-b729-1c34-e984-c6aeb4574dc4.png)

ワークスペースの設定を使うことで、各プロジェクトごとに異なる自由な設定を適用できる他、Git を使ってプロジェクトメンバーで共有したりするためにも利用できます。

# 動作確認

![image.png](https://qiita-image-store.s3.amazonaws.com/0/166456/fe1198b7-ef19-bfbc-83d1-c5cd332411af.png)



# 最後にまとめ（再）

行うことは、コマンド実行、VSCode の拡張機能導入、VSCode の設定編集の3つです。

## コマンド
```bash
# Vue CLI 3.0 のインストール
yarn global add @vue/cli
# npm install -g @vue/cli

# Vue プロジェクトの作成（「my-project」のところは自由なプロジェクト名に）
vue init webpack my-project

# 作成したプロジェクトのフォルダに移動
cd my-project

# Prettier の導入
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
# npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
```

## VSCode

### インストールする拡張機能
- Vetur
- ESLint
- Prettier

### ユーザー設定
```js:setting.json
// デフォルトのコード整形を無効化
"editor.formatOnSave": false,

// ESLint 自動フォーマット有効化
"eslint.autoFixOnSave": true,

// ESLint の Vue.js 設定
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
],

// Prettier の ESLint 連携
"prettier.eslintIntegration": true,
```

# もっと詳しく知りたい・設定したい方へ

こちらの記事がおすすめです。投げやりですみません。

- [[VSCode] ESLintとPrettierをVueプロジェクトに適用する](https://t-kojima.github.io/2018/06/22/0018-using-eslint-prettier-in-vue/)
- [Visual Studio CodeでVue.jsアプリケーションの開発環境を構築する](https://qiita.com/rubytomato@github/items/b35b819671e7cbb3dff7)

# 参考記事

## Yarn/npm
- [yarnの使い方](https://qiita.com/senou/items/d939601e32c0005ebfe3)
- [npm入門](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)

## Vue.js
- [Vue.jsの開発体験を次の次元へ CLIが苦手でも使える「Vue CLI」のすすめ](https://logmi.jp/tech/articles/302348)
- [Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)

## Visual Studio Code
- [Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け -](https://qiita.com/hi85/items/eaede5ebb509f21f27f5)
- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234)

## ESLint/Prettier
- [ESLint 最初の一歩](https://qiita.com/mysticatea/items/f523dab04a25f617c87d) の関連プラグイン

## Prettier
- [Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d) の関連プラグイン

## 本題
- [[VSCode] ESLintとPrettierをVueプロジェクトに適用する](https://t-kojima.github.io/2018/06/22/0018-using-eslint-prettier-in-vue/)
- [Visual Studio CodeでVue.jsアプリケーションの開発環境を構築する](https://qiita.com/rubytomato@github/items/b35b819671e7cbb3dff7)