こんな人にオススメ
Visual Studio Codeとやらに手を出したけどどの「拡張機能」を入れたら便利なのかわからん！
おすすめの拡張機能を教えて！
ということで、今回はカスタム好きな執筆者が普段から愛用しているVisual Studio Code（VScode）の拡張機能について紹介する。拡張機能を使用することでより便利に効率よく作業を行うことができる。
執筆者はVScodeで以下の作業を行なっている。
- python
- C
- Jupyter notebook
- Markdown（最近Typoraに移行）
- LaTeX
- Excel閲覧
これらの作業を行っている方々は参考にしていただければ幸いだ。VScodeの拡張機能タブで並んでいる順番で紹介する。基本的にはアルファベット順。
なお、今回の拡張機能の分類は執筆者自身が「この場面でよく使う」と考えた項目で書いている。人によってはその項目ではないだろと思うかも知れないが、そこはあらかじめご了承ください。
目次（クリック・タップでジャンプ）
拡張機能とは
そもそも拡張機能とは何なのかということだが、デフォルトのVScodeではカバーできない機能を付加するというもの。
拡張機能なしでも作業することができるが、拡張機能があるともっと早く効率的に作業を行うことができる。
例えば以下のコードを考える。
def rensiu(a: int, b: list):
"""intで入力したaと、listで入力したbの値を型を確認
Parameters
----------
a : int
intとして入力する変数
b : list
listとして入力する変数
Returns
-------
tutple
入力したaとbをtupleに入れて出力
"""
print(f"aの値は{a}で、型は {type(a)}です")
print(f"bの値は{b}で、型は {type(b)}です")
return a, b
ans = rensiu(a=10, b=[1, 2, 3])
print(f"ansの値は{ans}で、型は {type(ans)}です")
# aの値は10で、型は <class 'int'>です
# bの値は[1, 2, 3]で、型は <class 'list'>です
# ansの値は(10, [1, 2, 3])で、型は <class 'tuple'>です
このコードの2行目の"""から始まる文章は「Docstring」というもので、関数の意味とか変数についての説明を行う文章。
実はこのDocstringは全部を自分でポチポチ入力したわけではない。拡張機能で以下のように雛形を作成してもらってから、必要な部分だけを入力した。
def rensiu(a: int, b: list):
"""[summary]
Parameters
----------
a : int
[description]
b : list
[description]
Returns
-------
[type]
[description]
"""
print(f"aの値は{a}で、型は {type(a)}です")
print(f"bの値は{b}で、型は {type(b)}です")
return a, b
このように、拡張機能を入れると作業を効率化できるし曖昧なところを自動で補完してくれるので余計な時間が取られない。ただ、補完に頼りすぎて覚えられないというデメリットもあるが。
今回はこのような拡張機能を紹介する。
入れている拡張機能一覧
現在VScodeで入れている拡張機能については以下のコードをターミナルなどで実行することで確認することができる。
code --list-extensions
作成者を削除し拡張機能の名称のみにした場合は以下のようになる。
また、拡張機能の名称を昇順に変更したものを以下に示す。これはVScode上で「（並び替えたい部分を選択）」→「F1」→「（sortで検索）」→「行を昇順で並び替え(Sort Line Ascending)」で可能。
本記事で紹介する項目を付与した、アルファベット順の拡張機能一覧を以下に示す。
autodocstring...プログラミング系 Bookmarks...便利系 bracket-pair-colorizer-2...レイアウト系 code-runner...プログラミング系 code-search...プログラミング系 colonize...プログラミング系 cpptools...プログラミング系 deepdark-material...レイアウト系 gc-excelviewer...便利系 indent-rainbow...レイアウト系 jupyter...プログラミング系 latex-workshop...ラテックス系 markdown-all-in-one...マークダウン系 markdown-preview-enhanced...マークダウン系 material-icon-theme...レイアウト系 multiwindows-highlight...便利系 nbpreviewer...プログラミング系 partial-diff...プログラミング系 path-intellisense...プログラミング系 prettier-vscode...プログラミング系 python...プログラミング系 Python-autopep8...プログラミング系 python-preview...プログラミング系 quitcontrol-vscode...便利系 selectline-statusbar...便利系 vscode-color...便利系 vscode-input-sequence...プログラミング系 vscode-language-pack-ja...便利系 vscode-pylance...プログラミング系
今回はこの項目の分類で紹介する。
レイアウト系
まずはVScodeのレイアウト関連の拡張機能。別になくてもいいが、あると見やすくなったりするものだ。代替できる拡張機能はあるので好みのものを使って自分でカスタムすればいいだろう。
Bracket Pair Colorizer 2
この拡張機能は、対応するカッコをそれぞれ色付けしてくれるもの。
カッコが増えるとどのカッコがどのカッコと対になっているのかがわかりにくい。そこでこの拡張機能で対になっているカッコを色付けして対応をわかりやすくしている。
こんな人にオススメ
VScodeのバージョン1.60（Visual Studio Code August 2021）にて、カッコの色つき対応が標準でサポートされるようになりました。
要するに、このバージョンを使用している人はこの拡張機能を使用せずとも色つけ対応できるということ。1.60以降の人はこの拡張機能は必要なし。
Deepdark Material Theme
こちらはエディタのテーマの拡張機能。個人的にはエディタは黒背景に白文字が好みなのでこのテーマを選択。色々試した結果、このテーマが一番マッチしていた。
ただ、このテーマをそのまま使っているわけではなく、よりビビットな感じに調整している。調節内容は現状以下。割とノリで決めたので変更するかも。
"editor.tokenColorCustomizations": {
"comments": "#6c9bd2"},
"workbench.colorCustomizations": {
"editor.selectionBackground": "#4e454a",
"editor.selectionHighlightBackground": "#472dbd",
"editorLineNumber.foreground": "#969696",
"editor.findMatchBackground": "#326432",
"editorIndentGuide.background": "#969696"
},
indent-rainbow
インデントに色をつけてくれる拡張機能。pythonではインデントが超重要でインデントの位置がズレると意味が変わってくる。そこでパッと見でどれだけのインデントがついているのかを知るために導入。
こちらも多少のカスタムを加えている。基本的には少し濃くしているはず（設定を昔にしたから忘れてる）。
"indentRainbow.colors": [
"rgba(255,255,64,0.15)",
"rgba(127,255,127,0.15)",
"rgba(255,127,255,0.15)",
"rgba(79,236,236,0.15)"
],
Material Icon Theme
VScode上のエクスプローラーのファイルのアイコンを変更してくれる拡張機能。他にも色々と似た拡張機能は存在するが、検索した際にこれを一番最初に目にしたからそのまま導入。
今のところ見やすくて満足。
便利系
次は便利系。これを入れておくと意外にも便利だなというもの。最近使用していないものや、無意識で使っているものもあるので、一度入れてみてもいいのではないだろうか。
Bookmarks
こちらはコード上の行にブックマーク（しおり）を挟んで後から読み直すことができるという拡張機能。後から読み返したい時に使用できる。
一番左のエクスプローラーや拡張機能のボタンがあるタブ（cmd + 0で移動できるところ）にこの拡張機能のボタンが追加され、そこからブックマークした部分を確認することができる。
Color Picker
色を決めたいときにグラフィカルに選択することができる拡張機能。既に配色を決めてしまっているのであまり使うことがないが、配色を新たに決めるときに使うつもり。
Excel Viewer
ExcelやcsvファイルをVScodeで開けるようにする拡張機能。Excelの場合は構造が複雑なのでうまく読み込めない可能性があるが、csvの場合はtxtみたいなものだから綺麗に開くことができる。
Excelを新規で立ち上げるよりもVScodeで開く方が早いのでクイックに見たい時に使用している。また、ソートやフィルターも簡単に実装できるので便利。
Japanese Language Pack for Visual Studio Code
VScodeの表記を日本語にする拡張機能。英語で読みたくない人は入れておいて損はないだろう。
multiWindows-highLight
複数ウィンドウを開いている場合に、一つのウィンドウで選択しハイライトされた文字を他のウィンドウでもハイライトしてくれる拡張機能。
執筆者は1つのコードをウィンドウ2分割し、片方で上の方のコードを、もう片方で下の方のコードを表示することがある。その時に片方で選択した単語などをもう片方でもハイライトかけたい時に便利。
Quit Control for VSCode
間違えてcmd + Qを押した際に即VScodeが終了されるのを防ぐ拡張機能。cmd + 1などを押す際に間違えて押すと、一旦、「本当に終了しますか」的なことを聞かれる。
そこで押し間違えに気づいて即終了になるのを防ぐことができる。これを入れるまでは押し間違えによる即終了が頻発したので重宝している。
が、入れてから押し間違えが減ったのはなぜだろうか。
Select Line Status Bar
選択した行の行数を表示してくれる拡張機能。実際のところ何行なのかを行番号からいちいち計算せずに済むので重宝。
プログラミング系
執筆者はpythonとCをVScodeで行なっているのでその関連の拡張機能と、プログラミング時に楽になるだろう拡張機能を入れている。
C/C++
C言語の入力補完とデバッグのための拡張機能。Cのファイルを作成した時に拡張機能を入れてねというポップアップが出たので導入。執筆者のVScode上でのC言語の導入については以下参照。
この拡張機能を入れることでifを打つだけで以下の補完が効くようになる。また、ifには特別に色をつけて通常の文には通常の色をつけるといったハイライト機能もついている。
if (/* condition */)
{
/* code */
}
まだまだC言語は勉強途中なので補完してくれるのはありがたい。
Code Runner
Code Runnerはコードの実行を簡単に行うことができる拡張機能。今までは
- ターミナルを開く
- パスを通す（エクスプローラーを開いていたら通さなくてもいい）
python （ファイル名）や、ipythonからrun （ファイル名）を入力して実行- 実行される
というステップを踏んでいたが、Code Runnerを使用すると
ctrl + option + nで実行- 実行される
とステップが半分となった。とても画期的だがCode Runnerでの出力を「出力」のタブで行う場合、「出力」タブが読み取り専用なので入力ができない。すなわちC言語のscanfやpythonのinputなどは使用することができない。
これを回避するにはVScodeの設定をcmd + ,で開いて「code runner terminal」と検索する。そうすると「Code-runner: Run In Terminal」という項目がヒットするのでそのチェックボックスを入れる。
こうすることでターミナル上で動かすことができ、入力が可能になる。
Colonize
この拡張機能はC言語の文末の;をショートカットで入力可能にするもの。pythonでは;は使用しないのでいつも忘れる。そこでこの拡張機能で同じ行にいるなら文末にすぐに打てるようにした。
本当は保存時に自動で入力できるようにしたい。
Jupyter
Jupyter NotebookをVScode上で作成、実行するための拡張機能。昔はJupyter Notebookを使用していたのでその名残で入れている。
Jupyter Notebookの全体の雰囲気については後に出てくる「VS Code Jupyter Notebook Previewer」の節を参照。
Partial Diff
文章の差分をとることができる拡張機能。同じような2種類の文章のどこが違うのかを色付きで教えてくれる。コードの移植時に使用することが多い。
Path Intellisense
./と打つと、そのディレクトリからいけるディレクトリやファイルの名称を保管してくれる拡張機能。これのおかげで異なるフォルダへ保存する際のパス補完がとても楽になった。
デメリットは毎回./を打たないといけないという点。仕方ないかもしれないが、打つのを忘れて補完が効かなかったときは拡張機能がバグったと焦る。
Prettier - Code formatter
コードの書式（tabの数とかカッコの位置とか）を自動で整えてくれる拡張機能。pythonには対応していないがCとMarkdownには対応していたので導入。この拡張機能で自動で書式が整うので楽に書くことができる。
pythonについては次のPylanceを使用している。
Pylance
python用の補完やハイライトの拡張機能。Intel Mac時代はえげつないほどメモリを喰っててファンがファンファンなっていた。新年度でM1 Macに変えてからはファン自体が回りにくくなったので気にしていない。
アクティビティモニタを確認してもメモリは喰っていない感じだったので改善したのかもしれない。
Python
アイコンは先程のPylanceと同じ。こちらの拡張機能も補完などを行ってくれるが、もっと根幹の部分も担っている。この拡張機能がないと、書いているコードのバージョンを認識してくれなかったり、Jupyter Notebookを動かせないっぽい。
pythonのコードをVScodeで書き始めた時からずっと入れているので気にしていない。Cの時と同じで初めて.pyファイルを保存したらポップアップが出ると思う。
Python Docstring Generator
pythonの自作関数を作成する際に、その関数の説明である「Docstring」の入力のテンプレートを作成してくれる拡張機能。Docstringの書式は複数種類あるが、執筆者はnumpyスタイルを使用している。
自動でテンプレートを作成してくれるので、あとは記入されていない部分を自分で書けばよい。tabで次の項目に遷移できるので重宝。
Docstringを書かないとその関数が一体何のために作成されたのか、引数がどういう意味を持つのかがわからなくなる。
Python Preview
またこのアイコン。この拡張機能はpythonのコードがどういう風に動くのか、変数の関係はどうなのかについてグラフィカルに表示するというもの。
見つけた時に便利じゃんと思って入れたが、既に複雑なコードを書いていたのであまり使っていない。python初心者が動きや変数について理解する際には重宝すると思う。
Python-autopep8
pythonの文法の規約違反を修正してくれる拡張機能。 多分ロゴがないからVScodeのロゴになっている。PEP8については以下参照。
-
【PEP8&flake8】pythonにおけるPEP8とflake8
続きを見る
これを入れておくと、例えば(1 + 2 )というような無駄な空白や足りないtabを自動で修正してくれる。
ただ、全修正を有効にしておくと今まで作成したコードをマルっと修正されるので、79文字ルールなどは一旦無効にしたほうがいいかもしれない。
無効にした項目なども上記の記事に書いているので参照。
VS Code Jupyter Notebook Previewer
既存のJupyter Notebookのファイルである.ipynbファイルをVScodeでも開けるようにする拡張機能。.ipynb形式は特殊なのでおそらくそのままだと開けない。開くことができるサイトもあるがクイックに開くならこの拡張機能。
既に書いたように、最近はJupyter Notebookを使用していないので活躍の場面はないが、昔のNotebookを見たい時に使用している。
Jupyter Notebookは上記のように、コードをセルと呼ばれる箱に書いて実行、すると下に結果が出る形式。
出力はファイルに保存できるので後から履歴を見返すことも可能。
vscode-input-sequence
こちらもロゴがないようなのでVScodeのロゴ。この拡張機能は連番を作成できるもの。例えば
a1 = 1 a2 = 2 a3 = 3
というようにaに続いて番号を振りたいときにサッと振ることができる。コードに限らず日常的に連番をサクッと振りたい時にVScodeとこの拡張機能を使っている。
Markdown
ここではMarkdownというメモを書くときの形式についての拡張機能を紹介する。別にWordで書いてもいいが個人的にはMarkdownの方が好み。理由は以下。
- 装飾やハイライトがなかったりと、できることが少ない
- シンプルに書くことが可能
- 誰が書いても同じ雰囲気
- サクッと書くことができる
- Wordは基本的には完全にアプリを落としているので起動が面倒
- 無駄な装飾がないので迷いがなくなる
- （Wordに比べれば）マイナー
- 自慢できる
執筆者自身としてはサクッとメモをしたいときや、コードのメモを残すときに使用している。
最近はTyporaというアプリを入れてそっちでMarkdownを書いているが、複数行選択などについての利便性はVScodeの方が優っているので拡張機能は残している。
Markdown All in One
VScodeでMarkdownを書く際には必ずといっていいほど入れなさいと書かれている拡張機能。Markdownの補完や構造認識などの全般的な部分から、cmd + bでbold（太字）などのショートカットも完備。
リスト（箇条書き）の後にエンターを入れると自動でリ次のストを補完してくれるなどの補完機能も充実。
Markdown Preview Enhanced
Markdownはあくまでも書き方であって、基本的には
- 箇条書き1 - 箇条書き2 $$x^2 = 3$$
というように数式っぽく書く。このままではとても見にくいのでプレビューとして完成版を表示するのだが、その表示を綺麗にしてくれる（？）拡張機能としてこれがある。
先程のMarkdown All in Oneでもプレビューは可能であるが、こっちの拡張機能の方が見出しが見やすくなっていたりする。左に入力コード画面、右にその出力が表示される。
また、この拡張機能だと作成したファイルをpdfやhtmlとして出力するのが簡単。右クリックして好きな出力形式を押せばいい。
$\LaTeX$
最後は$\LaTeX$系。こちらは基本的には論文やレポート作成の時に使っている。簡単に言えばWordやMarkdownの上位互換。めちゃくちゃ綺麗に文章や数式を書くことができる。
イメージはWord・Markdownとプログラミングの融合体。例えば数式は以下のように入力する。
\\int_0^{+\\infty}\\frac{dx}{e^x\\ +\\ e^{-x}}
このままだと何が何やらという感じなので、$\LaTeX$を使用して表示すると以下のように綺麗な数式となる。
$$\int_0^{+\infty}\frac{dx}{e^x\ +\ e^{-x}}$$
このように簡単に綺麗な数式を表現できるのが魅力。また、プログラミングのように記述するので長い文章でも軽いファイルとして保存できる。
LaTeX Workshop
$\LaTeX$の拡張機能としてはこれだけを入れている。Markdownの時と同じように左にコードを書いて右にプレビューを表示させる。
$\LaTeX$の書き方さえ知っていればあとはこの拡張機能と多少の設定ですぐに$\LaTeX$で書くことができるだろう。
カスタムしてもっと便利に
今回は執筆者が実際にVisual Studio Codeに入れている拡張機能について紹介した。現在は合計で28種類入れているが、まだまだ便利な拡張機能は存在しているのでまた便利なものがあれば増やしたい。
拡張機能なしでも大体の作業を行うことはできるが、拡張機能があるともっと効率的に早く作業を行うことができる。余った時間、体力でより高度な作業を行うことでより高いレベルに到達することができる。
皆様も拡張機能を入れてもっと便利な作業環境を作ってみてはいかがだろうか。
関連記事
続きを見る 続きを見る
【Mac&設定】M1 MacBookのおすすめ設定20選
【Chrome&拡張機能】2021年7月版Google Chrome系の拡張機能10選
-
【python&独学】独学である程度pythonを習得するマインド
続きを見る
-
【M1 Mac】MacBook Proに入れているアプリ約40個ほど紹介
続きを見る
