VSCodeのススメ

Intro

VSCode、使ってますかー!?

TL; DR

Visual Studio Code（VSCode）は、Microsoftが提供する無料で多機能なソースコードエディタだ。
拡張機能を使ってカスタマイズが可能で、WSLやWindows Terminalとの連携も強力。
初心者からプロフェッショナルまで幅広いユーザーに適しており、効率的な開発環境を構築できる。

Tweet

GCopilotくん、pureすぎる

とか言ってたら、ちょっと生意気になってた。

• VSCode: Visual Studio Code
  • Visual Studio Codeでプログラミングを学ぼう
  • なぜVS Codeなのか？
• VSCodeの基本的な使い方
  • 1. インストール
  • 2. 初めての起動
  • 3. ファイルの作成と編集
  • 4. 拡張機能のインストール
• VSCodeの有名な拡張機能
• VSCodeのショートカットキー
  • コメントアウト操作
  • インデント操作
  • 自動整形
• まとめ

VSCode: Visual Studio Code

PCを起動した直後、まず何をするか

メールを確認? ニュースをチェック? Twitterを巡回? YouTubeを観る? はたまたdアニメストア?

いやいや、そんなのは後回し。
まずはWindows TerminalでWSLにアクセスし、VSCodeを立ち上げる。
これが、社会人のたしなみ。

Ubuntu as WSL through Windows Terminal

code onedrive #PJフォルダやmemo置き場フォルダなどをVSCodeで開く

Tweet

Windows TerminalやWSLについてはあらためて記事で取り上げる

関連ツール紹介 by ChatGPT

ChatGPT

Q. VSCodeとは
A. Visual Studio Code (VSCode) は、Microsoftが提供する無料のソースコードエディタである。プログラミングやスクリプトの編集に特化しており、多くの機能と拡張機能を備えている。初心者からプロフェッショナルまで、幅広いユーザーに利用されている。

VSCodeは軽量、機能的、見た目もよく、カスタマイズ性も高く、Editorとして満足度が高すぎる

Q. Ubuntuとは
A. Ubuntuは、人気のあるLinuxディストリビューションの一つである。オープンソースであり、誰でも無料で利用できる。Ubuntuは使いやすさと安定性を重視しており、デスクトップ環境やサーバー環境で広く使用されている。特に初心者にとって使いやすいインターフェースと豊富なコミュニティサポートが特徴である。

商用利用を除けば、UbuntuはLinux Distributionの中で最も汎用的。癖もなく使いやすい

Q. WSLとは
A. WSL（Windows Subsystem for Linux）は、Windows 10およびWindows 11でLinuxの環境を実行するための機能である。WSLを使用すると、Windows上でLinuxディストリビューション（例: Ubuntu）を直接実行できる。これにより、LinuxのコマンドラインツールやアプリケーションをWindows上で利用できる。WSLは開発者にとって非常に便利で、Windows環境とLinux環境をシームレスに切り替えながら作業ができる。

Microsoft公式サポート、軽量、Windowsとの融合とすばらしい仮想環境。何よりWindowsで簡単にLinuxを体験できるのが大きい

Q. Windows Terminalとは
A. Windows Terminalは、複数のターミナルセッションを管理するための最新のターミナルアプリケーションである。Windows PowerShell、コマンドプロンプト（cmd）、WSL（Windows Subsystem for Linux）など、さまざまなシェルやコマンドラインツールを一つのアプリケーションで利用できる。Windows Terminalはタブ機能やカスタマイズ可能な外観、豊富なショートカットキーなど、多くの便利な機能を備えている。

タブ機能があり、modernな見た目で、ショートカットキーを含めてカスタマイズ性も高く、ターミナルとしては最高

Visual Studio Codeでプログラミングを学ぼう

Microsoftの公式ページの内容がまとまっていたので、その部分を日本語で要約してもらった。

Visual Studio Codeでプログラミングを学ぼう

プログラミングを学ぶのは難しいですが、Visual Studio Code（VS Code）を使えば簡単に始められます。VS Codeは無料のコードエディタで、Python、Java、C++、JavaScriptなど多くのプログラミング言語に対応しています。

なぜVS Codeなのか？

• リモートでの共同作業:
  無料のLive Share拡張機能を使って、リアルタイムでコードの編集やデバッグを行えます。チャットや通話機能も利用でき、複数人での共同作業が可能です。

• 学びやすい環境:
  コードのキーワードを色分けして表示し、IntelliSenseやPeek Definition機能でコードの理解を助けます。

• エラー修正が簡単:
  コードを書きながら自動補完やエラーチェックが行われます。デバッガを使えば、コードの各行をステップ実行して動作を確認できます。

