MicroSoft製の高機能エディタです。

Visual Studio IDE、コード エディター、Azure DevOps、App Center - Visual Studio
Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free.
- インストール
- 設定例
- 拡張機能
- Japanese Language Pack
- Hopscotch (Official)
- Active File In StatusBar
- Clipboard Manager
- Sort Lines
- Path Autocomplete
- EditorConfig for VSCode
- Markdown Preview Enhanced
- Paste Image
- Code Spell Checker
- テキスト校正くん
- Auto Rename Tag
- htmltagwrap
- Highlight Matching Tag
- Prettier
- Color Highlight
- Color Picker
- CSS Peek
- Easy Sass
- Live Server
- Git Graph
- GitLens
- Bracket Pair Colorizer2
- Background Phi Colors
- Clairvoyant
- Output Colorizer
- Log File Highlighter
- Better Comment
- Regex Previewer
- change-case
- DotENV
- Excel Viewer
- Rainbow CSV
- Draw.io Integration
- Vega Viewer
- SVG Viewer
- Marp for VS Code
- Project Manager
- Peacock
- ToDo Tree
- GistPad
- Remote Development
- Docker
- Ansible
- Vagrantfile Support
- PHP
インストール

Visual Studio IDE、コード エディター、Azure DevOps、App Center - Visual Studio
Visual Studio dev tools & services make app development easy for any platform & language. Try our Mac & Windows code editor, IDE, or Azure DevOps for free.
Chocolatey
choco install -y vscode
フォント
プログラミングフォント白源 (はくげん/HackGen)
https://github.com/yuru7/HackGen/releases
[ HackGenNerd_vX.X.Xzip ]
Chocolatey
choco install -y font-hackgen-nerd
設定例
{
"files.encoding": "utf8", // 既定のエンコード
"files.eol": "\n", // 既定の改行文字
"files.autoGuessEncoding": true, // エンコード自動判別
"files.insertFinalNewline": true, // 最終行に改行
"files.trimFinalNewlines": true, // 最終行をトリミング
"files.trimTrailingWhitespace": true, // 行末のスペース削除
"editor.fontFamily": "HackGenNerd",
"editor.tabSize": 4,
"editor.detectIndentation": false, // 開いたファイルからインデントを自動判別
"editor.insertSpaces": true,// タブキーをスペース入力
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.minimap.enabled": false, // ミニマップを表示
}
拡張機能
Japanese Language Pack
日本語化
Hopscotch (Official)
配色テーマ
設定 - 配色テーマ - Hopscotch
Active File In StatusBar
ステータスバーにフルパス表示
Clipboard Manager
複数クリックボード
Sort Lines
行をソート・ユニーク・ジョイン
Path Autocomplete
パスの入力を支援
EditorConfig for VSCode
エディタの設定を.editorconfig
に定義
Markdown Preview Enhanced
編集中のMarkdownのプレビューを表示
Paste Image
画像貼り付け支援
Ctrl + Alt + V
Code Spell Checker
スペルミスを検出
テキスト校正くん
テキストファイルまたはMarkdownファイルの日本語の文章をチェック
Auto Rename Tag
HTMLタグをリネーム
htmltagwrap
選択範囲をタグで囲んでくれる
Alt + W
Highlight Matching Tag
対応するタグを強調表示する
Prettier
JavaScriptやTypeScript、CSS、HTMLなどのコードフォーマッター
"prettier.tabWidth": 4
Color Highlight
色コードの背景にその色を表示
Color Picker
カラーパレット表示・選択
CSS Peek
要素に当てられているスタイル(CSS)を表示
Easy Sass
ファイル保存時に自動でSASSをCSSにコンパイル
Live Server
ローカルのウェブサーバーを起動
Git Graph
Gitのコミット履歴
GitLens
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.currentLine.enabled": false,
Bracket Pair Colorizer2
カッコの対応を色付きで表示
Background Phi Colors
インデントの深さに応じた着色
Clairvoyant
ソースのトークンを洗い出しその出現箇所へのアクセス
Output Colorizer
出力結果を装飾
Log File Highlighter
ログを自動で配色
Better Comment
特定のワードや記号から始まるコメントに色をつける
Regex Previewer
正規表現をチェック
change-case
文字列のフォーマットを変換してくれる拡張機能。
DotENV
.envファイルサポート
Excel Viewer
CSVプレビュー
Rainbow CSV
CSVの列を色別で表示
Draw.io Integration
作図
Vega Viewer
グラフ
SVG Viewer
SVGビューワー
Marp for VS Code
プレゼン資料
Project Manager
VS Codeのフォルダーなどブックマーク
Peacock
プロジェクトごとにカラーを変える
ToDo Tree
TODO などのコメントを一覧表示
GistPad
GitHubのGistの作成・編集
コメント