More than 5 years have passed since last update.

Vue.jsのコーディング環境を作成する場合の便利な拡張機能

Last updated at 2019-10-06Posted at 2019-10-06

はじめに

本記事は Vue.js でアプリ開発を行う時に便利な VSCode の拡張機能や JavaScript のライブラリの紹介とその機能の設定方法をまとめてみました。

本記事での内容を実践すると以下のようになります。

VSCode で Vue のコンポーネントを認識できるようになる。

* 結果　→　VSCode で Vue の拡張機能の恩恵を受ける事ができるようなる。
自動的にコードのフォーマット(コード整形)を行うようになる。
* 画像のようにインデントなどが規定通りでないと、赤い波線で表示されるようになる。

* 下の画像のように本記事の設定では保存「 Ctrl ＋ S 」を押下しただけで自動的にフォーマットを行う設定になっております。

<blockquote class="twitter-tweet">
   <a href="https://twitter.com/i/status/1178222958696775680" />
</blockquote>

結果　→　**実装者によってインデントや改行の仕方が違うなどといった事が無くなるので可読性が高くなる**。

コーディングミスの静的解析を行うようになる。
- 画像のようにエラーメッセージがコーディング中に赤い波線で表示されるようになる。
- ちなみに下記のエラーは SubMenyu というコンポーネントを定義していない、という意味です。
結果　→　コーディング中にエラーを検出できるようになり、無駄が少なくなる。
ブラウザで Vue.js で開発したアプリのデバッグが行えるようになる。
* 画像のようにエラーメッセージが表示されるようになる。

結果　→　**Vue.js の専用の拡張機能を使用してデバッグができるので、プロパティやコンポーネントの状態の確認や意図していないバグなどを減らす事ができる**。

［GoogleChrome］ブラウザでのデバッグ

GoogleChrome には Vue.js での開発中にデバッグなどが行える非常に便利な機能が存在するので GoogleChrome での開発を推奨しております。

Vue.js Devtools
Chromeの拡張機能であり、Vue.js のアプリのデータの中身やコンポーネントなどをブラウザで確認できます。
- 利用方法
  1. ブラウザで「F12」もしくは「Ctrl ＋ Shift + I」を押下、もしくは「その他のツール」→「デベロッパーツール」をクリックすると画像のようになります。
    　　　　　
  2. Vue.js Devtools を追加後であれば、Vue が存在するはずなので選択する。
  - 画像の左側がアプリの実行画面。右側がデバッグ画面となっております。
  - デバッグ画面の上部がコンポーネント名となっており、アプリのコンポーネントの状態を確認できます。
  - 中央に各コンポーネントのプロパティやローカル変数などが表示されており、値の中身を確認できます
  - 下部の Console と表示されている箇所に JavaScript の console.log() の結果が表示されるので、デバッグ時に活用すると非常に便利です。
- インストール方法
  - Vue.js Devtools/Chrome ウェブストアから拡張機能として追加することで利用できるようになります。

［VisualStudioCode］統合開発環境

VisualStudioCode(以下VSCodeと略称)はマイクロソフトが提供しているオープンソースのエディタです。

エディタですが、拡張機能などを追加していけば、IDE(統合開発環境)のように使用できるので、Vue.js での開発環境は VSCode を推奨します。

拡張機能

VSCode での拡張機能の追加の方法

詳細

拡張機能の設定変更方法

「ファイル」 => 「基本設定」 => 「設定」を開く
拡張機能タブを押下すると、各拡張機能の設定に移動する。
基本的にオススメの拡張機能の設定などは「setting.json」で設定されているので、「setting.json」を書き換える。

すると下記の画像のように VSCode の右上に表示されているアイコンを押下すると「setting.json」が開く。

以下に Vue.js で開発を行う上で開発が便利になるものを列挙する。

####1. Vetur

Vue.js のComponentを VSCode で認識させるには VSCode の拡張機能である「Vetur」が必要なので開発環境として必須である。

Vue.jsをVSCodeで書く時はVeturを入れてjsconfig.jsonを書こう

####2. EsLint 、EsLint for Vue.js

JavaScript を静的解析し、コンパイル前にエラーを通知してくれる拡張機能。
EsLint は下記のコマンドで使用できるようになる。
```
yarn add eslint eslint-plugin-vue
```
VSCode に拡張機能の EsLint をインストールして設定をすれば、コマンドを打たなくても、コーディング中にコーディングミスを表示してくれる。
1. VSCode の拡張機能で「EsLint」と検索して EsLint をインストールする。

 1. 「settings.json」に下記の項目を追加する。

      ```json:settings.json
      {
          "eslint.validate": [
              "javascript",
              {"autoFix": true, "language": "vue"}
          ]
      }
      ```

 1. 「Prettier」項目の「「.eslintrc.js」を作成するの項目」に従った設定を行う。

