Visual Studio Code（VS Code）¶

VS Codeとは¶

Visual Studio Code（VS Code）は、Microsoftが開発しているソースコードエディタである。

現在最も利用者が多い開発環境の一つであり、

• Web開発

• 組み込み開発

• サーバー開発

• AI開発

など幅広い用途で利用されている。

VSとVS Codeの違い¶

よく混同されるが別物である。

VS Codeは

軽量で拡張性の高いエディタ

として設計されている。

VS Codeの特徴¶

無料¶

誰でも利用できる。

軽量¶

起動が速い。

拡張機能が豊富¶

機能を後から追加できる。

クロスプラットフォーム¶

対応OS

• Windows

• Linux

• macOS

主な用途¶

VS Codeは様々な言語に対応している。

例

• C

• C++

• C#

• Python

• JavaScript

• TypeScript

• HTML

• CSS

• Rust

• Go

Asterでは主に

• STM32関連コード

• Node.js

• MkDocs

• ドキュメント管理

で利用できる。

基本画面¶

構成は以下のようになっている。

┌────────────────────┐
│ タブ              │
├────────────────────┤
│                    │
│ エディタ          │
│                    │
├────────────────────┤
│ ターミナル        │
└────────────────────┘

エクスプローラー¶

左側のファイル一覧。

例

Aster
├─ docs
├─ firmware
├─ hardware

ターミナル¶

VS Code内でコマンドを実行できる。

例

git status

npm install

mkdocs serve

拡張機能（Extensions）¶

VS Code最大の特徴。

追加できる機能例

• GitHub

• Python

• C/C++

• Markdown

• Docker

• Remote SSH

拡張機能のインストール¶

左の

Extensions

アイコンから検索して導入する。

Git連携¶

VS CodeにはGit機能が標準搭載されている。

できること

• Commit

• Push

• Pull

• Branch切り替え

• 差分確認

GitHub連携¶

GitHubアカウントと接続できる。

例

GitHub Repository
↓
VS Code

そのままPushできる。

Markdown編集¶

ドキュメント作成に非常に便利。

例

# タイトル
本文

プレビュー表示も可能。

ショートカット

Ctrl + Shift + V

Node.js開発¶

VS CodeはNode.jsとの相性が良い。

例

console.log("Hello");

実行

node app.js

HTML/CSS開発¶

Web開発で広く利用される。

対応

• HTML

• CSS

• JavaScript

• TypeScript

IntelliSense¶

自動補完機能。

例

console.

と入力すると

log()
error()
warn()

などを候補表示する。

デバッグ機能¶

ブレークポイントを設定できる。

例

処理停止
↓
変数確認
↓
1行ずつ実行

バグ調査に非常に便利。

Remote SSH¶

遠隔サーバーへ接続できる。

例

VS Code
↓
SSH
↓
VPS

Asterでは

ConoHa VPS

の管理に利用できる。

Dev Containers¶

Dockerコンテナ内で開発できる。

環境差異を減らせる。

Workspace¶

複数フォルダをまとめて管理できる。

例

Aster.code-workspace

構成

firmware
docs
server

よく使うショートカット¶

ファイル検索¶

Ctrl + P

全体検索¶

Ctrl + Shift + F

ターミナル表示¶

Ctrl + `

保存¶

Ctrl + S

コマンドパレット¶

Ctrl + Shift + P

Asterでおすすめの拡張機能¶

GitHub Pull Requests¶

GitHub連携。

Markdown All in One¶

Markdown編集強化。

Material Icon Theme¶

見やすいアイコン。

C/C++¶

STM32関連。

Error Lens¶

エラーを見やすく表示。

Remote SSH¶

VPS管理。

YAML¶

MkDocs編集用。

Asterでの利用例¶

ドキュメント¶

MkDocs

Web¶

Node.js
HTML
CSS
JavaScript

組み込み¶

STM32

Git管理¶

GitHub

VS Codeのメリット¶

• 無料

• 軽量

• 拡張機能が豊富

• Git連携が強力

• 多言語対応

VS Codeのデメリット¶

• IDEほど統合されていない

• 拡張機能を入れすぎると重くなる

• 設定項目が多い

まとめ¶

VS CodeはMicrosoft製の高機能コードエディタである。

• 軽量で高速

• 多言語対応

• GitHubとの相性が良い

• Node.jsやWeb開発に強い

• Markdown編集が快適

Asterでは、ファームウェア・ドキュメント・サーバー管理を一つの環境で行えるため、開発の中心となるツールである。

¶