• カスタマイズ可能:
  好きなフォントやアイコン、カラーテーマを選んで、VS Codeを自分好みにカスタマイズできます。

• コードのバージョン管理:
  内蔵のソース管理機能でコードの変更を追跡し、異なるバージョンを比較できます。

• ノートブック内でのコーディング:
  データサイエンスやデータビジュアライゼーションのプロジェクトに取り組む際、Jupyterノートブックを使ってデータやグラフを操作できます。

これらの機能を活用して、VS Codeで快適にプログラミングを学びましょう。

Microsoft: Summarized by ChatGPTGet Started with Visual Studio Code

VSCodeの基本的な使い方

1. インストール

まず、以下のURLからVSCodeをダウンロードしてインストールする。

• Visual Studio Code ダウンロードページ

2. 初めての起動

インストールが完了したら、VSCodeを起動する。

3. ファイルの作成と編集

1. 新規ファイルの作成:

   • メニューから「ファイル」→「新しいファイル」を選択する。
   • もしくは、ショートカットキー Ctrl + N を使用する。

2. ファイルの保存:

   • メニューから「ファイル」→「名前を付けて保存」を選択し、ファイル名と保存場所を指定する。
   • ショートカットキー Ctrl + S でも保存できる。
     • まだ一度も名前を付けていないファイルなので、`Ctrl +
     • S`が「名前を付けて保存」になっている。

4. 拡張機能のインストール

VSCodeの大きな魅力の一つが、拡張機能（Extensions）である。これを使うことで、自分好みにカスタマイズできる。

1. 拡張機能ビューを開く:

   • 左側のサイドバーにある四角いアイコンをクリックする。

2. 拡張機能の検索とインストール:

   • 検索バーにインストールしたい拡張機能の名前を入力する。
   • 例えば、「Markdown」を検索し、「Markdown All in One」などの拡張機能をインストールする。

VSCode公式にも説明は豊富だ。
以下の画像は、その公式ページから引用しており、「ファイル中のtodoコメント」に関する拡張機能を検索している。

VSCodeの有名な拡張機能

以下に、Visual Studio Code（VSCode）の拡張機能を「個別の言語対応」、「アプリケーション対応」、「Editorとしての機能追加」、「Editor以上の機能追加」の観点で分類した表を示す。

VSCodeの有名な拡張機能

分類	名前	発行元	インストール数	用途	説明
個別の言語対応	Python	Microsoft	41M＋	Python開発	Pythonのコード補完、Linting、デバッグ、テストなどをサポートする。
	C/C++	Microsoft	8M＋	C/C++開発	C/C++のコード補完、デバッグ、Lintingをサポートする。
	JavaScript (ES6) code snippets	charalampos karypidis	5M＋	コードスニペット	JavaScript（ES6）のコードスニペットを提供する。
	Markdown All in One	Yu Zhang	6M＋	Markdownサポート	Markdownのプレビューやショートカットを提供する。
	HTML CSS Support	ecmel	2M＋	HTML/CSS補完	HTMLとCSSの補完を強化する。
Editorとしての機能追加	Prettier - Code formatter	Prettier	15M＋	コードフォーマット	各種言語のコードを統一されたスタイルにフォーマットする。
	ESLint	Dirk Baeumer	21M＋	JavaScript/TypeScript	JavaScript/TypeScriptのLintingをサポート。
	IntelliCode	Microsoft	10M＋	AIコード補完	AIを利用したコード補完と推奨コードを提供する。
	Bracket Pair Colorizer	CoenraadS	9M＋	コードの見やすさ向上	括弧のペアを色分けして、コードの可読性を向上させる。
	Path Intellisense	Christian Kohler	5M＋	パス補完	ファイルパスの補完を提供する。
	Vim	vscodevim	3M＋	Vimキーバインド	VimのキーバインドをVSCodeに追加する。
	Todo Tree	Gruntfuggly	2M＋	Todo管理	コメント内のTODOやFIXMEを視覚的に管理する。
Editor以上の機能追加	REST Client	Huachao Mao	4M＋	APIテスト	VSCode内でHTTPリクエストを送信し、APIのテストを行う。
	Debugger for Chrome	Microsoft	2M＋	デバッグツール	Google ChromeのデバッグをVSCode内で行う。
	Live Server	Ritwick Dey	12M＋	開発サーバー	ローカル開発サーバーを立ち上げ、コードの変更をリアルタイムで反映。
