Alt Life

Visual Studio Code インストール・使い方（初心者）

投稿: 2023/10/25
• ドキュメント
#fabacademy #レシピ・手順
≡目次
  1. 1テキストエディタとは何ですか?
  2. 2主要なテキストエディタ
  3. 3テキストエディタの選び方
  4. 4Visual Studio Codeの特徴
  5. 5Visual Studio Codeをインストール
  6. 6Visual Studio Codeのプラグインについて
  7. 7初めにインストールしたプラグイン
  8. 8サクッと書いてみる
  9. 9Useful Links

今回は、Visual Studio Code をテキストエディタとして使用に挑戦。今後の備忘録として、インストール・日本語化の方法・使い方などをまとめました。

テキストエディタとは何ですか?

テキストエディタとは、テキストデータを編集するためのソフトウェアアプリケーションです。これは、コンピューター上で文書やコードを作成、表示、変更するために使用されます。テキストエディタは、特にプログラミングでのコード編集、ウェブサイトのHTMLやCSSの編集、または単純なテキストファイルの作成において、非常に重要なツールとなっています。

基本的なテキストエディタは、テキストの入力や修正、コピー＆ペースト、検索＆置換などの機能を提供しますが、より高度なテキストエディタ（しばしば「ソースコードエディタ」や「統合開発環境（IDE）」と呼ばれます）では、プログラミング言語に特化した機能（構文強調表示、コード補完、エラーチェック、フォーマット調整など）を備えており、ソフトウェア開発のプロセスを大いに助けます。

テキストエディタは、オペレーティングシステムによって異なるバージョンがありますが、Notepad++やSublime Text、Visual Studio Code、Atom、Vim、Emacsなど、多くの人気のあるエディタが異なるプラットフォーム間で利用可能です。これらのツールは、利用者が効率的に作業できるように設計されており、特定のニーズに合わせてカスタマイズすることが可能です。

主要なテキストエディタ

  • Atom

  • Visual Studio Code

  • Brackets

  • Boostnote

  • Joplin

  • Sublime Text

  • Typora

  • Quiver

  • Inkdrop

  • Bear

テキストエディタの選び方

テキストエディタの選び方は個々のニーズや作業内容に大きく依存します。以下に、エディタを選ぶ際の考慮点をいくつか挙げます。

  • 使用目的:

    • 何のためにテキストエディタを使用するかによって選択が異なります。例えば、プログラミングに使う場合、構文ハイライト、コード補完、プラグインシステムなどの機能が備わったエディタが適しています。

  • 使いやすさ:

    • UIが直感的で、学習曲線が急でないものを選ぶユーザーもいます。初心者にはシンプルな操作性のエディタが向いていることが多いです。

  • カスタマイズ性:

    • ユーザーの好みや作業スタイルに合わせてカスタマイズできるエディタも人気です。拡張機能やテーマ、ショートカットキーの設定などが自由に変更できるかどうかを確認しましょう。

  • 互換性とプラットフォーム:

    • 使用するオペレーティングシステムに対応しているかどうかも重要です。また、複数の環境で作業する場合は、クロスプラットフォーム対応が有用です。

  • コスト:

    • 多くのテキストエディタは無料ですが、一部には有料のものもあります。予算内で最も適した機能を備えたエディタを選びましょう。

  • コミュニティとサポート:

    • アクティブなコミュニティや豊富なドキュメントがあるエディタは、学習やトラブルシューティングに有利です。

選択する際は、まず無料版やトライアル版で実際に手を動かしてみることをお勧めします。実際の使用感を確かめることで、最も自分に合ったテキストエディタを見つけることができます。結果として、私の場合、「Visual Studio Code」を選択しました。

Visual Studio Codeの特徴

Visual Studio Code（VS Code）は、Microsoftによって開発された先進的なテキストエディタです。このエディタは、デバッグ、Git統合、構文ハイライト、インテリセンス（インテリジェントなコード補完）、スニペット、リファクタリングなど、コーディング作業をサポートする多くの機能を提供します。

以下は、Visual Studio Codeの主な特徴です：

  • クロスプラットフォーム対応:

    • Windows、macOS、Linuxで動作するため、様々な環境で利用可能です。

  • 拡張機能:

    • 豊富なプラグインや拡張機能によって、ユーザーは必要に応じて機能を追加したりカスタマイズしたりできます。これにより、さまざまなプログラミング言語やフレームワークに対応します。

  • 統合されたソースコントロール:

    • Gitの操作を直接エディタ内で完結できるため、コマンドラインを使用することなくバージョン管理作業を行うことができます。

  • 高度なコード編集機能:

    • 構文ハイライト、スマートなコード補完、コードナビゲーション、コードリファクタリング、フォーマット調整といった機能により、コードの読み書きが効率的になります。

  • デバッグ機能:

    • 統合デバッガを使用すると、コードのデバッグを直接エディタ内で行うことができます。これにより、外部ツールに頼ることなくデバッグ作業を効率化できます。

  • 設定のカスタマイズ:

    • テーマ、ショートカットキー、エディタの設定など、ユーザーの好みや作業スタイルに合わせて幅広くカスタマイズが可能です。

