Index

Summary

以前書いた記事「Visual Studio Code でCakePHP3開発環境を構築する」でPHP関連の機能拡張を行ったので、それ以外の環境構築をしていきます。
Windows10 , VSCode 1.13.1 を前提としています。

使用した資材一覧

Git 関連

資材	バージョン	補足
Git	2.13.0	バージョン管理ツール
gitignore	0.5.0	.gitignore を設定してくれる
Git History(git log)	0.2.0	History を表示する
Git Blame	1.11.3	カーソル行のコミッターを表示する
Annotator	0.10.1	開いているファイルの、各行のコミッターを表示する

エディタ基本機能関連

資材	バージョン	補足
Code Runner	0.6.21	様々な言語のコードを、その場で実行してくれる
Settings Sync	2.8.1	VSCode 設定を同期させる
Project Manager	0.18.1	プロジェクトが切り替え易くなる
Terminal	0.0.8	プロジェクトルートでターミナルを開いてくれる

エディタ趣味関連

資材	バージョン	補足
One Dark Pro	2.8.6	テーマを着せ替える
vscode-icons	7.9.0	エクスプローラーのアイコンを着せ替える
Bracket Pair Colorizer	0.10.7	括弧のペア毎に、色が変わる
amVim	1.23.1	vim に近い操作が出来る様になる

Markdown 関連

資材	バージョン	補足
Markdown PDF	0.1.7	Markdown を簡単に PDF にしてくれます
Markdown TOC	1.5.5	TOC です
Markdown+Math	1.2.9	Math です
Table Formatter	1.1.2	Table を整形してくれます
Open	0.1.0	拡張子に紐づくアプリでファイルを開きます
PlantUML	1.8.0	UML を Markdown 的に書ける

HTML, CSS 関連

資材	バージョン	補足
Beautify	1.1.1	Save時に、ソースコードを綺麗にフォーマットしてくれる
HTMLHint	0.3.3	構文チェックをしてくれる
HTML Snippets	0.1.0	タグ打ちが、とても楽になる
HTML CSS Support	0.1.7	class, id 候補をリストアップしてくれる
Path Intellisense	1.4.2	href など、パス候補をリストアップしてくれる
Auto Close Tag	0.4.2	閉じタグを自動で付与してくれる
Auto Rename Tag	0.0.13	タグ名を変えると、対のタグ名も自動で変えてくれる

JavaScript関連

資材	バージョン	補足
ESLint	1.2.11	静的解析ツール
Debugger for Chrome	3.1.4	デバッガ

Git

既にインストール済みの場合は、バージョンに注意してください。古いと、Git Blame が動かないなどの問題が生じることがあります。

https://git-scm.com/

上記サイトから、最新版をダウンロードして、インストールします。途中、ウィザードで Configuring the line ending conversions 画面になりますので、「Checkout as-is, commit Unix-style line endings」か「Checkout as-is, commit as-is」のどちらかを選択します。これは、「Visual Studio Code でPHP7開発環境を構築する」で、VS Code で用いる改行コードを LF に設定したことと関係しています。CRLFでコミットする危険がある様なら、前者を選択します。

インストールが終わったら、基本は、リモートリポジトリからクローンしてローカルリポジトリを作成し、それを、VS Code にドラッグ＆ドロップする感じになります。

これで、VS Code からコミットやリモートへのプッシュなどが行える様になります。

gitignore

名前の通り、.gitignore をお手軽に、自動で設定してくれる拡張機能です。インストール後、コマンドパレットで「add gitignore」を選択すると、対応している言語・フレームワークがリストアップされるので、必要なものを選択します。全自動というよりは、初期設定を自動でやってくれるので、後は手作業でチューニングする感じです。

CakePHPの場合、Version2,3 が混在した .gitignore になるので、不要なバージョンの定義部分を削除します。

Git History

名前の通り、history を表示してくれる拡張機能です。インストール後、コマンドパレットで「Git: View History (git log)」を選択すると、ヒストリーが表示されます。

