底辺SE奮闘記

年収300万SEブログ

【VisualStudioCode】私の使っている拡張機能 随時更新 - LastUpdate : 2020/8

私が使用している拡張機能の中で広く有用であると感じたものを列記します。随時更新予定。

コーディング系

Background Phi Colors

marketplace.visualstudio.com

カーソルが当たっている単語と同じ単語がハイライトされる。

うっかり誤字を防げます。

Blacket Pair Colorizer 2

marketplace.visualstudio.com

括弧のペアが同じ色で着色される。

カッコが多すぎるとか少なすぎるといった問題発生を抑制

EvilInspector

marketplace.visualstudio.com

プログラミングのバグを生み出す元凶の一つ全角スペースを強調表示します。

Trailing Spaces

marketplace.visualstudio.com

行末空白を強調表示します。ファイルサイズも地味に削減できていいですね。

ファイル表示系

vscode-pdf

marketplace.visualstudio.com

vscode内でPDFを表示できるようになります。

SVG Viewer

marketplace.visualstudio.com

vscode内でSVGを表示できるようになります。

Excel Viewer

marketplace.visualstudio.com

vscode内でCSV, Excelが開けるようになります。

Markdown

Markdown PDF

marketplace.visualstudio.com

Markdownで書いた文書をPDF形式で保存できる拡張。

Markdown TOC

marketplace.visualstudio.com

Markdown文書に目次を挿入できる拡張。

markdown-index

marketplace.visualstudio.com

Markdown文書の"#"にインデックス番号を付記する拡張。(ページ番号をつけてくれるわけではない)

VSNotes

marketplace.visualstudio.com

VSC上でメモをタグ付管理するツール。

メモの管理フォルダ指定の設定例は下記

"vsnotes.defaultNotePath": "/Users/OOO/memo",

Web系

Color the tag name

marketplace.visualstudio.com

HTMLタグの開始タグと閉じタグが同色で着色され、タグのペアが判別しやすくなる拡張。ただ、下記のユーザー設定とは相性が少し悪い(半角スペースと中黒の区別がつきづらい)

"editor.renderWhitespace": "all"

vscode-caniuse

marketplace.visualstudio.com

モダンブラウザにcssが対応しているかどうかを確認できるサイト

Can I use... Support tables for HTML5, CSS3, etc

とVSCを連携するプラグイン

Windows向けなのか初期設定キーバインドが「Option + i」なのでMacの場合は「コマンド + i」などに変更すると良い。

cssプロパティを選択した状態で「Option + i」からのエンターキーで下のステータスバーに対応状況が表示される。

その他

Rainbow CSV

marketplace.visualstudio.com

CSVの各カラムを色付けして見やすくしてくれる拡張。

GitLens

marketplace.visualstudio.com

Git管理しているコード中で、カーソルを合わせている部分の直近コミットコメントを確認できる拡張。その部分をいつ誰が変更したのかがわかって便利です。

PHPDocument

marketplace.visualstudio.com

PHPの関数の公式リファレンスを右クリックからvscode内に表示してくれる拡張。

インストール直後は英語リファレンスにジャンプするのでUSER SETTINGに

"PHPDocument.language": "Japanese"

を追加すると日本語ページを開くようになる。

テキスト構成くん

marketplace.visualstudio.com

メモやマークダウンの日本語文章を構成してくれる拡張。日本語が不自由な私のような人間に最適。