Help us understand the problem. What is going on with this article?

MacOSでVisual Studio Codeをインストールする手順

Visual Studio Codeとは通称VSCodeと呼ばれ、Microsoft社が開発したテキストエディタです。

他のテキストエディタに比べ、HTMLやCSSなどを書く時の補助的な機能が揃っているため、多くのプログラマやWebデザイナー達の指示を集め最近人気のテキストエディタです。

それをMacOSにインストールし、使用できるまでの手順をまとめました。
ちなみにVSCodeはマルチプラットフォームなのでWindows、MacOS、Linuxのいずれの環境にもインストールできます。

1. VSCodeのサイトにアクセス

下記のサイトにアクセスし、「Download for Mac」をクリック

https://code.visualstudio.com/
スクリーンショット 2019-10-08 13.47.48.png

2. ダウンロード

画面が移動したら自動でダウンロードが始まり、ダウンロードフォルダにアプリがダウンロードされます。

スクリーンショット_2019-10-08_13_47_57.png

3. ダウンロードしたファイルを開く(解凍する)

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。

スクリーンショット_2019-10-08_13_48_31.png

4. アプリケーションフォルダに移動

ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

スクリーンショット_2019-10-08_13_48_48.png

5. 認証ボタンを押す(人によっては表示されず、スキップして構いません)

この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

スクリーンショット 2019-10-08 13.49.10.png

6. アプリケーションフォルダからVSCodeを開いてください

サイドメニューの「アプリケーション」をクリックし、VSCodeを見つけ、ダブルクリックで開いてください。

スクリーンショット_2019-10-08_13_50_22.png

【開発元が未確認のため開けません】という警告ダイアログが表示された場合

macOS Sierraから、Macのセキュリティ機能であるGateKeeperによって確認が必要な状態となり、不明な開発元(デベロッパIDを持たない開発元)によって作られたアプリは開けなくなりました。
Mac App Storeで配布していないアプリ全般に表示されるので、これは必ずしもアプリケーションに問題がある訳ではありません。
※ただ不正なコードが含まれる可能師があるアプリも存在します。

このアプリにだけ、例外的にセキュリティ設定を無効化してこのままアプリケーションを開くには、次の手順に従います。

  1. MacのFinderで、開きたいアプリケーションを検索します
  2. Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません
  3. Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択します
  4. 「開く」をクリックします。

参考

  1. 開発元が未確認のMacアプリケーションを開く
  2. Macで「開発元が未確認のため開けません」となりアプリが開けない場合はどうすれば?

アプリケーションはセキュリティ設定の例外として保存され、今後は登録済みのアプリケーションと同様に、ダブルクリックすることで開くことができるようになります。

7. VSCodeの初期画面

この様な画面がでるかと思います。

スクリーンショット 2019-10-08 13.50.52.png

8. もっと便利になるような拡張機能をインストール

サイドメニューの■マークが並んだアイコンをクリックしてください。
スクリーンショット_2019-10-08_13_51_01.png

9. 拡張機能の検索からインストールまで

赤枠の検索フォームに「Japanese Language Pack」と打ってみてください。
そうすると下に検索結果が表示されるので、同じ名前の拡張機能にある「Install」ボタンをクリックします。
スクリーンショット_2019-10-08_13_51_20.png

10. 他の拡張機能もインストールしましょう

他にも下記の拡張機能を同じようにインストールしてみてください。
下記のテキストをコピー・アンド・ペーストで検索したほうが確実です。

  • Visual Studio IntelliCode
  • Bracket Pair Colorizer
  • Path Intellisense
  • HTMLHint
  • EvilInspector
  • Material Icon Theme

11. ひととおりインストールしたらVSCodeを再起動しましょう。

VSCodeを開いた今の状態で、左上の「Code」から「Quit Visual Studio Code」をクリックすると閉じます。
そして再度アプリケーションフォルダからVSCodeを開いたら、インストールと準備は完了です。

スクリーンショット 2019-10-08 13.52.08.png

12. 参考

HTMLを作成時にlang属性をenからjaに変更する方法が下記サイトで詳しく書いています。
VSCodeのemmetでhtmlのlangをjaに設定する方法

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした