WEB/システム/IT技術ブログ

Microsoftの無償コードエディタ「VS Code(Visual Studio Code)」のインストールと設定

update : 2015/11/30

以前から気になっていたMicrosoftの「Visual Studio」ですが、「Visual Studio Code」として無償公開されることになってから、かなりお世話になっています。
(ビンボーですみません。。)

Visual Studio Code – Code Editing. Redefined
「Visual Studio Code」はWindows、Linux、OS Xで動作する軽量のコードエディタソフトウェアです。
HTML、CSSやJavaScriptなどWebフロントから、Java、PHPやC++などサーバサイドのプログラムまで、幅広いフォーマットに対応しています。

実務に導入してみた感触などをメモとして残して、評価したいと思います。
導入環境は

  • Windows 7 Professional 64bit
  • Windows 10 Home 64bit

インストール

本サイトからインストールパッケージをダウンロードして、インストーラに従いインストールします。
難しいことはありません。

機能

AtomやBracketsといったIDEは、機能はほとんど備えておらず、自分が必要なものだけプラグイン(パッケージ、エクステンション)をインストールします。
一見良さそうにみえますが、プラグインの選定は意外と手間です。
同じ機能であっても複数の開発者が異なるプラグインを開発しているため、品質もばらばらであり、厳選には時間がかかります。また、さまざまなプラグインを導入する中で、組み合わせによってはショートカットコマンドが重複するなど、不具合が発生することもあります。さらにパフォーマンスの評価も曖昧なため、プラグインが増えるほど、動作が重くなります。

一方で「Visual Studio Code」では、一般的に必要と思われる機能は最初から備わっています。
その中からいくつか紹介します。

コード入力補助とチェック

HTML、CSSやJavaScriptなどのバリデーションや、JavaやPHPなどプログラムのエラーチェックも標準で機能として備わっています。
また、各言語についてコードヒント機能もあり、途中まで入力したコードから推測して、関数などの候補を補完してくれます。
さらに最近WebコーディングではスタンダードになりつつあるEmmetも標準で搭載されており、Tabキーで機能させることができます。

Git

既に環境にGitをインストールされていることが前提ですが、作成したリポジトリやクローンしたフォルダをオープンすると、Gitであることを認識して、エディタ上からコミットなどができるようになります。

設定

「Visual Studio Code」は、より自分の使い方に合った細かい設定が可能です。
メニューの「ファイル」⇒「基本設定」⇒「設定」をクリック、または、ショートカットキー「Ctl + ,」で設定画面を開くことができます。

vs codeでは設定内容をjsonファイルで管理しており、古いバージョンでは設定を変更するためにjsonファイルを編集していました。
現バージョンではGUIで設定できます。

ご参考までに、私が実際に使用しているおススメの設定です。
設定項目は多いですが、以下のキーで検索することができます。

キー 項目 設定
Editor: Auto Indent ユーザが入力や貼り付け、行の移動をしたとき、エディターがインデントを自動的に調整するかどうか制御します。言語のインデントルールを持つ拡張機能を使用できる必要があります。 個人的にはオートインデントが整形の妨げになることもあり、逆に煩わしかったりするので「false」にしています。
Editor: Render Whitespace エディターで空白文字を表示するかどうかを制御します。 「boundary」にすることで、文章内の単一スペースを除いた余白を可視化できます。余白ゴミの発生を防止するためです。
Files: Auto Guess Encoding 有効な場合、ファイルを開くときに文字セットエンコードをエディターが推測します。言語ごとに構成することも可能です。 「false」のままだと、あらゆるファイルをデフォルトの文字コード(UTF-8)で開いてしまうので、それいがいの文字コードの場合、文字化けが発生してしまします。
「true」にすると、UTF-8、SHIFT-JIS、EUC-JPなどを自動判定してくれます。
Files: Trim Trailing Whitespace 有効にすると、ファイルの保存時に末尾の空白をトリミングします。 「true」にして余白ゴミを自動削除しましょう。
HTML > Format: Wrap Line Length 自動整形のとき、1行あたりの最大文字数(0 = 無効にする)。 個人的に自動改行されると余計な差分が発生することがあるので、「0」にして無効にします。

2019/5/20更新

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives