はじめに
このコースでは、Visual Studio Code（VS Code）の使い方の基礎を学びます。Visual Studio Codeは、HTMLやCSS、JavaScript、PHPなどさまざまなプログラミング言語に対応したコードエディタです。
このコースを終了すると、Visual Studio Codeの環境設定とカスタマイズが完了しますので、すぐにコーディングを行うことができます。
コードエディタがなんだかわからない人も、ぜひ触れてみてください！
関連リンク
Documentation for Visual Studio Code
Visual Studio Codeでできること
まずはインストール
まずはアプリをインストールしましょう。「Visual Studio Code」は、Microsoftが開発している、無料で使えるアプリです。
こちらのページから「Visual Studio Code」をインストールします。名前が似ていますが、ブルーの「Visual Studio Code」をダウンロードしてください。
Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコード エディター
もしくは、Visual Studio Code単体のページもあるので、そちらのリンクも貼っておきます。
「コードを Azure に簡単にデプロイできる統合ツールを備えた強力で軽量な無料コード エディター」ちょっと何言ってるのかわかりませんね。
Visual Studio Code – コード エディター | Microsoft Azure
Macの場合は、ダウンロードしたZipファイルを解凍して「Visual Studio Code.app」をアプリケーションフォルダに移動します。さらに、よく使うアプリなのでDockに追加しておきましょう。
Visual Studio Codeでできること
「Visual Studio Code」はコードエディタです。テキストエディタとコードエディタの違いですが、テキストエディタは基本的にはテキストを打つもの、コードエディタはコーディングに適しているものです。
たとえば、左はHTMLファイルをテキストエディタで開いたものですが、右は、同じファイルをコードエディタで開いたものです。このようにHTMLのタグや、属性、値などが色分けされていて見やすいです。また、テキストを入力すると、最適な内容を推測してコードが自動補完されます。
さらに、コードエディタは、自分が使いやすいようにカスタマイズしたり、プラグインをインストールして、Web制作に適した機能を拡張していくことができます。
もっと高機能なエディタは「統合開発環境」や「IDE（Integrated Development Environment）」と呼ばれます。さっきのダウンロードのページにあった「Visual Studio」がまさしくIDEです。
エディタ選び
これまで数年ごとにコードエディタの流行が変わっています。
これまでにあった、Brackets、Coda、Atomはすでに開発が終了しました。Sublime Textは時代を作り上げてくれたすばらしいコードエディタですが、いまは「Visual Studio Code」が勢いがあってシェアを伸ばしています。
「Visual Studio Code」は、「VS Code」と略されるので、このコースを受講したあとは、「あ、VS Codeね。アレやっぱりいま一番イケてるよね」と、積極的にイキっていきましょう。
これまで他のコードエディタを使ったことがある人であれば、ほとんど同じ感覚でVS Codeを使えるかと思います。逆に、今後もエディタの流行が変わった場合にも、スキルの応用ができるということです。
Visual Studio Codeの初期設定と画面構成
VS Codeをインストールしたら、日本語化パックの拡張機能をインストールして、日本語化します。
1番左のアクティビティバーから「Extensions」タブをクリックして、Marketplaceの検索エリアを選択します。
「Japan」と入力すると「Japanese Language Pack for Visual Studio Code」が出てくるので、「Install」ボタンをクリックして、VS Codeを再起動します。もし「Uninstall」が表示されていたら、すでに日本語化パックがインストールされているので、同じくVS Codeを再起動してください。
メニューが日本語化されました。次に、画面の構成をみていきます。
- アクティビティバー
- サイドバー
- エディタ
- パネル
- ステータスバー
- セカンダリ サイドバー
これらは右上のボタンから表示/非表示の切り替えができます。
ざっくりと説明すると、アクティビティバーで選択したものがサイドバーに表示されて、そのサイドバーから開いたファイルがエディタに表示されます。そして、エディタのエラーや出力結果がパネルに表示されます。ステータスバーには、エディタの情報や言語モード、エラーの通知が表示されます。
ステータスバーから、言語モードを「HTML」にすると、HTMLに適した表示になります。文字化けしている場合は、エンコードを変更して解消することもできます。あんまり最近は激しい文字化けを見なくなりましたが、ちょっと古いファイルで「Shift-JIS」を「UTF-8」で開いてしまうと文字化けします。
関連リンク
Visual Studio Code User Interface
Visual Studio Codeの基本的な使い方
Webサイト制作では、単一のファイルではなく、複数のファイルがお互いに関連しあっていることが多いです。なので、VS Code上でそれら複数のファイルを制御した方が、効率的に作業を進めることができます。
メニューバーの「ファイル」から「フォルダーを開く」を選択します。もしくは、サイドバーにフォルダをドラッグします。
アラートが表示されますが、悪意のないファイルなので「ファイルの作成者を信頼する」を選んでください。
フォルダ内にあるすべてのファイルが読み込まれたので、このサイドバーからファイルを開くことができます。ダブルクリックか、エディタにドラッグします。サイドバーのボタンから新規ファイル、新規フォルダの作成ができます。あるはずのファイルが表示されていない場合は、再読み込みボタンを押してみてください。
複数のタブを開いた状態で「⌃Control + Tab」でタブの切り替えができます。タブを掴んでドラッグして、左右か上下に分割することもできます。
テキスト量が多いファイルの場合、この「MiniMap」でファイル全体を確認できるので便利です。「エディタを右に分割ボタン」をクリックすると、いまアクティブになっているファイルがもうひとつ、右に分割されて開きます。同じファイルを左右で開いて編集することができます。
もしくは、異なるファイルを左右に分割して開くこともできます。エクスプローラービューからドラッグするか、タブで開いているファイルをドラッグすると左右に分割して開くことができます。たとえば左にHTML、右にCSSのファイルを開いて作業を行うことができます。
メニューバーの「表示」の「外観」に「Zen Mode」がありますが、これは書くことに集中できるモードです。VS Code以外でも、よくエディタ界隈にはこんな「Zen Mode」のカルチャーがあります。
関連リンク
Documentation for Visual Studio Code
Visual Studio Codeで編集する
テキストの編集やコーディングに使える、VS Codeの便利な操作方法です。
ファイル内の同じテキストを選択したり、カーソルを複数の場所に置いたり、テキストを上下入れ替えることができます。
同じテキストを追加選択する
- Mac｜⌘command + D
- Windows｜Ctrl + D
これは本当に便利です。ベースとなるテキストを選択してから「⌘command + D」を押すたびに、同じテキストが追加で選択されていきます。複数のテキストをまとめて選択して、そのまま編集できます。
ファイル内の同じテキストをすべて選択する
- Mac｜⇧shift + ⌘command + L
- Windows｜Shift + Ctrl + L
さらに、ベースとなるテキストを選択した状態で、同じテキストをすべて選択できます。
カーソルを複数の場所に置く（マルチカーソル）
-
Mac｜⌥option + クリック
-
Mac｜⌥option + ⌘command + 矢印キー↑↓
-
Windows｜Alt + クリック
-
Windows｜Alt + Ctrl + 矢印キー↑↓
カーソルを複数の場所に置くことができます。
いくつかの場所に、まとめて同じテキストを追加する時などに使えます。
行単位でテキストを移動する
- Mac｜⌥option + 矢印キー↑↓
- Windows｜Alt + 矢印キー↑↓
コピペや削除をすることなく、テキストを瞬時に上下入れ替えることができます。
行単位でテキストを複製する
- Mac｜⇧shift + ⌥option + 矢印キー↑↓
- Windows｜Shift + Alt + 矢印キー↑↓
コピペすることなく、テキストをさくさく複製できます。
さらに実践的な内容へ
まだ他にも便利なショートカットがありますが、これだけでもコードエディタのすばらしさが分かってもらえたかと思います。
さらにもう少しだけ、実践的な内容に踏み込んでいきます。
2つのファイルの差分を確認
2つのファイルの差分を確認することができます。たとえば修正前と修正後のファイルとで、どこが変わったかを確認するときに使います。エクスプローラービューで2つのファイルを、「⇧shiftキー」か「⌘commandキー」を押しながら選択して、右クリックか「⌃Control + クリック」して「選択項目の比較」を選びます。
2つのファイルの差分箇所はこのように表示されます。
検索と置換、正規表現
-
Mac｜⌘command + F
-
Mac｜⌘command + ⌥option + F
-
Windows｜Ctrl + F
-
Windows｜Ctrl + Alt + F
「⌘command + F」もしくは「⌘command + ⌥option」で、検索エリアが表示されます。ここからテキストの「検索」と「置換」ができます。
サイドバーの検索ビューで、複数ファイルからまとめて検索や置換もできます。検索はいいのですが、ここから置換を行う場合は、意図していないものが置き換わってしまわないか気をつけましょう。置換する前にバックアップをとっておくと安心です。
検索エリアの「正規表現を使用する」をオンにすると、通常の検索方法では実現できないような「AかつB」や「AかつBで、Cを含まないもの」などで、検索結果を絞り込むことができます。正規表現は、簡単な算数のようなもので、Googleで検索するときにも使えます。
関連リンク
Documentation for Visual Studio Code
Visual Studio Codeでマークダウン記法を使う
VS Codeはデフォルトで「マークダウン記法」に対応しているので、プレビューしながらマークダウンで書いていくことができます。
新規ファイルを作成して、ステータスバーから、言語モードを「Markdown」にして、「⌘command + S」でファイルを保存します。Markdownファイルの拡張子は「md」です。
次に、右上の「プレビューを横に表示」をクリックします。
これで、左のエディタに入力したマークダウンが、右にプレビューされます。
「# スペース」で見出し1、 「**（アスタリスク）で囲うと太字」になります。
関連リンク
Documentation for Visual Studio Code
Visual Studio Codeをカスタマイズする
VS Codeを、Webサイト制作に適した設定にカスタマイズしていきます。
フォントサイズ、タブサイズ、ワードラップを変更する
まずはフォントサイズなどを変更します。「左下の管理ボタン > 設定」へと進みます。
「Font Size」は、フォントサイズのピクセル。 「Tab Size」は、インデントの幅。 「Word Wrap」は、テキストをウインドウの端で折り返すか。
です。
ここでは、Font Sizeを14、Tab Sizeを2、Word Wrapをonにします。
カラーテーマを変更する
「左下の管理ボタン > 設定」へと進んで、「ワークベンチ > 外観」から、カラーテーマの変更ができます。
他にも、このページからお気に入りを探すこともできます。言語をHTMLかCSSに変えて、たとえば「Trending」で並び替えます。
おすすめは「Monokai」ですが、グッとくるものを探してみてください。また、いつでも変更できるので、いったんお気に入りのテーマをインストールしたら、ここに戻ってきてください。
ファイルを開くアプリケーションを変更する
VS Code自体のカスタマイズというよりは、Macの設定なのですが、ダブルクリックでファイルを開いた時に、どのアプリで開くかを設定しておきます。
設定用のファイルを用意しましたのでダウンロードしてください。html、css、js、3つのファイルが入っています。
まずはCSSファイルを選択して、メニューバーの「ファイル」から「情報を見る」を選択してください。ショートカットは「⌘command + I」です。
「このアプリケーションで開く」のポップアップメニューをクリックして「その他」へと進みます。「Visual Studio Code.app」を選択してください。
そして「すべてを変更…」を押して、「続ける」を選択します。
次に、HTMLファイルを選択して「⌘command + I」、「このアプリケーションで開く」から「Visual Studio Code.app」を選択します。
さらに、JSファイルを選択して「⌘command + I」、「このアプリケーションで開く」から「Visual Studio Code.app」を選択します。
これで、html、css、jsファイルをダブルクリックした時にVS Codeで開かれるようになりました。
設定を同期する
VS Codeにログインして設定を同期することで、パソコンを買い替えた場合や、2台目のパソコンでもそのままの設定が同期されます。
「左下のアカウントボタン」から「設定の同期をオンにする」へと進みます。MicrosoftかGitHubのアカウントが必要です。持っていなければアカウントを作成してください。
Visual Studio Codeに拡張機能をインストールする
おすすめの拡張機能をインストールして設定していきます。
ここで紹介する拡張機能は、コーディングを手助けしてくれるものや、同じ作業の繰り返しを1回で済ませてやろうぜっていうものです。
HTML Tag Wrap
テキストをマークアップするのに便利です。
アクティビティバーから「拡張機能」を選択して、検索エリアに「htmltagwrap」と入力します。サイドバーに表示されたらインストールします。
テキストを選択して「⌥option + W」を押すと、pタグでマークアップされます。そのまま他のタグ、たとえば「div id=””」などと入力もできます。
利便性を高めるために、この「⌥option + W」のショートカットを「⌃Control + W」に変更します。
左下の「管理」から「キーボード ショートカット」へと進みます。検索エリアに「htmltagwrap」を入力して絞り込んで、ダブルクリックします。ここで、変更するショートカット「⌃Control + W」を押します。
すると、「1つの既存のコマンドがこのキーバインドを使用しています」と表示されるので、このテキストをクリックします。
「ウィンドウの切り替え」がもともと割り当てられているので、このショートカットを無効にします。右クリックか「⌃Control + クリック」して、「キーバインドの削除」を選びます。
もう一度、検索エリアに「htmltagwrap」を入力して絞り込んで、ダブルクリックします。ここで、変更するショートカット「⌃Control + W」を押して、エンターキーを押します。
このように、ショートカットは自分が使いやすいように変更することができます。そのショートカットがすでに使われている場合でも、もともとのショートカットを無効にすることで変更が可能です。
「HTML Tag Wrap」の拡張機能をインストールしてショートカットを変更したので、「⌃Control + W」でマークアップできるようになりました。
さらにTIPSですが、複数行に渡って同じタグでマークアップしたい場合、たとえばリストの<li>タグをこのように一括で追加する方法です。
左下の「管理」から「キーボード ショートカット」へと進んで、「Wrap with Abbreviation」と入力します。「Emmet: ラップ変換」をダブルクリックして、ショートカットを割り当てます。ここでは「⌃Control + ⇧shift + W」とします。
タグを追加したい複数行を選択して、「⌃Control + ⇧shift + W」を押すとインプットパネルが表示されます。ここに「li*」のように、タグのあとにアスタリスクを入力します。
タグをまとめて追加できました。
Insert
Tag
「⇧shift + Enterキー」で改行の<br>タグを追加できます。
拡張機能の検索エリアから「Insert
Tag」をインストールします。
あとは、<br>タグを追加したい場所で、「⇧shift + Enterキー」を押します。
Live Server
簡易的なローカルサーバーを立ち上げて、リアルタイムにブラウザでプレビューできます。
単体のファイルではLive Serverは使えないので、フォルダを開く必要があります。
拡張機能の検索エリアから「Live Server」をインストールします。
エクスプローラービューのHTMLファイルを選択します。右クリックか「⌃Control + クリック」して、「Open with Live Server」を選択します。
ブラウザが立ち上がってプレビューされます。
HTMLファイルを保存するたびにブラウザが更新されます。
vscode-input-sequence
01、02、03…のように連番を入力することができます。
拡張機能の検索エリアから「vscode-input-sequence」をインストールします。
連番で入力したい場所をマルチカーソルで選択します。次に「⌥option + ⌘command + 0」を押して、インプットパネルを表示させます。ここでは「1:2」と入力します。これは「数字の1から順番に、2桁の数字で連番入力」をするという構文です。
同じように「数字の11から順番に、4桁の数字で連番入力」をする場合は、「11:4」となります。
連番で書き出した画像ファイルを、HTMLファイルに順番に配置する場合など、一瞬で正確に書けるので便利です。
Prettier
ソースを自動整形してくれるフォーマッタです。
拡張機能をインストールしたあとに、設定からデフォルトのフォーマッタを変更します。
「設定」の検索エリアに「save」を入力して、「Editor: Format On Save」をオンにします。
次に、検索エリアに「formatter」を入力して、「Editor: Default Formatter」に「Prettier」を設定します。
これで、ファイルを保存したときにPrettierを使って自動的にフォーマットされるようになりました。
なのですが、
ソースを自動整形するのは、たまに予期しないトラブルを生むこともあり、自分で美しいソースを書ける方が良いので、ここでは、自動ではなく、必要な時に手動でフォーマットする設定に変更していきます。
「⇧shift + ⌘command + P」で「コマンドパレット」を表示します。そして「format」を入力すると、「Format Document」が出てくるので選択します。こうやって、必要な時に手動でフォーマットを行なっていきましょう。
CSS Peek
該当のHTMLのタグが、CSSでどのようにスタイリングされているかを、簡単に確認することができます。さらにそのままCSSを編集することもできます。
拡張機能の検索エリアから「CSS Peek」をインストールします。
HTMLのタグを右クリックか「⌃Control + クリック」して、「定義へ移動」を選択します。
Image Preview
どのような画像がリンクされているか、エディタ上で画像をプレビューすることができます。
拡張機能の検索エリアから「Image Preview」をインストールします。
画像のパスをクリックすると、プレビューが表示されます。
Path Autocomplete
ディレクトリを書く時に、すでにあるディレクトリから候補が表示されるようになります。これによって、タイポによるリンクエラーを防ぐことができます。
拡張機能の検索エリアから「Path Autocomplete」をインストールします。
VS Codeはデフォルトでもこの機能はあるのですが、より強力なものにできます。
Auto Rename Tag
開始タグと終了タグを同時に変更できるようになります。
拡張機能の検索エリアから「Auto Rename Tag」をインストールします。
開始タグだけを変更して、終了タグがそのままになっているといったことを防ぐことができます。
Highlight Matching Tag
選択したタグの開始タグと終了タグの関係がわかりやすくハイライトされるようになります。
拡張機能の検索エリアから「Highlight Matching Tag」をインストールします。
このように、関係性がアンダーラインで表示されます。
さいごに余談ですが
余談ですが、VSCodeをMacで使っていると、少し動作がもっさりしてるなと感じたことがあるでしょうか。これは、VSCodeがElectronというフレームワークで作られたアプリだからです。ChromiumとNode.jsなど、Webの技術でアプリが作られています。なので、感覚でいうとChrome上で動いているWebアプリという感じでしょうか。Notionの他にも、Slackも同じようにElectronで作られています。だいたい同じようなもっさり感ですよね。
Electronの良さは、Windows/macOS/Linuxなど異なるOSに対応した、クロスプラットフォームなアプリ開発ができることです。
対して、AppleやGoogleが提供するフレームワークで作られた、そのOSのための専用アプリを「ネイティブアプリ」といいます。