yshr10ic’s Blog

備忘録

MacBook Pro VSCodeの設定

こんにちは、@yshr10icです。

MacBook ProでのVSCodeの設定について備忘録として残していきます。

前提条件

  • PC:MacBook Pro(13-inch, 2020, Four Thunderbolt 3 ports
  • OS:macOS Catalina(バージョン:10.15.4)

Visual Studio CodeVSCode

VSCodeは以下からダウンロードします。

azure.microsoft.com

拡張機能の追加

拡張機能を入れる前のデフォルトはこんな感じです。

f:id:yshr10ic:20200523171144p:plain

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化。

f:id:yshr10ic:20200523172135p:plain

vscode-icons

ファイル名の横にアイコンを表示する。

https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/images/screenshot.gif

Prettier

コードの自動フォーマッタ。

marketplace.visualstudio.com

Bracket Pair Colorizer 2

(){}などのカッコを色別に表示してくれる。 以前はBracket Pair Colorizerを使用していたが、最終更新日が2019/7/16となっていたので、新しいバージョンの方をインストール。

https://github.com/CoenraadS/BracketPair/raw/master/images/example.png

Path Autocomplete

パスの自動入力。

https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif

Partial Diff

選択した部分の差分を確認できるプラグイン

https://raw.githubusercontent.com/ryu1kn/vscode-partial-diff/master/images/public.gif

Rainbow CSV

CSVを列ごとに色分けして表示してくれるプラグイン

https://i.imgur.com/PRFKVIN.png

TODO Highlight

TODOなどのコメントにハイライトを設定できるプラグイン

https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night-eighties.png

Trailing Spaces

marketplace.visualstudio.com

Regex Previewer

正規表現を簡単にチェックできるプラグイン

https://github.com/chrmarti/vscode-regex/raw/master/images/in_action.gif

SQLTools

DBクライアント。

marketplace.visualstudio.com

GitLens

git blameVScodeで使えるようにしたもの。ちなみにblameコマンドは特定の行がいつ誰のコミットによって変更されたのかを確認するコマンド。

https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/gitlens-preview.gif

Git History

https://raw.githubusercontent.com/DonJayamanne/gitHistoryVSCode/master/images/gitLogv3.gif

Python

Pythonのインテリセンスやデバッガなどの機能を入れてくれるプラグイン

marketplace.visualstudio.com

codeコマンドのインストール

VSCodeはターミナルで、codeコマンドを実行すると、VSCodeを開くことができますが、デフォルトだとCommand not foundとなります。

f:id:yshr10ic:20200523213603p:plain

VSCodeを開いて、Command + Shift + pでコマンドパレットを開きます。そこで、Shell Command: Install 'code' command in PATHを選択します。

f:id:yshr10ic:20200523213807p:plain

Shell command 'code' successfully installed in PATH.とポップアップが出るので、あとはターミナルからcodeコマンドが使用できるようになります。

まとめ

VSCodeの設定は以上です! 追加のプラグインなど入れた場合は、更新していきたいと思います!