Visual Studio Code

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.

visualstudio.microsoft.com

インストール

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.

visualstudio.microsoft.com

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の作成・編集

Remote Development

Docker

Ansible

Vagrantfile Support

PHP

PHP Intelephense

PHP DocBlocker

PHP Debug

Laravel 5 Snippets

Laravel Blade Snippets