####3. Prettier - Code formatter

Prettier はコードのフォーマット(コード整形)を自動的に行ってくれる拡張機能です。

Vue.js のプロジェクトに Prettier を適用させる

現状、js などはPrettierが適用されているが Vue には適用されていないので設定を行う。
下記のコマンドで EsLint の Plugin をインストールする。
```
yarn add prettier eslint-config-prettier eslint-plugin-prettier
```
- eslint-plugin-prettier と eslint-config-prettier は公式のパッケージであり、機能は以下の通りです。
- eslint-plugin-prettier
  - ESLint と一緒に Prettier の機能を利用したい場合に導入する
- eslint-config-prettier:
  - Prettier とバッティングする、ESLint のフォーマット関係のルールを無効化する
対象のプロジェクトファイル配下に「.eslintrc.js」を作成する

.eslintrc.js

    module.exports = {
        root: true
        env: {
            node: true
        },
        extends: [
            'plugin:vue/essential',
            'eslint:recommended',
            'plugin:prettier/recommended' // EsLintとprettierを両方使用する場合に必要な設定
        ],
        plugins: ['vue'],
        rules: {
            // コーディングのルールを設定できる。設定項目に則った内容でエラーが出力されるようになる
            'prettier/prettier': [
            'error',
            {
                semi: true, // 文末にセミコロンを使用するか
                singleQuote: true, // 文字列にシングルコーテーションを使用すか
                trailingComma: 'es5' // es5の記法に従う
            }
            ],
            'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
            'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
        },
        parserOptions: {
            parser: 'babel-eslint'
        }
    };

VSCode 側で VSCode の拡張機能である「Prettier - Code formatter」をインストールする。

setting.json に下記を加える事でファイルの保存時に自動的にフォーマットがかかるように設定できる。

setting.json

    // JavaScriptでのみ保存時フォーマットを有効化
    "[javascript]": {
        "editor.formatOnSave": true
    },
    // prettierのシングルクオーテーションオプションをon
    "prettier.singleQuote" : true,
    // Eslintによって不適切と指摘された箇所をファイルの保存時に自動的にフォーマットする。
    "eslint.autoFixOnSave": true,

その他 Vue.js とは関係ないけど便利な VSCode の拡張機能

1. Japanese Language Pack

その名の通り VSCode の各項目が日本語で表示されるようになる。
* 日本語化設定手順詳細

2. Visual Studio IntelliCode

コーディング中に予測変換の候補が表示されるようになり、tab で入力できるようになる。
Microsoft公式の拡張機能であり、Python、Java、TypeScript、JavaScript に対応している。

3. GitLens — Git supercharged

VSCode には拡張機能を入れなくともデフォルトでGitの機能をGUIで使用できるようになっているが、「GitLens」で更に便利になる。
Git のコミット履歴や差分などを確認できる。ブランチ毎に見る事が可能でどの部分を変更したかファイル単位で見れるため非常に便利。

4. VSCode-icons

下記の画像のように使用する各ファイルにアイコンが付くため、非常に見やすくなる。
ちなみにコンポーネント内にエラーが残っている場合、EsLint の機能でコンポーネント名が赤く表示されて、エラー数が表示されます。

経緯

以下は本環境を導入するにあたった経緯です。

業務で Vue.js を扱ったプロジェクトが立ち上がり、チームで共同開発することになった。
自分は最初 Vue.js の担当者ではなかったが、ある日引き継ぐことが決定した。
引き継いだ結果、前任者の成果物を「Vue.js Devtools」で確認したところエラーが20個程度残ったままだった。
エラー原因を調査して修正した。(ここの修正内容は備忘録として後日別記事に掲載予定です)
エラー修正時に「EsLint」などのインストールを行った。
自分以外に Vue.js のプロジェクトに携わる人員が増えた。
そのお方が「ViVi」でコーディングを行っていた。(拡張機能を入れていない素の ViVi だったので自分はサクラエディタと誤認してしまった)
そのお方がLintやパッケージマネージャの知識に乏しかったため、共同開発を行う上で危機感を感じた。
そのお方が VSCode の存在をご存知なく、新卒2年目の自分が二周りほど年上の方に対してエディタ変更の説得に失敗した。
そのため VSCode の素晴らしさを知って頂くため、Vue.js の環境構築手順書を作成して、どのような知識レベルの実装者がコーディングを行っていても、早期にエラーを発見できるような環境を構築した。