アプリケーション対応	Docker	Microsoft	11M＋	Dockerサポート	Dockerの構築、管理、デバッグをVSCode内で行う。
	Jupyter	Microsoft	3M＋	Jupyterノートブック	Jupyterノートブックの編集と実行をVSCode内で行う。
	Remote - WSL	Microsoft	3M＋	WSLサポート	WSL環境でVSCodeを利用可能にする。
	GitLens	GitKraken	13M＋	Git拡張	Gitリポジトリの視覚化とナビゲーションを提供する。
	Azure Account	Microsoft	2M＋	Azure統合	Azureサービスとの統合と管理を提供する。

分類名に示した通り、VSCodeの拡張機能はいくつかの方向性がある。拡張機能を探す際は、この観点を持っておくとよいだろう。

Info

VSCodeの拡張機能は、多くの拡張機能と同様にJavaScriptで作成できる。
実際に作成する流れも、あらためて記事で取り上げる。

なお、Chrome拡張機能が取り扱う内容がWebページという歴史も長さももある存在なので、
参考にできる情報量にあまりに差がある。

VSCodeのショートカットキー

VSCodeには便利なショートカットキーがたくさんある。いくつかすぐに使えるものから覚えていくと良い。

Info

筆者の独断と偏見で、次の通り分類した。

• 特に有用なものを太字
• 知らなかった、あるいはあまり意識していなかったが、便利そうなものには*を付した

「Editorとしての基本操作」の項目はいずれも重要なので、ぜひ使っていってほしい。

なお、これらのショートカットは多くのプラットフォームで共通だ。一度覚えると一生役に立つ。体に刻み込もう。

VSCodeのショートカットキー

分類	ショートカットキー	操作内容	説明
Editorとしての基本操作	Ctrl + S	ファイルを保存	現在編集中のファイルを保存する。
	Ctrl + Shift + S	名前を付けて保存	ファイルを新しい名前で保存する。
	Ctrl + N	新しいファイルを作成	新規ファイルを作成する。
	Ctrl + X	(無選択なら)行を切り取り*	カーソル位置の行全体を切り取り。
	Ctrl + C	(無選択なら)行をコピー*	カーソル位置の行全体をコピー。
	Ctrl + V	貼り付け	クリップボードの内容を貼り付け。
	Ctrl + Z	元に戻す	直前の操作を元に戻す。
	Ctrl + Y	やり直し	元に戻した操作をやり直す。
	Ctrl + F	ファイル内を検索	現在開いているファイル内で文字列を検索。
	Ctrl + H	置換	ファイル内の文字列を置換。
Editorとしての応用操作	Ctrl + /	コメントアウト/解除	選択した行をコメントアウトまたは解除。
	Ctrl + [ / ]	インデントを追加/解除	選択した行のインデントを追加または解除。
	Alt + Shift + F	コードの自動整形	コードを自動的に整形する。
	Alt + Up / Down	行を移動*	現在の行を上または下に移動。
	Ctrl + L	行を選択*	カーソル位置の行全体を選択。
	Ctrl + G	指定行に移動*	指定した行番号にジャンプ。
	Ctrl + D	次の一致を選択*	カーソル位置の単語と一致する次の単語を選択。
	F12	定義へ移動	カーソル位置のシンボルの定義にジャンプ。
	Ctrl + W	タブを閉じる*	現在アクティブなタブを閉じる。
	Ctrl + Shift + T	最後に閉じたタブを再度開く	間違って閉じたタブを再度開く。
	Ctrl + Shift + P	コマンドパレットを開く	VSCodeのさまざまな機能をコマンドで実行。
	Ctrl + P	ファイルを素早く開く*	ファイル名の一部を入力してファイルをクイックアクセス。
	Ctrl + B	サイドバーの表示/非表示	エクスプローラーや拡張機能ビューなどの表示を切り替える。(Markdown All in OneのBoldと操作が重複してる！)
	Ctrl + @	統合ターミナルを開く	統合ターミナルを表示または隠す。
	Ctrl + Shift + @	新しいターミナルを開く	新しいターミナルインスタンスを作成。
	Ctrl + Shift + F	プロジェクト全体を検索	プロジェクト全体で文字列を検索。
その他	Ctrl + K, Ctrl + S	ショートカットキーの一覧を表示	VSCodeの全てのショートカットキーの一覧を表示。
	Ctrl + Tab	タブ間を移動	開いているファイル間を循環する。
	Ctrl + Shift + H	フォルダ全体で置換	プロジェクト全体で文字列を置換。
	Ctrl + Shift + X	拡張機能ビューを開く	拡張機能のインストールと管理を行う。
	Ctrl + Shift + E	エクスプローラーを開く	プロジェクトのファイルツリーを表示。
	Ctrl + Shift + U	出力ビューを表示	出力ビューを開く。
	Ctrl + Shift + M	問題ビューを表示	問題ビューを開く。
	Ctrl + K, Z	Zenモードを開く	Zenモードで作業に集中できる。

