使いやすいVS-Codeの設定と拡張機能

テキストエディタはエンジニアがソースコードを編集する際に用いるものであり、細かい設定を自分好みにカスタマイズできます。現在、TeraPad、Atom、Vim、サクラエディタといった様々なテキストエディタが存在しますが、今回はその中でも比較的新しく人気のあるエディタ「Visual Studio Code」（以下VS Code）でコーディングをする際に便利な機能、拡張機能について紹介します。

■VS codeについて

　VS CodeはMicrosoft製オープンソースのテキストエディタです。2015年に初版が提供されており、新しいソースコードエディタといえるでしょう。また、デスクトップアプリケーションを作成するためのフレームワークであるElectonを採用しているため、Windows、macOS、Linuxに対応。毎月アップデートされており、公式サイトより現在のバージョンを確認できます。

　VS Codeの機能の特徴としてはデバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、ユーザースニペット、リファクタリングなどが挙げられます。

最初に設定しておくべき機能

　VS Codeでは設定場面より自分好みの機能を設定可能です。しかし、設定できる項目が多く、どの様にカスタマイズしたら良いのかわからない方も多いのではないでしょうか。

・自動整形機能

“editor.formatOnPaste”: true, // ペースト時に自動でフォーマット

“editor.formatOnSave”: true, // ファイル保存時に自動でフォーマット

“editor.formatOnType”: true, // 入力した行を自動でフォーマット

　自動でインデントを整え、規則正しい綺麗なコードの記述を手助けしてくれます。導入することにより自動的にコーディングスタイルを統一し、可読性の良いコードに。おすすめの機能です。

・Emmet展開機能

“emmet.triggerExpansionOnTab”: true, // TAB キーで Emmet を展開できるようにする

“editor.snippetSuggestions”: “top”, // Emmet などのスニペット候補を優先して表示

“emmet.showSuggestionsAsSnippets”: true, // Emmet の候補を表示

　独自の省略記法によってHTMLやCSSのコーディングを高速化する機能を持つEmmetの展開を、TABキーを一つで行うことができる機能です。また、上記を設定することにより意図しない候補は表示されにくくなります。

・ガイドラインの可視化

    “editor.renderIndentGuides”: true

　コード記述の際にインデントを多く用いる場合は、ガイドラインの設定をおすすめいたします。

・全角・半角スペースの設定

 “editor:Render Whitespace “: all

　全角・半角スペースの区別を見やすくする機能です。コーディングをする場合、スペースの間違いがエラーに繋がることもあるため有効にしましょう。

オススメの拡張機能

　VS Codeではプログラミングやコーディングを効率よく進めるために拡張機能を追加することができます。「VS Code Marketplace」で毎日様々な拡張機能が公開されています。

・Japanese Language Pack for Visual Studio Code

　　VSCodeを日本語化してくれるプラグイン。英語が苦手な方は最初に導入しておきましょう。

・ Auto Rename Tag

　　開始タグと終了タグを同時に修正してくれるプラグイン。開始タグを修正すると終了タグも自動的に修正してくれるためミスを減らすことができます。

・Python拡張機能

　　Lint機能、デバッグ、コードナビゲーション、リファクタリングなどを含み、VS CodeでPythonプログラミングをするなら、まずもって必要となる機能が揃います。

・Autodocstring

 　　Pythonのクラスや関数に付随する説明文であるdocstringの記述を助けてくれるプラグイン。特定のコマンドを入力するだけで、説明文と引数と戻り値のフォーマットが自動生成されるので便利です。

・Bracket Pair Colorizer 2

　　括弧内で対応している箇所を自動的に色分けしてくれるプラグイン。構造が分かりやすくなるためコードの視認性が向上します。

・ Regex Previewer

　　エディタ内で正規表現を動作確認が可能となるプラグイン。リアルタイムで反映されるため、確認しながらの作業が容易になります。

・IntelliSense

　　PHP開発のためのインテリセンス系のプラグイン。コードの補完を強化、関数ジャンプ、メソッド・関数のデータ表示等、PHPでの開発を行う際は環境構築として最初に導入しておきたい機能です。

・WordPress Snippet

　　WordPress関数を自動的に補完してくれるプラグイン。コーディングスピードの向上に便利です。

・ GitLens

　　コードの履歴、差分の確認を行うことのできるプラグインです。Gitを使う方には必ず導入することをおすすめします。

　今回はVS Codeデコーディングをする際の設定や拡張機能について紹介しました。今回の紹介はごく一部で、この他にも便利なプラグインが多数あります。テキストエディタは用途が様々であるため、それぞれの目的に合った使いやすいカスタマイズが可能です。日々、新たな拡張機能が誕生しているため、欲しい機能がある時は、自分で探しながら効率よく作業できるカスタマイズを進めていくと良いでしょう。