Git Blame

名前の通り、blame を表示してくれる拡張機能です。インストールすると、VS Code で表示しているソースコードの、カレント行に関するコミッター情報が、ステータスバーに表示される様になります。

カレント行を、誰が最後に更新したのか、何の目的で更新したのか、といったことがパッと分かって便利です。

Annotator

Git Blame が、カレント行のコミッター情報を表示するのに対し、Annotator は、ソースコード各行のコミッター情報を全部表示します。

Code Runner

VS Code で表示しているソースコードの選択行をコマンドラインで即実行してくれる拡張機能です。REPL的な感覚で、手軽にコード断片を実験することができます。デバッグモードで実行することで、ブレークポイントが効き、ステップ実行も可能です。

Java, JavaScript, PHP, Python, Perl, Ruby などなど、多くの言語に対応しています。

Settings Sync

複数のマシンで設定を同期したい場合に使える拡張機能です。
GitHub Gist で、extensions.json, keybindings.json, settings.json などの変更を管理します。

コマンドパレットで「Sync: Update / Upload settings」を選択し、Gist に設定情報をアップロードします。
同じく、「Sync: Download settings」で、Gist から設定情報をダウンロードします。

複数台のマシンを使っている私にとっては、必須ともいえる便利機能です。

Project Manager

プロジェクトを、簡単に切り替えることが出来る様になる拡張機能です。

コマンドパレットで「Project Manager: Save Project」を選択し、プロジェクトに名前をつけて保存します。すると、ステータスバーに、現在開いているプロジェクト名が表示される様になります。

プロジェクト名をクリックするとコマンドパレットが開き、保存済みのプロジェクトがリストアップされるので、開きたいプロジェクトを選択して切り替えます。（別ウインドウで、プロジェクトが開きます）

これも、私にとって、必須の機能です。

Terminal

ターミナルを開いたときに、プロジェクトルートをカレントとして開いてくれます。それだけなんですけど、便利です。

私は、ターミナルとして PowerShell を使っているのですが、UTF-8 のファイルを扱うことが殆どのため、settings.json に以下の設定を入れています。

"terminal.integrated.shellArgs.windows": ["-NoExit", "/c", "chcp.com 65001"],
"terminal.integrated.fontFamily": "'Myrica M'",

これで、ターミナルを開くたびに、chcp 65001 と打たなくても UTF-8 になります。

また、フォントは勿論お好みなんですが、私は、ソースコードは Han Code JP が一番見易いと思っています。でも、ターミナルや Markdown では、半角:全角が 1:2 の Myrica M を使っています。

One Dark Pro

テーマは色々あるので、好みのものをインストールすれば良いと思います。

私は、One Dark Pro でほぼ不満ないのですが、カレント行の背景色や markdown の引用の文字色など、少しカスタマイズして使っています。

vscode-icons

エクスプローラーのアイコンを着せ替えます。好みのものをインストールすれば良いと思います。

Bracket Pair Colorizer

括弧のペア毎に、色を変えて表示する拡張機能です。
何重にも括弧で囲われているソースコードが、少し見易くなります。お好みでどうぞ。

amVim

VSCode を、vim風にしてくれる拡張機能として、Vim と amVim があります。Vim の方が対応度が高いのですが、VSCode の機能を使わずに独自実装しているところがあり、惜しい感じがします。例えば、Undo が内部的に実装されているため、Vim で Undo しても、VSCode はそれを認識していなかったりします。また、全角で入力する際に、カーソル位置が不自然な感じになってしまうところも残念です。

amVim は、:w に対応していないなど、対応度は劣ります。でも、変に拘って内部実装するのではなく、undo など VSCode が持っている機能はそのまま使う感じになっているので、私は、amVim の方がストレスなく使えます。

Markdown PDF

名前通り、Markdown を簡単に PDF に変換してくれる拡張機能です。私は、仕様書作成や技術解説など、仕事で作成するドキュメントの殆どでこれを使っています。

