概要
Visual Studio Code（以降VSCodeと表記）でVue.jsを利用したアプリケーションの開発環境を構築したときのメモです。
Node.jsやESLint、Vue.jsはすでにnpmでインストールしているという前提です。またgit操作にGit for Windowsを使用します。
なお、Vue.jsを含めフロントエンド開発について学習中の身のため間違っている点などがあると思いますが、そのときはご指摘いただければ大変助かります。
環境
- Windows 10 Professional
- VSCode 1.22.2
- Node.js 8.11.1
- Vue.js 2.5.16
- vue-cli 2.9.3
参考
VSCodeのインストールと設定
microsoft.com - Visual Studio Codeより、インストーラーをダウンロードしてインストールします。
VSCodeの画面構成
- アクティビティバー (黄)
- エクスプローラー (Ctrl + Shift + E)
- 検索 (Ctrl + Shift + F)
- SCM (Ctrl + Shift + G, G)
- デバッグ (Ctrl + Shift + D)
- 拡張機能 (Ctrl + Shift + X)
- サイドバー (緑)
- Ctrl + Bで切り替え
- パネル? (青)
- パネルという名称かは不確かです
- Ctrl + Jで切り替え
- 出力 (Ctrl + Shift + U)
- 問題 (Ctrl + Shift + M)
- デバッグコンソール (Ctrl + Shift + Y)
- ターミナル (Ctrl + @)
エディタ
エディタの右上に表示されているのはソースコード全体のミニマップです。
エディタで半角スペースやタブを表示（または非表示）するには、コマンドパレットを開き"white"と入力し、"空白文字の表示の切り替え"を選択します。
表示したときの状態です。・が半角スペース、→がタブを表しています。なお、文字コードや改行コードはステータスバーに表示されています。
拡張機能
デフォルトで多くの拡張機能がビルトインされていますが、追加でVue.jsアプリケーションの開発に便利な拡張機能をマーケットプレイスよりインストールしました。
ビルトインされている拡張機能
ビルトインされている拡張機能を確認するには、アクティビティバーの「拡張機能」を開き（Ctrl + Shift + X）検索フィールドに@builtinと入力して検索します。
追加でインストールした拡張機能
"Npm support for VSCode"という拡張機能がビルトインされていますが、これより高機能な拡張機能「npm」をインストールしました。
インストールするとコードパレットでnpm scriptsの実行やのpackage.jsonのバリデーションができるようになります。
Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットが使えるようになる「Vetur」をインストールしました。
リンターに「ESLint」をインストールしました。
vue initコマンドでVue.jsのプロジェクトのひな型を作成するときにESLintを有効にすると、自動的に.eslintrc.jsファイルと.eslintignoreファイルが作成されます。
Vue.jsのフォーマッター（Veturのフォーマットが依存している）に「Prettier」をインストールしました。
"Git integration for Visual Studio Code"という拡張機能がビルトインされているので、デフォルトでも基本的なgitコマンドを実行できますが、「GitLens」をインストールするとcommit間の差分が簡単に確認できるようになるのでインストールしました。
もっとも学習中で一人でプロジェクトを扱う場合はあまり利用することはないかもしれません。
デフォルトでmarkdownファイルのプレビューはできますが、「markdownlint」をインストールすると更にmarkdownファイルのバリデーションができるようなるのでインストールしました。
インストールすると対になるブラケットを色で識別できるようになります。
便利そうなのでインストールしましたが、残念ながら.vueファイルには対応していないようです。
Japanese Language Pack for Visual Studio Code
2018/05/11に追記。
VSCodeを起動すると次のようなダイアログに日本語言語パックをインストールするようにとメッセージが表示されたのでインストールしました。
2018/05/11に追記。
VSCodeでVue.jsアプリケーションをデバッグできるようにするためにインストールしました。
デバッグの設定などは後述しています。
Vue.jsを利用したデモアプリケーション
ひな型を生成する
VSCode上からはひな型を生成できないようなので、vue-cliのvueコマンドで生成します。
まず、利用できるオフィシャルテンプレートを確認します。
> vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
vue initコマンドでテンプレートにwebpackを使用するひな型を生成しました。
> vue init webpack exercise-vue
? Project name exercise-vue
? Project description A Vue.js project
? Author rubytomato <mail address>
? Vue build standalone
? Install vue-router? Yes
? 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
vue-cli · Generated "exercise-vue".
// ...省略...
# Project initialization finished!
# ========================
To get started:
cd exercise-vue
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
ESLintの使用
ひな型を作成する途中でESLintを使用するかどうかの選択肢があり、Yesにすると次にESLint presetの選択肢が出てきます。
選択できる項目(↑、↓でカーソル移動できます)はStandard、Airbnb、noneの3つで、この記事ではStandardを選択しています。
? Use ESLint to lint your code? Yes
? Pick an ESLint preset
> Standard (https://github.com/standard/standard)
Airbnb (https://github.com/airbnb/javascript)
none (configure it yourself)
Standard
ここで選択するStandardとは、JavaScript Standard Styleのことで名前にStandardと付いているのでJavaScript(ECMAScript)の標準ルールだと思うかもしれませんが、いくつもあるJavaScriptのスタイルガイドの1つです。
このスタイルの大きな特徴（ルール）には、インデントは2スペース、文字列をシングルクォートで囲む、セミコロンを使わない、関数名の後にスペースを入れる等があります。詳しくは上記のリンク先のページで確認できます。
.eslintrc.js
下記はひな型を生成した直後の.eslintrc.jsの内容です。
ESLintにはShareable Configs (共有設定)という機能があり、npmモジュールとして公開されているESLintの設定をextendsで適用させることができます。
この.eslintrc.jsで利用している共有設定は次の2つで、1つ目はVue.jsの設定、2つ目はひな型作成時に選択したStandardスタイルガイドの設定です。
- 'plugin:vue/essential'
- 'standard'
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}
}
またrulesで、extendsで適用する共有設定の上書きや新しいルールの追加を行うことができます。
この.eslintrc.jsの例ではstandardのデフォルトルールの上書きを行っています。
{
"generator-star-spacing": [
"error",
{
"before": true,
"after": true
}
],
"no-debugger": "error",
}
VSCodeでプロジェクトを開く
生成したひな型のプロジェクトを開きます。
メニューバーの「ファイル(F)」→「フォルダーを開く(F)...」でプロジェクトのフォルダを選択します。
直後の状態
ワークスペースの設定 (settings.json)
ユーザー設定で変更するとすべてのプロジェクトで有効になってしまうため、ワークスペースの設定で変更を行いました。
ユーザー設定を開き（Ctrl + ,）、ワークスペースの設定に切り替えてから下記の設定を変更しました。
デフォルトの改行コード
"files.eol": "\r\n",
- デフォルトの改行コードをCRLF(\r\n)からLF(\n)に変更
"files.eol": "\n",
prettierとESLintの統合
まずprettierとprettier-eslintをインストールします。
> npm install prettier prettier-eslint --save-dev
"prettier.eslintIntegration": false,
- prettierとESLintの統合を有効にする
"prettier.eslintIntegration": true,
Vue.js用のフォーマッター
"prettier.semi": true,
"prettier.singleQuote": false,
"vetur.format.defaultFormatter.js": "prettier",
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"typescript.format.insertSpaceBeforeFunctionParenthesis": false,
この設定はprettierのフォーマットをstandardスタイルガイドに合わせるための設定です。
ただし、functionの括弧(Parenthesis)の前にスペースを挿入という部分はprettierで設定できないようなので、フォーマッターを"prettier"から"vs-code-typescript"に変えています。
- 行末のセミコロンを不要
- シングルクォートを使用
- functionの括弧(Parenthesis)の前にスペースを挿入
"prettier.semi": false,
"prettier.singleQuote": true,
// フォーマッターをvscode-typescriptに変更
"vetur.format.defaultFormatter.js": "vscode-typescript",
// この設定はprettierではなくtypescriptのものです
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
Veturのリント、エラーチェックを有効にする
"eslint.validate": [
"javascript",
"javascriptreact"
]
- vueファイルにリント、エラーチェックを行う
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
]
保存時にフォーマットする
保存時以外にもペースト時、タイプ時にもフォーマットできますが、今回は保存時だけにしました。
"editor.formatOnPaste": false,
"editor.formatOnSave": false,
"editor.formatOnType": false,
(2018/04/25) 下記に訂正しました。
formatOnSaveだとうまくフォーマットできなかったのでautoFixOnSaveに訂正しました。
"eslint.autoFixOnSave": false,
- ファイル保存時にフォーマットする
"eslint.autoFixOnSave": true,
git
この操作はgitクライアント(Git for Windows)で行いました。
ターミナルを開き（Ctrl + @）以下のgitコマンドでプロジェクトをgitリポジトリ化しました。
> git init
> git add .
> git commit -m "first commit"
> git remote add origin git@github.com:rubytomato/exercise-vue.git
> git push -u origin master
ソース管理
ソース管理では、変更のあるファイル一覧が表示されるほか、ステージング(git add)、リバート(git revert)、コミット(git commit)、およびファイルをクリックすると差分を確認することができます。
さらにファイルを右クリックしてコンテキストメニューからヒストリの表示、スタッシュ、コンペアなどが可能です。
インラインdiff
コードを修正すると、行番号の隣に色が付きます。
色をクリックすると、その範囲のdiffを表示してくれます。
コミットメッセージのテンプレート
gitコマンドでコミットメッセージのテンプレートを設定すると、その内容がVSCodeにも反映されます。
> git config --global commit.template ~/.gitmessage.txt
テンプレートが登録されているかは.gitconfigファイルを確認するか以下のコマンドで確認できます。
> git config --get commit.template
テンプレートを登録していると、下図のようにVSCodeのコミットメッセージ欄に反映されます。
GitLens
GitLensをインストールしているので、エクスプローラーのサイドバーに「GITLENS」というメニューが追加されています。
- 2018/05のバージョンアップで、GITLENSの表示位置がエクスプローラーからソース管理へ移動しています。
また、エディタ上ではカレント行上に直前のコミット情報が（薄い色で）表示され
カーソルを合わせるとポップアップメニューが表示されます。
アイコンの"Open Changes"をクリックするとVSCode上でdiffを表示、"Open in Remote"をクリックするとGithub上でdiffを表示します。
この表示が煩わしい場合は、ユーザー設定で無効にすることができます。
- 2018/05のバージョンアップでカレント行上の情報表示とポップアップ表示の挙動が変わっています。
- カレント行上の情報表示は、コマンドパレット(Ctrl + Shift + P)の"GitLens: Toggle Line Blame Annotations"で切り替えられます。
- ポップアップ表示は、コマンドパレット(Ctrl + Shift + P)の"GitLnes: Switch Mode"で切り替えられます。
- Zen Mode : 非表示
- Preview Mode : 表示
ビルドの実行
ビルドの仕方を確認しました。
コマンドパレットを開いて（Ctrl + Shift + P）"npm"と入力し候補から"npm: Run Script"を選択
さらに"biuld"を選択します。
webpack-dev-serverの起動
コマンドパレットを開いて（Ctrl + Shift + P）"npm"と入力し候補から"npm: Start"を選択
ターミナルが開き、webpack-dev-serverが起動します。
webpack-dev-serverを起動した状態でソースコードを変更すると、ファイルを保存したタイミングで変更を反映してくれます。
また、ソースコードにエラーがあった場合はその原因がコンソールに出力されます。
eslint-plugin-vue
Vue.jsのオフィシャルなESLintプラグインです。
プロジェクトのひな型を作成する際にESLintを有効にすると、eslint-plugin-vueモジュールもインストールされ、.eslintrcファイルのextentdにこのプラグインの共有設定plugin:vue/essentialが適用されます。
コメント行にもあるようによりルールの厳しいplugin:vue/strongly-recommendedやplugin:vue/recommendedもあります。
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
]
このモジュールがインストールされているとVue.jsに関するコーディングエラー(ESLintのルール違反)を教えてくれます。
たとえば、以下のようなv-forを記述すると、vue/require-v-for-keyルールに違反していること及びv-bind:keyが必要であることがわかります。
ちなみに、vue/require-v-for-keyルールは.eslintrcファイルのextendsに指定したplugin:vue/essential共有設定に含まれているルールです。
修正後は下図のようになります。
ルールの上書きまたは追加
.eslintrcファイルのextendsに指定した共有設定は複数のルールの集合です。共有設定にどのようなルールが含まれているかはvuejs/eslint-plugin-vueで確認できます。
既定のルールの設定を上書きしたり、新しいルールを追加するには.eslintrcファイルのrulesに記述します。
以下の設定はvue/html-self-closingルールを追加している例です。
rules: {
'vue/html-self-closing': [
'error',
{
html: {
void: 'never',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
このルールを適用すると、以下の記述はエラーになります。
なお、void要素とは<br>,<hr>,<img>,<input>などの終了タグが不要なタグのことです。
<br/> <!-- void要素の自己終了タグはエラー -->
<div></div> <!-- 空の要素はエラー -->
<MyComponent></MyComponent> <!-- 空のコンポーネントはエラー -->
エラーを修正するには以下のように記述します。
<br>
<div/>
<MyComponent/>
Vue.jsのスタイルガイド
Vue.jsにはVue.js固有のコーディングに対する公式のスタイルガイドがあります。
もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。
上記のvue/html-self-closingルールは、スタイルガイドの自己終了形式のコンポーネントに対するルールと言えます。
自己終了形式のコンポーネントは、単に中身を持たないというだけでなく、中身を持たないことを意図したものだということをはっきりと表現します。
VSCodeでVue.jsアプリケーションをデバッグする
デバッグ方法にはいくつか種類があるようですが、Microsoft/vscode-recipes - GitHubのDebugging Vue.js appsを参考にしました。
デバッグにはDebugger for Chromeが必要になるので事前にインストールしておきます。
webpackの設定を変更
config/index.jsのdevとbuildのdevtoolプロパティを下記ように変更します。
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// ...省略...
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
// devtool: 'cheap-module-eval-source-map',
// ↓ change to
devtool: 'source-map',
// ...省略...
},
build: {
// ...省略...
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
// devtool: '#source-map',
// ↓ change to
devtool: 'source-map',
// ...省略...
}
}
デバッグの設定 (launch.json)
アクティビティバーのデバッグをクリックし、デバッグビューの上部にあるメニューから「構成を追加...」を選択します。
launch.jsonファイルが開くので、下図のように"Chrome Launch"を選択して構成を追加します。
launch.jsonを下記のように編集します。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
デバッグの開始
ソースファイルを開き任意のコードにブレークポイントを設定します。（この例ではHelloWorld.vueの98行目のコードに設定しました。）
ターミナルからアプリケーションを起動します。
> npm start
アプリケーションが起動したらデバッグビューで"Launch Chrome"(launch.jsonのnameに付けた名前です)を選択した状態で「デバッグの開始」ボタンをクリックします。
chromeが起動しブレークポイントで処理が停止します。画面上部に表示されるダイアログで、続行(F5)、ステップオーバー(F10)、ステップイン(F11)、ステップアウト(F12)、再起動(Ctrl + Shift + F5)、停止(Shift + F5)などの操作が行えます。
まとめ
以上で必要最低限の開発環境が整えられたと思いますが、この環境で開発を進めていくと足りない点がでてくるかなと思っています。
また、勉強をはじめたばかりなのでまだまだ分からない点が多く、とくにESLintとprettierの役割の違いなどはよく理解できていません。
補足
ESLintとPrettierの併用について
これらを併用する場合、コードフォーマットにPrettierを使用し、コードチェックにESLintを使用するというように使い分けをするようです。併用方法は大きく分けると次の2通りがあります。
ESLintからPrettierを呼び出す方法
以下のESLintプラグインを利用します。
Prettier、ESLintの順で実行する方法
この記事ではVSCodeのprettier-vscodeプラグインを利用しているのでこちらの方法を利用しています。
リント、フォーマットが効かない現象
この環境でvueファイル（単一ファイルコンポーネント）の開発を行っていた時に、あるvueファイルだけリント、フォーマットが効かない現象が起きました。
具体的にはscript部分のコードがインデントされない、文字列をダブルクォーテーションで囲んでもエラーにならないという現象です。
調べたところ（確証はないのですが）template部分でhtmlタグの書き方にリントエラーとなる箇所があると、script部分のリント、フォーマットが行われないようです。
html部分のリントエラーは開発サーバーを動かしていると、下記のようにコンソールにエラーが出力されるので気づきやすいのですが、今回は新規のコンポーネントでアプリケーションに組み込んでいなかったため気づきにくかったです。
ERROR Failed to compile with 1 errors
error in ./src/components/MemoForm.vue
(Emitted value instead of an instance of Error)
Error compiling template:
// ...省略...
- tag <textarea> has no matching end tag.
- tag <div> has no matching end tag.
- tag <div> has no matching end tag.
ちょっと便利なTips
htmlのコード補完 (Emmet)
div.rowと入力してENTERを押すと<div class="row"></div>に補完してくれます。
また、.(ドット)を#にしてdiv#appと入力すると<div id="app"></div>にしてくれます。
このような記法はEmmetというツールの機能で、VSCodeはデフォルトでEmmetの機能が使えます。(Emmet in Visual Studio Code)
その他に、ul>liのように>で親子関係、*3のように*{数値}で要素数を指定
h1+pのように+で複数のタグを指定
などの補完ができます。
表示言語の変更
VSCodeのメニューやメッセージはデフォルトで日本語化されていますが、英語などの別の言語に変更するにはコマンドパレット(Ctrl + Shift + P)を開き、Configure Languageを選択します。
エディタでlocale.jsonファイルのlocaleを変更して再起動します。
便利な拡張機能、テーマ
あとから追加でインストールした拡張機能、テーマです。
Version Lens
依存モジュールのバージョン情報が簡単に確認できます。
拡張機能の適用前
適用すると下のSSのようにバージョン情報が表示され、バージョンをクリックするとそのバージョンでpackage.jsonを更新します。
Markdown Preview Mermaid Support
Markdown Preview Mermaid Supportは、mermaid記法で書かれたダイアグラムをMarkdownのプレビューで表示できる拡張機能です。
下図はmermaidで紹介されているサンプルをこの拡張機能でプレビューしたものです。
Numbered Bookmarks
ソースコードにブックマークを付けることができる拡張機能です。
ブックマークするとショートカットキーでその位置へジャンプすることができます。
ブックマークは1ファイル毎にショートカットキーCtrl + Shift + 1からCtrl + Shift + 9で9箇所まで付けることができます。
ブックマーク位置へのジャンプはCtrl + 1からCtrl + 9です。
ソースファイル間でジャンプする場合はコマンドパレットCtrl + Shift + Pで"num"と入力し、サジェストから"Numberd Bookmarks: List from All Files"を選択し、ジャンプしたいブックマークを選びます。
左端の数値が行番号で、違うファイルのブックマークは下にファイル名が表示されます。
Cobalt2 Theme Official
Cobalt2 Theme Officialというカラーテーマがあったので使ってみました。上のSSがCobalt2というカラーテーマのもので、下のSSがデフォルトのDark+のものです。
Dark+より若干明るい感じで視認性が良かったです。
Cobalt2
Dark+ (default)
