10分でVSCodeの開発環境を整える
こんにちわ、krkettleです
この記事では VSCode の開発環境を整える方法について紹介します
この記事を読んで分かること
※macOS で稼働確認をしています
前提条件
対象者
- エディタとして VSCode を使おうとしている人
- VSCode で Remote SSH を使おうとしている人
- SSH 接続先で vim/emacs 等 を使っているが、GUI で操作したいと思っている人
VSCode(Visual Studio Code) とは
- Microsoft が開発しているエディタ
- 無償で利用可能(公式サイトからダウンロード可能)
- Windows だけでなく、Linux, macOS で利用可能
- プラグインを入れることでカスタマイズが可能
VSCode を使うと何が嬉しいか
VSCode 以外にも以下のようなエディタがあります
上記のエディタを一通り使いましたが、VSCode の魅力と思うのは
プラグインをインストールする
VSCode の魅力の一つであるプラグインのインストール方法を紹介します
方法は主に以下の２つです
今回は Code コマンドの方法を紹介します
Code コマンドの有効化
「Command + Shift + P」でコマンドパレットを起動し、
「Shell Command: Install 'code' command in PATH」をクリックします
(Shell Command くらいまで入力すれば出てきます)
※以降で紹介するプラグインを全てインストールする場合は次のコマンドを実行してください
code --install-extension pkief.material-icon-theme code --install-extension coenraads.bracket-pair-colorizer code --install-extension eamodio.gitlens code --install-extension mhutchie.git-graph code --install-extension ms-vscode-remote.remote-ssh code --install-extension ms-vscode-remote.remote-containers
見た目系プラグイン
まずは見た目を整えるためのプラグインです
material-icon-theme
画面左に表示される Explorer のロゴをいい感じにするプラグインです
code --install-extension pkief.material-icon-theme
Bracket Pair Colorizer
対応する括弧をわかりやすく表示してくれるプラグインです
code --install-extension coenraads.bracket-pair-colorizer
開発系プラグイン
次は開発系のプラグインです
プログラミングをする上で必須とも言える Git のサポートプラグインや
SSH, Docker のサポートプラグインを紹介します
GitLens
Git のコミット履歴や、誰がいつコミットしたかが手軽に分かるようにするプラグインです
code --install-extension eamodio.gitlens
GitGraph
Git のコミットグラフが手軽に分かるようにするプラグインです
code --install-extension mhutchie.git-graph
Remote SSH
SSH 接続先のファイルを VSCode 上で修正できるプラグインです
以下の手順で Remote SSH が出来ます
プラグインをインストール
code --install-extension ms-vscode-remote.remote-ssh
~/.ssh/config を書く
こちらに関しては以下の記事を参照してください
SSH 接続する
以下の 2 つの方法があります
- コマンドパレットから SSH 接続する
- 「Command + Shift + P」でコマンドパレットを起動します
- 「Remote-SSH: Connect to Host...」を検索してクリックします
- 左下のボタンから SSH 接続する
- 左下のボタンをクリックします
- Remote-SSH: Connect to Host...」をクリックします
Remote Container
Docker コンテナ上のファイルを VSCode 上で修正できるプラグインです
code --install-extension ms-vscode-remote.remote-containers
こちらも RemoteSSH とほぼ同様でコマンドパレットまたは左下のボタンから
「Remote-Containers: Attach to Running Container...」をクリックします
Docker に関しては以下の記事を参照してください
VSCode をカスタマイズする(setting.json)
「Command + Shift + P」でコマンドパレットを起動し、
「Preferences: Open Settings (JSON)」を検索しクリックします
以下の内容は執筆時における筆者の settings.json なので、
適宜自分の好みに合わせて修正してください
{ // workbench "workbench.startupEditor": "newUntitledFile", "workbench.colorTheme": "Monokai", "workbench.iconTheme": "material-icon-theme", // editor "editor.fontFamily": "Source Han Code JP", "editor.fontSize": 14, "editor.tabSize": 2, "editor.renderWhitespace": "all", "editor.suggestSelection": "first", "terminal.external.osxExec": "iTerm.app", "explorer.confirmDragAndDrop": false, // python "[python]": { "editor.tabSize": 4 } // (以下、略) }
内容を一部抜粋して紹介します
(settings.json で各項目にカーソルを合わせると内容が表示されます)
"workbench.iconTheme": "material-icon-theme"- Explorer のアイコンの設定
- 前項でインストールした material-icon-theme を設定
"editor.fontFamily": "Source Han Code JP""editor.renderWhitespace": "all"- スペースを薄く表示する設定
- markdown で改行忘れが減った気がする
"terminal.external.osxExec": "iTerm.app"- ターミナルを iTerm にする
- ターミナルは「Commanda + J」で開く・閉じることができる