少し残念なのは、```java:Hoge.java の :Hoge.java を認識してくれないところです。でもこれは、markdownit を使っているので仕方ない感じです。

PDF の場合、改ページを気にする必要があるため、CSS で制御するのですが、page-break-after: avoid; が効かないため、改ページさせたくない場所には、page-break-inside: avoid; を使うことになります。```java:Hoge.java と書いたときに、Hoge.java を PRE タグの中に表示させ、PRE を page-break-inside: avoid; 指定したいがために、私は、少しカスタマイズして使っています。

それと、writing-mode: vertical-rl; など縦書き指定も、HTML で見るとちゃんと縦書きになるのですが、PDF にすると文字が横向きになってしまいます。これも、非常に残念です。

もう1点、これは issue にも載ってますが、解像度の高いモニタで PDF 化すると、文字が小さくなってしまう現象があります。私は、これのために CSS を環境で切り替えて使っています。改善を期待します。

Markdown TOC

TOC を表示する拡張機能はいくつかありますが、これが一番だと思っています。文章毎に、TOC に表示するレベルを設定できるのは、今のところこれだけだと思います。

自動でナンバリングしてくれる機能も大変便利です。少し残念なのは、TOC に表示させない設定にしているレベルにも、ナンバリングしてしまうところです。惜しいです。

Markdown+Math

Markdown で数式を扱うなら、これですね。

Table Formatter

Markdown の Table を整形してくれます。私は、PDF 化する以外、いちいちプレビューなどしないので、素の Markdown ソースで表が整形されて見えるのは、やはり見易いです。セーブ時に自動で整形してくれるオプションがあると嬉しいのですが、今後のバージョンアップに期待です。

Open

拡張子に紐づいたアプリで、ファイルを開いてくれる拡張機能です。私は、PDF や HTML を開くのに、これを使っています。

当初、vscode-pdf を使って、PDF を開いていたのですが、解像度の高いモニタで見ると？？、表示にすごく時間がかかるため、Open に切り替えました。

PlantUML

これは、Markdown 的なノリで UML をテキストで記述できる拡張機能です。かなり便利です。幾つかある同様の拡張機能の中では、これが一番だと思います。あとは、Math の様に Markdown の中で書けると、とっても嬉しい感じですが、今後に期待しましょう。

色合いが、Rational Rose を思い出させてくれるところが、なんか、懐かしいです。

Beautify

HTML, CSS, JavaScript, JSON などのソースコードを、保存時に整形してくれる拡張機能です。
VS Code 標準機能では整形してくれないファイル（CSS など）も、綺麗に整形してくれます。

HTMLHint

HTML の構文チェッカーです。必須属性の入力漏れなどを指摘してくれます。

HTML Snippets

タグ打ちが、とても早くなる拡張機能です。タグ名を打ち込むだけなので、変な略称など覚える必要がなく、簡単に始められます。

HTML CSS Support

HTML で class や id を記述するときに、CSS を見なくてもクラス名や ID名の候補をリストアップしてくれる拡張機能です。

class="" の ” と ” の間にカーソルを置き、Ctrl+Space でクラス候補をリストアップしてくれます。

Path Intellisense

ファイルのパス候補をリストアップしてくれる拡張機能です。

href="" の ” と ” の間にカーソルを置き、href="css/" まで入力すると、CSSフォルダ配下のフォルダやファイルをリストアップしてくれます。

Auto Close Tag

開きタグを入力すると、自動的に閉じタグを補完してくれる拡張機能です。HTML Snippets を使っている場合、HTML タグ打ちでは、あまり出番はないかも知れません。

Auto Rename Tag

タグ名を変更すると、対になるタグの名称も同時に変更してくれる拡張機能です。

ESLint

JavaScript の静的解析ツールです。

Debugger for Chrome

JavaScript のデバッガです。

2017年5月5日金曜日

Visual Studio Code に拡張機能をインストールする