開発者やコーダーであれば、常にワークフローを効率化するための新しいツールを探していることでしょう。幸運なことに、Mac上で最高のコードエディタの一つであるVisual Studio Codeを見つけることができます。
Visual Studio Code（VS Code）には、コードをより効率的に記述するための多くの機能があります。この記事では、MacにVS Codeをインストールし、初めて利用するための最高の拡張機能とテーマについて学びます。
続けて読み進め、ワークフローを向上させる準備をしましょう！
前提条件
このチュートリアルは実践的なデモンストレーションとなります。一緒に進める場合は、macOSデバイスをご用意ください。このチュートリアルではApple Silicon（M1）を使用していますので、IntelベースのMacをお持ちの場合は手順が若干異なる可能性があります。
Mac用Visual Studio Codeのダウンロード
Visual Studio Code（VS Code）は、Microsoftが提供する無料でオープンソースのコードエディタであり、Windows、Linux、macOSに利用することができます。ただし、他のツール同様、システムにVS Codeをダウンロードしてインストールする必要があります。
1. 好きなウェブブラウザを開き、VS Codeのダウンロードページにアクセスします。
2. 次に、Macアイコンの下にあるApple Siliconをクリックして、Mac用のVS CodeパッケージインストーラをZIPファイルでダウンロードします。このApple Silicon（M1）バージョンは、Appleが開発した最新のチップです。
Intelプロセッサを搭載した古いMacをお持ちの場合は、代わりにIntel Chipをクリックしてください。
3. 最後に、ターミナルを開いて、以下のlsコマンドを実行して、ダウンロードしたVS Codeのパッケージインストーラーを確認してください。
以下の出力には、zipファイルの場所が表示されます。
MacにVisual Studio Codeをインストールする
VS Codeのインストーラーをダウンロードしたので、MacにVS Codeをインストールして、再定義されたコードエディターを体験する準備ができました。VS Codeは最適化されているため、より効果的に現代のWebおよびクラウドアプリケーションを構築およびデバッグできます。
VS Codeのもう1つの素晴らしい機能は、マーケットプレイスで見つけることができる拡張機能を通じて、多くのプログラミング言語をサポートしていることです。
MacにVS Codeをインストールするには：
1. ダウンロードしたVS Codeのzipファイルを選択して、エリプシスアイコン（右上）をクリックしてZIPファイルを解凍します。
解凍すると、ダウンロードフォルダーに新しいVisual Studio Codeアプリケーションが作成されます。
2. 次に、以下のlsコマンドを実行してアプリケーションファイルを確認してください。このコマンドはVisual Studio Codeアプリケーションファイルの内容をリストします。
\バックスラッシュはスペースを通常の文字として扱うようにターミナルに指示するエスケープ文字です。ファイル名にスペースがある場合はエスケープ文字を使用する必要があります。
3. 以下のopenコマンドを実行して、新しいインスタンス（-n）でインストーラーを起動します。
4. これで、以下のプロンプトが表示されたら「Open」をクリックしてインストールを続行してください。
この警告は、インターネットからアプリケーションをダウンロードしたため表示されますが、安全に無視できます。
インストールが完了すると、VS Codeアプリケーションが開き、以下の「はじめに」ページが表示されます。
VS CodeのGUIをナビゲート
MacにVS Codeを正常にインストールしましたが、コーディングに取り掛かる前に、まずVS CodeのGUIと機能を理解してください。
VS Codeには次のような多くの機能が付属しています：
- テーマを選択し、エディタの外観を変更します。
- プロジェクトフォルダを開くことで、ファイルを素早く行き来させ、ファイル構造が正しいことを確認します。
- Gitなどのソースコントロールシステムを追加します。
- マーケットプレイスから迅速に拡張機能を追加するなどの機能を利用できます。
これらはVS Codeが提供する機能のほんの一部です。各機能がワークフローをどのようにサポートするか、ぜひご自身で確認してください。まずはテーマを変更することから始めるのも良いでしょう。
1.「スタートガイド」ページから、エディターのテーマを好みのものに選択し、他の設定はデフォルトのままにして、「完了」をクリックしてください（左下）。
もし「ライトテーマ」と「ダークテーマ」が好みではない場合は、「その他のテーマを見る」をクリックし、興味を引くテーマを探してください。
2. 次に、VS Codeの左端にある「アクティビティバー」を探索してください。このバーには7つのメインセクションがありますが、まずは最も重要なセクションの1つである「エクスプローラー」（Ctrl+Shift+E / Cmd+Shift+E）から始めましょう。
エクスプローラーでは、プロジェクト内のファイルとフォルダが表示され、リポジトリをクローンすることもできます。さらに、以下のようなさまざまなアクションを実行することもできます：
- プロジェクト内でのファイルとフォルダの作成、削除、名前の変更。
- ファイルとフォルダをドラッグアンドドロップしてプロジェクトフォルダ内で移動する。
なお、「ドラッグアンドドロップ」は、VS Codeの外部からエクスプローラーにファイルを移動する場合に機能します。ただし、エクスプローラーが空の場合は、VS Codeはファイルをエディターで開きます。
3. 検索アイコン（Ctrl+Shift+F / Cmd+Shift+F）をクリックして、SEARCHセクションが開き、プロジェクト内のファイル、シンボル、およびテキストを検索できます。
4. 次に、ソースコントロールアイコン（Ctrl+Shift+G / Cmd+Shift+G）をクリックして、SOURCE CONTROLセクションが開き、Gitまたは別のソースコントロールシステムでプロジェクトを管理できます。
VS Codeには、デフォルトでGitサポートが組み込まれた統合ソースコントロール管理（SCM）が付属しています。
5. SCMの後、実行とデバッグアイコン（Ctrl+Shift+D / Cmd+Shift+D）をクリックして、RUN AND DEBUG: RUNセクションが開き、プロジェクトを実行およびデバッグできます。
6. 最後に、拡張機能アイコン（Ctrl+Shift+X / Cmd+Shift+X）をクリックして、EXTENSIONSセクションにアクセスし、マーケットプレイスから拡張機能をインストールできます。
コマンドライン環境からVS Codeを起動する
おそらく、コマンドライン環境でほとんどの時間を過ごしていますが、すばやくコードを書く必要がある場合があります。その場合、VS Codeをコマンドライン環境から起動するように設定すると便利です。
1. VS Codeで（Cmd+Shift+PまたはCtrl+Shift+P）を押して、コマンドパレットを開き、すべてのVS Codeの機能にアクセスできます。
2. コマンドパレットでShell Command: Install ‘code’ command in PATHと入力し、Enterキーを押します。このコマンドは、VS Code実行可能ファイルをシステムのPATH変数に追加します。
3. 変更を適用するために、ターミナルを再起動してください。codeコマンドは今、あなたのターミナルで利用可能です。
4. 今、テキストファイルを作成し、テキストを追加して、ファイルを保存して閉じてください。
5. 最後に、以下のコマンドを実行してVS Codeを起動してください（code）、作業ディレクトリからこの場合、テキストファイルのファイルパス（text.txt）を渡してください。
VS Code（右側）が開き、エディタウィンドウにtext.txtファイルの内容が表示されます。これで、VS Codeの優れた機能を使用してこのファイルを編集できます。
追加の機能のインストール
VS Codeの最も素晴らしい点の1つは、高度にカスタマイズ可能であることです。どのように？新しい機能を追加するために拡張機能をインストールでき、さまざまな拡張機能が利用可能です。
おそらく、macOS Color Picker 拡張機能をインストールしたいと思うかもしれません。この拡張機能を使用すると、CSS、HTML、JavaScriptファイルで作業するときに、ネイティブmacOSカラーピッカーを選択できます。
1. アクティビティバーの拡張機能メニューに移動してください。このメニューには3つのセクションがあります：
- インストール済み – このセクションにはすでにインストールされている拡張機能が表示されます。
- おすすめ – このセクションでは、開いているファイルのタイプに基づいて推奨される拡張機能が表示されます。例えば、JavaScriptファイルで作業している場合、おすすめのJavaScript拡張機能が表示されます。
- 人気 – このセクションでは、最も人気のあるVS Codeの拡張機能が表示されます。
2. 検索ボックスにmacOS Color Pickerと入力し、Enterキーを押します。一致する拡張機能のリストが降順で表示されます（最も一致する拡張機能が最初に表示されます）。
目標の拡張機能が表示されたら、拡張機能の横にある「インストール」ボタンをクリックします。インストールボタンは「有効にする」ボタンに変わりますので、それをクリックして拡張機能を有効にします。
拡張機能をインストールした後、拡張機能の概要ページが右側に表示されます。
3. そして、新しいmacOS Color Picker拡張機能をテストするためにCSS、HTML、またはJavaScriptファイルを開きます。
4. 最後に、コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）を開き、「Open Color Picker」と入力してEnterキーを押します。macOS Color Pickerパネルが表示されます。
カラーピッカーを使用して色を選択し、それがコードに挿入されます。この拡張機能は、ヘックスコードを覚えずに必要な色の値を素早く取得するための素晴らしい方法です。
結論
このチュートリアルでは、MacにVS Codeをインストールし、より多くの機能を追加する拡張機能を学びました。これにより、次のプロジェクトで作業する際にVS Codeが提供するすべての利点を十分に活用できます。
しかし、ここで止まらないでください！この新たな知識を活用して、GitとGitHubを使用して作業を追跡するバージョン管理をしてみませんか？
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/