Info

VSCodeはショートカットキーにおいても、そのカスタマイズ性の高さの評判にたがわず、自由に変更できる。
筆者のおすすめのショートカットキー構成に関しては、あらためて記事で取り上げる。

Tweet

ついでにZenモードってなんやねんということで試してみた。
ほぼ全画面表示だがEscapeで抜けられなかったり、サイドバーすら表示されないなど、文字入力に集中させようという意図が感じられる。

コメントアウト操作Ctrl+/とインデント操作Ctrl+[、自動整形Alt+Shift+Fに関しては非常に有用なので、個別に紹介しておこう。

コメントアウト操作

Ctrl+/は、選択した行または現在の行をコメントアウトまたは解除するショートカットキーである。
選択した行がコメントアウトされると、その行はコメントとして扱われるため、コードとして実行されなくなる。
複数行選択してまとめてコメントアウトを切り替えられるのは非常に有用だ。(何度も何度もボタンを押す必要がなくなる)

Info

コメントアウトの記号は言語に応じて自動的に適用される。例えば、JavaScriptでは//が、Pythonでは#がコメントアウト記号として使われる。

たとえば、入力値が整数でかつ奇数でかつ3の倍数でかつ平方数である場合のみtrueを返す関数をPythonで作成していたとしよう。

def judgeCondition(int_val):
    # この書き方がSmartかどうかはまた別の話
    if not isinstance(int_val, int):
        return False
    if int_val % 2 == 0:
        return False
    if int_val % 3 != 0:
        return False
    if !(int_val ** 0.5).is_integer():
        return False
    return True

しかし、奇数に限定しない場合を試したくなったとする。
その場合は該当部分を選択して、Ctrl+/と入力すれば、まとめてコメントアウトされる。

コメントアウト済みの行を選択してCtrl+/をｎ入力すると、コメントアウトが解除される。

インデント操作

Tweet

ところで、いつもインデントかインテンドか分からなくなる。何なら間違えてる時の方が多い気がする。

たとえばMarkdownでリストを作成しているとき、サブ項目を作成したい場合

1. 「入力済みの内容を一時的にコメントに逃がしたい場合」は「コメントアウト操作」に属するので、インデントを上げて Ctrl+] サブ項目にする。
2. 「インデント操作」は「コメントアウト操作」と同じ階層なので、入力後インデントを下げて Ctrl+[ 元の階層に戻す。

- コメントアウト操作
  - 入力済みの内容を一時的にコメントに逃がしたい場合
- インデント操作
  - リストの構造を変更したい場合

Info

Tab / Shift+Tabでもインデントの上げ下げはできるが、先頭以外ではタブ入力と競合する。いつでも使えて直感的で押しやすいCtrl+[ / ]を推奨する

自動整形

長いコードを書く場合、その内容や構造に合わせて、適切に空白やインデントおよび改行を(過不足なく)入れることで、コードの可読性が向上する。版管理する際の差分表示の実効性も高まる。

VSCodeの場合は、Alt + Shift + Fを押すことで、自動的にコードを整形することができる。

たとえば、以下のように空白もインデントも不足したJavaScriptのコードがあったとしよう。

function isPrime(num) {
if(num<=1){return false;
}
for (let i=2; i<num; i++) {
if (num%i===0){
return false;}}
return true;}

console.log(isPrime(17));
console.log(isPrime(18));

VSCodeでAlt + Shift + Fを押すと、以下のように自動整形される。
(なお、自動整形自体はVSCode特有ではなく、多くのEditorなどでサポートされている機能である)

function isPrime(num) {
    if (num <= 1) {
        return false;
    }
    for (let i = 2; i < num; i++) {
        if (num % i === 0) {
            return false;
        }
    }
    return true;
}

console.log(isPrime(17));
console.log(isPrime(18));

Warning

自動整形を行う場合、その言語の整形ルールをVSCodeに与える拡張機能などをインストールしておく必要がある。

Info: Summarized by ChatGPT

保存時に自動整形を行うことも可能

Visual Studio Codeで保存時にコードを自動整形する方法を解説しています。「format on save」を設定し、インデントの種類を変更する手順も紹介しています。詳細はこちら。

まとめ

Visual Studio Codeは、シンプルで使いやすいインターフェース、多機能で拡張性の高いエディタとして、初心者からプロフェッショナルまで幅広いユーザーに支持されている。MarkdownやJavaScriptのコード編集、WSLを使った開発環境の整備など、さまざまな用途に対応できるため、ぜひ一度インストールしてその使いやすさと便利さを体験してみてほしい。

Closing

VSCodeがWindowsにプリインストールされていないのはなぜだろうか……