無料で提供されており、その高機能と柔軟性から、VS Codeはプログラマーを中心に幅広いユーザー層に迅速に受け入れられ、世界中の開発者に非常に人気のあるエディタの一つとなっています。

Visual Studio Codeをインストール

  1. Visual Studio code公式サイトにアクセス。

  2. メインページから、あなたのオペレーティングシステムに合わせて「Windows」、「macOS」、「Linux」のダウンロードオプションのいずれかを選択します。これにより、インストーラーがダウンロードされます。

  3. ダウンロードしたインストーラーを開き、指示に従ってインストールを行います。

Visual Studio Codeのプラグインについて

Visual Studio Code（VS Code）のプラグイン（拡張機能）は、エディタの機能を拡張し、多様なプログラミング言語や開発ツールとの統合を可能にします。これにより、VS Codeは単なるテキストエディタから、様々な開発タスクを効率的に行える統合開発環境（IDE）へと変貌します。

以下は、VS Codeのプラグインの主要な特徴と使用例です。

  1. 言語サポート:

    • これらのプラグインは、特定のプログラミング言語に対するサポートを提供します（例：Python、JavaScript、Goなど）。これには、構文ハイライト、コード補完、フォーマッティング、エラーハイライトなどが含まれます。

  2. フレームワークとツールの統合:

    • 特定の開発フレームワークやツールとの連携を深めるプラグインもあります。例えば、Node.js、React、Vue.jsなどの人気のあるフレームワークや、Docker、Kubernetesなどの開発ツール用の拡張機能があります。

  3. ソースコントロール:

    • Gitとの更なる統合を提供する拡張機能（例：GitLens）により、ブランチの比較、コミット履歴の確認、変更のビジュアルトラッキングなど、VS Code内でより洗練されたバージョン管理作業が可能になります。

  4. デバッグツール:

    • 特定のプログラミング言語や環境向けの高度なデバッグ機能を提供する拡張機能もあります。これにより、ブレークポイントの設定や変数の観察、コールスタックのナビゲーションなどが可能です。

  5. コード品質とリファクタリング:

    • コードのフォーマッター（例：Prettier）、リンター（例：ESLint）、その他のコード分析ツールを提供する拡張機能は、コード品質の向上とメンテナンスを助けます。

これらのプラグインはVS Codeのマーケットプレイスから検索し、インストールすることができます。コミュニティが提供する豊富なプラグインにより、開発者は自分のニーズに合った最適な開発環境を構築できます。

初めにインストールしたプラグイン

Japanese Language Pack for Visual Studio Code（日本語化）

ステップ１：日本語言語パックのインストール

  1. Visual Studio Codeを開いたら、左側のアクティビティバー（エディタのサイドバー）にある「拡張機能」（ブロックのようなアイコン）をクリック。

  2. 上部にある検索バーに「Japanese Language Pack」と入力します。検索結果として、Microsoftが提供する「Japanese Language Pack for Visual Studio Code」が表示されます。

  3. その拡張機能の「インストール」ボタンをクリックして、日本語パックをインストール。

ステップ２：言語の切り替え

  1. 拡張機能のインストール後、VSCodeの画面の右下に「言語を切り替える」ポップアップをクリックし再起動。

  2. 再起動後、エディタの言語がインターフェースが日本語に切り替わったのを確認。

Markdown Preview Enhanced（Markdownファイルのプレビューを拡張）

  1. Visual Studio Codeを開いたら、左側のアクティビティバー（エディタのサイドバー）にある「拡張機能」（ブロックのようなアイコン）をクリック。

  2. 上部にある検索バーに「Markdown Preview Enhanced」と入力します。検索結果として、「Markdown Preview Enhanced」が表示されると、「インストール」ボタンをクリックします。インストールが自動的に始まります。

  3. Visual Studio Codeを再起動し、プレビューが表示されることを確認。

サクッと書いてみる

  1. Visual Studio Codeを開きます。

  2. 必要なフォルダーやファイルを追加します。

  3. ファイルを編集します。

  4. ファイルを保存します。

<例>