記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【Mac OS】Visual Studio Codeインストール方法・使い方・初期設定

Mac OSでのVisual Studio Codeのインストール方法・初期設定・使い方・便利な拡張機能・ショートカットキーを徹底解説! Mac OSに特化しているので「Visual Studio Code」を使い始めたいMacOSユーザーに向けた記事になっています。

こんにちは、Visual Studio Codeを使い始めようと調べてみたけど「Windows OS」での説明ばかり・・・。
Mac OSに特化して、インストール方法・使い方・初期設定が知りたい。
そんな風に考えている、Mac OSユーザーの方も多いのではないでしょうか?
そこで今回は、Mac OSに特化した「インストール方法」・「初期設定」・「使い方」に加えて「便利な拡張機能」「ショートカットキー」を徹底解説します。

Visual Studio Codeコードとは

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

Visual Studio Codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

以上5点の利便性から、最も多くのユーザーに選ばれている開発ツールとなっています。

【Mac OS】へのダウンロード方法

Visual Studio Code入手方法

Visual Studio Codeの入手はVisual Studio Code 公式サイトダウンロードページにアクセスします。
Visual Studio Code 公式ダウンロードページ
https://code.visualstudio.com/Download

Visual Studio Codeインストール方法

macOS版をクリック

Visual Studio Codeダウンロード開始

ダウンロードが開始されます、ダウンロードが終わるまで少し待ち。
ダウンロードデータは、ダウンロードフォルダにあります。

ダウンロードされたzipファイル(圧縮ファイル)をダブルクリックで展開。
Visual Studio Codeが現れます。

ここでわかりやすいように、アプリケーションフォルダに、移動させましょう。

起動方法

アイコンをダブルクリックし「開く」を押し、下記表が出てきたら。
開くをクリック

Visual Studio Codeを起動します。
これでVisual Studio Codeコードが使えるようになりました。

初期設定

日本語表示にする

Visual Studio Codeは、インストールした時は英語表記になっています。
まずは日本語表示にします。日本語表示するには5ステップ。

1.【Command Palette】を開く
2.【Configure Display Language 】を入力
3.【Install additional languages 】を入力
4.【Japanese Language Pack for Visual Studio Code 】をインストール
5.【Visual Studio Code】を再起動
一つ一つ見ていきましょう。


1ステップ【Command Palette】を開く
画面上部のメニューバー、「view」をクリック→「Command Palette」を開きます。

2ステップ【Configure Display Language 】をクリック
コマンドパレットが開くので、「Configure Display Language 」を選択、クリックします。

3ステップ【Install additional languages 】をクリック
「Install additional languages 」をクリックします。

4ステップ【Japanese Language Pack for Visual Studio Code 】入力
画面左側に、インストール可能な言語パッケージが並びますので、
「Japanese Language Pack for Visual Studio Code 】」をクリック
みつからない場合は、「japanese」などでキーワード検索

5ステップ【Visual Studio Code】を再起動
言語パッケージをインストールした後は、Visual Studio Codeの再起動が必要になります。
右下にリスタートを促すメッセージ「Restart」をクリックしリスタートしてください。

リスタートすると、以下のように日本語で表示されるようになります。

これでVisual Studio Codeが日本語設定で使用できるようになりました。
日本語にするまでできれば最初の設定はOKです。

vs codeの画面の見方

VSCodeの画面は、下記のような画面構成になっています。

①.アクティビティバー
VSCodeで主に使用されている機能をアイコンで表示しています。
1-1エクスプローラー:開いているファイルを一覧表示
1-2検索:ファイル内を検索
1-3git:gitとの連携
1-4デバック:デバックを行う
1-5拡張機能:拡張機能の検索
1-6アカウント:設定の同期を指定
1-7設定:設定を行う

②.サイドバー
アクティビティバーでエクスプローラーが選択されている場合は、フォルダやファイル一覧、もしくはアクティビティバーで選択された項目が表示される。

③.エディタ
開いているファイルの内容を表示します。

④.パネル
ターミナルや、デバック情報が表示されます。

⑤.ステータスバー
文字コードなど、ファイルのステータスに関する情報を表示します。

ミニマップ

ミニマップとは、エディタの右側に表示されるコードアウトラインの事です。
ソースコードの概要を表示し、ミニマップ部をクリックすると該当箇所にすばやく移動する事ができます。

パンくずリスト

パンくずリストとは、エディター上部に表示されている、ナビゲーションバーです。フォルダ、ファイル、シンボルをクリックすれば該当箇所にすばやく移動する事ができます。

Visual Studio Code便利な拡張機能

全角スペースを把握【zenkaku】

コードに全角が混じっていると、機能しないのがプログラミング。
でも半角、全角は目視では判断しにくい。

下記は半角スペースと、全角スペースが混じった写真。

zenkakuで全角スペースがわかりやすくなった写真。
全角が一目でわかりやすくなったと思います。

zenkakuインストール方法

vsコードを開き、「拡張機能ボタンを押し」→「検索バーにzenkakuを入力」 zenkakuを開き、インストールを押します。

zenkakuはインストールしただけでは機能せず、使用したい時に有効化する必要があります。
画面上部「表示」を押し、コマンドパレットを開きます。
有効化したい時は、Enable Zenkakuを入力
無効化したい時はDisable Zenkakuを入力
してzenkakuを使用する事ができます。

HTML Snippets(HTMLのマークアップのサポート)

入力中に、入力内容に応じたHTMLスニペットを表示してくれます。
htmlのコードを全て書かなくてもサポートしてくれるので開発効率、記述ミスを防いでくれます。

HTML Snippetsインストール方法

拡張機能ボタンを押し

検索バーに
HTML Snippetsを打ち込みます。
インストールボタンを押します。

これでスニペットを利用することができ、
より少ないコードでタグの記述ができます。

Live Server(テキストエディタの変更内容をリアルタイムでブラウザに反映)

Live Serverとは、vs codeの拡張機能の一つであり、テキストエディタの変更内容をリアルタイムでブラウザに反映できる機能です。
リアルタイムで変更を反映することで、ファイルを手動でリロードしなおす事なく、反映を確認できるので、効率的な開発をする事ができます。

Live Serverインストール方法

まずは下記より「Live Server」をインストールします。

URLをクリックすると、下記画面に遷移するので、「install」ボタンをクリック

すると下記、メッセージがでますので、「Visual Studio Code」を開くをクリック

インストールボタンを押します。
これで「Live Server」のインストールは完了です。

htmlファイルが格納されているフォルダを開き、画面右下に「Go Live」が表示されます。「Go Live」をクリック

ローカルサーバーが立ち上がり→「HTML/CSS」が反映されたページが開かれます。

これにより、テキストエディタの変更内容をリアルタイムでブラウザに反映する事ができ効率的な開発ができます。

今回紹介した「便利な拡張機能」は一部です。Visual Studio Codeの拡張機能は他にも沢山あります。その他も試してみてください。

便利なショートカットキー

ショートカットキー 動作
Cmd+N 新しいファイル 作成
Cmd+O ファイルを開く
Cmd+S 保存
↑+Cmd+S 名前を付けて保存
↑+Cmd+N 新しいウィンドウを開く
↑+Cmd+W ウィンドウを閉じる
Cmd+F  検索
Cmd+Option+F 置換

この他にも様々なショートカットキーが用意されています。

まとめ

今回はMac OSに特化して「インストール方法」・「初期設定」・「使い方」・「便利な拡張機能」・「ショートカットキー」について解説してきました。
本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。