techno_memo

個人用の技術メモ。python・ROS・AI系のソフトウェア・ツールなどの情報を記載

Visual Studio Codeの便利な設定・拡張機能

この記事の目的

 Visual Studio Codeの便利な設定・拡張機能についてまとめる

1. 共通設定

下記拡張機能をインストール (インストール後VScodeの再起動が必要)

marketplace.visualstudio.com

  • スペースの可視化

ファイル⇒基本設定⇒設定画面に移動し、"Editor: Render Whitespace"の設定をALLに変更する。 f:id:sd08419ttic:20200409004442p:plain

  • エディタの縮小・拡大 (Ctrl + マウスホイールのズーム)

ファイル⇒基本設定⇒設定画面に移動し、"Ctrl キーを押しながらマウス ホイールを使用してエディターのフォントをズームします。"を有効化 リセットはコマンドパレットの『エディターのフォントのズームをリセット』を選択する。

f:id:sd08419ttic:20200409004906p:plain

  • 対応する括弧の強調表示

コード上の対応する括弧を可視化するための拡張機能

marketplace.visualstudio.com

  • インデントレベルの強調表示

同じインデントレベルごとに色分けして表示するための拡張機能

marketplace.visualstudio.com

  • アイコンの変更

ファイル拡張子がわかりやすいアイコンに変更する拡張機能。インストール後にファイル⇒基本設定⇒設定画面に移動し、Workbench: Icon Themeからvscode-iconsを選択する。

marketplace.visualstudio.com

  • フォルダ・ファイルパスの補完

フォルダ・ファイルパスを自動補間するための拡張機能。下記をインストール後、エディタで"/"と入力してCtrl + Spaceでフォルダ階層を補間することができる。

marketplace.visualstudio.com

1. ソフト開発用の設定/拡張機能

プログラム言語ごとに役立つ拡張機能をまとめる

C言語用設定・拡張機能

C言語開発の拡張機能(InteliSense/デバッグ機能など)

marketplace.visualstudio.com

プロジェクト設定方法は下記などを参考にする。Windows+個人開発であればVS CodeでなくVisual Studio 2019を使った方が面倒な設定をせずにより充実した機能を利用できる。

qiita.com

C言語でDoxgenのフォーマットに従ったコメントをプレビュー表示することができる拡張機能。Doxgenフォーマットに従ったコメントを記述したC/Hファイルを開いて"Doxgen Previewer"を表示。

marketplace.visualstudio.com

Python用設定・拡張機能

Python開発の拡張機能(InteliSense/デバッグ機能など)

marketplace.visualstudio.com

  • Anaconda

AnacondaをVS Codeで読み込むための機能。コマンドパレットでPython Interpreter からAnaconda仮想環境の切り替えが可能になる。

marketplace.visualstudio.com

2.ドキュメント作成用の設定/拡張機能

VS Code標準機能を使う場合、下記サイトに従いコマンドパレット⇒『Markdownプレビューを横に表示』でプレビューを確認しながらMarkdownを編集できる。

www.atmarkit.co.jp

上記ではなく拡張機能Markdown Enhanced』をインストールすると『KaTex』を用いた数式の追加も行うことができ利便性が上がる。 表示するにはインストール後にコマンドパレット⇒『Markdown Preview Enhanced: Open Preview to the Side』を選択する。

marketplace.visualstudio.com

設定後のイメージ (プレビュー画面でKaTexの数式プレビューが表示可能)

f:id:sd08419ttic:20200409233429p:plain

Katexに関する記述は下記サイトが参考になる。

https://b1tblog.com/2019/10/08/vscode-math/

記述したmarkdownをインストールするためには下記の拡張機能を利用できる。 インストール後にコマンドパレット⇒『Markdown PDF Export:XXX』を選択する。(PDF/HTML/JPEGなどで出力できる。KaTEXも反映される)

marketplace.visualstudio.com

markdownコピーアンドペーストした画像を張り付ける際には下記拡張機能が便利である。 画像をCtrl+Cでコピーした状態でCtrl+Alt+Vで画像を指定したフォルダにコピーし、Markdownファイルのリンク生成ができる。

marketplace.visualstudio.com

画像を保存するフォルダは下記設定から指定できる。下記設定をしておくと、markdownファイルと同じ階層にあるimageフォルダに画像が追加されていく設定になる。 f:id:sd08419ttic:20200409235148p:plain

  • Review環境

VS CodeでReviewファイルを編集するための拡張機能として下記を利用できる。

marketplace.visualstudio.com

Review自体のインストールが必要となるので下記サイトを参考に導入するとよい。

my-web-site.iobb.net

  • 日本語校正

MarkdownおよびReviewの日本語校正拡張機能として下記を利用できる。冗長な言い回しの添削などに活用できる。

marketplace.visualstudio.com

3.設定・拡張機能の別PCへの移行方法

githubを利用できる環境では下記手順で移動できる (未確認)

https://nelog.jp/vscode-sync

利用するのに問題がある場合、下記のように設定ファイルをコピーすることができる。 (バージョンによって異なる可能性があるので要バックアップ)

qiita.com