VS Code

vscode-setup.md

VSCode

1. VS Codeのインストール

https://code.visualstudio.com/ から最新版をインストールする

2. CUIの有効化

インストールしたVS Codeを起動して以下を実行

• 2-1. Command + Shift + P でコマンドパレット開く
• 2-2. コマンドパレットで Shell と検索してインストール

ref. ターミナルからVisual Studio Codeを起動する方法【公式の方法】 - Qiita

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

ターミナル.appから以下のコマンドを実行するか、それぞれのリンクから拡張機能をインストールしてください。

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

• 日本語化

code --install-extension MS-CEINTL.vscode-language-pack-ja
# 以下が必要
code . --locale=ja

HTML Snippets - Visual Studio Marketplace

• htmlのスニペット

code --install-extension abusaidm.html-snippets

HTMLHint - Visual Studio Marketplace

• htmlのHint/Lint

code --install-extension mkaufman.HTMLHint

IntelliSense for CSS class names in HTML - Visual Studio Marketplace

• html入力時のcssクラス名補完

code --install-extension Zignd.html-css-class-completion

Path Autocomplete - Visual Studio Marketplace

• パス補完

code --install-extension ionutvmi.path-autocomplete

Prettier - Code formatter - Visual Studio Marketplace

• コード整形

code --install-extension esbenp.prettier-vscode

Code Spell Checker - Visual Studio Marketplace

• スペルチェッカー

code --install-extension streetsidesoftware.code-spell-checker

Live Server - Visual Studio Marketplace

• local server
• フッタのステータスバーから Go Live

code --install-extension ritwickdey.LiveServer

Bracket Pair Colorizer - Visual Studio Marketplace

• 対応かっこの強調表示

code --install-extension CoenraadS.bracket-pair-colorizer

Trailing Spaces - Visual Studio Marketplace

• 末の空白表示

code --install-extension shardulm94.trailing-spaces

indent-rainbow - Visual Studio Marketplace

• インデントをみやすく

code --install-extension oderwat.indent-rainbow

VS Color Picker - Visual Studio Marketplace

• カラーピッカー

code --install-extension lihui.vs-color-picker

vscode-icons - Visual Studio Marketplace

• ファイルアイコン表示

code --install-extension robertohuertasm.vscode-icons

GitHub Pull Requests - Visual Studio Marketplace

• githubのpull request管理

code --install-extension GitHub.vscode-pull-request-github

Duplicate action - Visual Studio Marketplace

• ファイル、ディレクトリのコピー

code --install-extension mrmlnc.vscode-duplicate

---

参考

拡張機能の保存先

`~/.vscode/extensions/*

CUI コマンド

# list
$ code --list-extensions

# install
$ code --install-extension [package]

# uninstall
$ code --uninstall-extension [package]

# disable
$ code --disable-extensions