Casual Developers Notes

初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。エンジニアもデザイナーも技術と英語を身に着けて海外に飛び立とう！

You are here: Home / Archives for vscode

By Leave a Comment

Visual Studio Code コンプリート設定

Visual Studio Code コンプリート設定

Webの世界は移り気が激しく、特にJavscript関係のフレームワークやツールはどれもこれも短いライフサイクルで消滅していきます。Webサイト構築やWebアプリケーション開発のためのテキストエディタも同様です。今回は今一番人気のテキストエディタVisual Studio Codeの設定方法を紹介します。

はじめに

実はこのブログで昔から人気のある記事は以下のSublime Text3をインストールしたらまずやることの記事です。

[tips][Sublime Text] Sublime Text 3をインストールしたらまずやること

2014年1月に書かれた記事ですが、当時はSublime Text3がリリースされたばかりで日本語の情報や本などは無く、私のブログくらいしかしっかりと説明した情報が無かったため、大人気の記事となりました。おそらく、この記事は日本で一番最初にSublime Text3をまともな形で紹介した記事だったのではないでしょうか。

しかし、時の流れは早く、2018年現在では、Sublime Textに変わる新たテキストエディタとして、AtomやBrackets、そして今回紹介するVisual Studio Codeが台頭してきました。

GitHubでのスターの数は2018/2/17現在で以下の通りです。

  • Visual Studio Code : 44392 Star
  • Atom: 43430 Star
  • Brackets: 28694 Star

スター数という観点で言えば、Visual Studio Codeが最も人気があるテキストエディタという事になります。

個人的な感覚で言うと、3年くらい前まではSublime Text、2年くらい前はAtom、１年くらい前はVisual Studio Code、という風に人気が変化していったような気がします。私の場合は、2年前からずっとVisual Studio Codeを使っています。なぜなら、一番使い安いと思っているからです。正直Javascriptで真面目にコーディングするならこれ一択だとさえ思っています。

今回は、今更ながら、Visual Studio Codeの設定方法を紹介します。

Visual Studio Codeのインストール

Visual Studio Codeの公式サイトからインストーラがダウンロードできます。

https://code.visualstudio.com/

ただ、Macの場合はインストーラーを使うのはめんどくさいので、HomebrewのCaskを使うことでコマンドラインからインストールできます。

$ brew cask install visual-studio-code
$ code -v
1.20.1
f88bbf9137d24d36d968ea6b2911786bfe103002
x64

また、Visual Studio Codeはコマンドラインのインターフェースも提供されているので、GUIを使うのがめんどくさい方は公式サイトのコマンドラインのページを参考にすると良いでしょう。

基本設定

エディタ設定

それでは設定をしましょう。

Visual Studio Codeの設定は「Code -> 基本設定 -> 設定」から行えます。ショートカットは「Command + ,」です。

スクリーンショット 2018 02 17 17 50 45

すると、以下のように、左側にデフォルト設定、右側にユーザ設定が表示されます。この「ユーザ設定」のみを変更して設定を行います。

スクリーンショット 2018 02 17 18 32 03

基本設定としては以下を設定すれば良いでしょう。

  "editor.fontSize": 15, //フォントサイズ
  "editor.tabSize": 2, //インデントの数
  "editor.renderWhitespace": "all", //空白を表示
  "editor.insertSpaces": true, //タブキーでスペースを挿入
  "editor.lineNumbers": "on", //行番号を表示
  "editor.detectIndentation": true, //ファイル内のタブやスペースを検出
  "editor.minimap.enabled": true, //ミニマップを表示
  "editor.wordWrap": "bounded", //ビューポートとwordWrapColumnの最小値でエディタを折り返す
  "editor.wordWrapColumn": 80, //エディタの折り返し桁
  "editor.parameterHints": true, //入力時のヒントを表示
  "editor.autoClosingBrackets": true, //左かっこの後に右かっこを自動補完
  "editor.autoIndent": true, //インデントの自動調整
  "editor.suggestOnTriggerCharacters": true, //トリガー文字の入力時に候補を表示
  "editor.acceptSuggestionOnEnter": "on", //Enterキーで候補を受け入れる
  "editor.snippetSuggestions": "inline", //スニペットの提案
  "editor.selectionHighlight": true, //選択した箇所を強調表示
  "editor.occurrencesHighlight": true, //カーソルを置いた箇所の強調表示
  "editor.mouseWheelZoom": false, //Controlを押下した状態でフォントをズームできる
  "editor.renderControlCharacters": true, //制御文字の表示
  "editor.renderIndentGuides": false, //インデントガイド
  "editor.renderLineHighlight": "all", //行やガターのハイライト
  "editor.codeLens": true, //コードレンズを表示する
  "editor.folding": true, //エディタ内のソースコードを折り畳んでまとめる
  "editor.formatOnSave": true, //ファイルを保存した時にフォーマッターを動かす
  "editor.matchBrackets": true, //かっこの対応表示
  "editor.trimAutoWhitespace": true, //ファイルの不要な空白をトリムする
  "files.trimTrailingWhitespace": true, //ファイル保存時に空白をトリムする
  "diffEditor.ignoreTrimWhitespace": true, //差分エディタが空白をdiffと判断しないようにする
  "window.zoomLevel": 0, //ウィンドウのズームレベル
  "files.encoding": "utf8", //ファイルの文字コード指定
  "files.autoGuessEncoding": true, //ファイルの文字コードの判別
  "files.eol": "\n", //改行コード
  "files.insertFinalNewline": true, //末尾改行

「files.insertFinalNewline」の設定には後述するプラグイン「final-newline」をインストールする必要があります。

また、日本語で簡単な説明を表記しましたが、デフォルト設定を見ると日本語で説明が書かれているので、分からない設定があればすぐに確認できます。

キーマップ設定

Sublime Textから移行してきた人は以下の設定をしておきましょう。

  "sublimeTextKeymap.promptV3Features": true,

この機能を使うには後述するプラグインの「Sublime Text Keymap」をインストールする必要があります。

テーマのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「color」と入力すると「配色テーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 19

「配色テーマの選択->その他の配色テーマをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 38 33

テーマのインストールが完了したら、同じく「配色テーマの選択」から好きなテーマを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 13

私は「Solarized Light」を使っています。

アイコンのインストールと設定

「Shift + Command + P」でコマンドパレットを表示し、「icon」と入力すると「ファイル アイコンのテーマ」を選択できます。

スクリーンショット 2018 02 17 18 23 39

「ファイル アイコンのテーマを選択します->その他のファイル アイコンをインストール」から、好きなデザインのテーマを選んでインストールできます。

スクリーンショット 2018 02 17 18 39 32

アイコンのインストールが完了したら、同じく「ファイル アイコンのテーマを選択します」から好きなアイコンを選べば、設定が自動的に「ユーザ設定」に書き込まれます。

スクリーンショット 2018 02 17 18 39 45

私は「Material Icon Theme」を使っています。

これで基本設定は完了です。

Web開発のためのおすすめプラグイン

プラグインのインストール方法

おすすめのプラグインを紹介する前に、プラグインのインストール方法を説明します。

プラグインのインストールはエディタの右側メニューの下にある四角いマークをクリックすると検索できます。

スクリーンショット 2018 02 17 17 52 09

プラグインを選んで「インストール」をクリックします。インストールが終わると、「インストール」の表示が

スクリーンショット 2018 02 17 18 14 05

「再読み込み」の表示に

スクリーンショット 2018 02 17 18 13 43

変わるので、後は「再読み込み」をクリックしてVisual Studio Codeを再起動すれば、プラグインが有効になります。

おすすめのプラグイン

それでは、おすすめのプラグインを紹介していきます。プラグインは非常にたくさんあるので、いろいろ試してオリジナルの設定を完成させるとより楽しくコーディングができると思います。比較的オススメなプラグインに「★」を付けてあります。

基本設定で使ったプラグイン

HTMLのためのプラグイン

CSSのためのプラグイン

Javascriptのためのプラグイン

Gitのためのプラグイン

  • GitLens … ファイルにコミットした人を確認できる
  • Git History … Gitのコミット履歴を確認できる
  • Git Project Manager … Gitプロジェクトを行き来する

Markdownのためのプラグイン

その他

今回はReactやAnglur，Vueと言った特定のフレームワーク向けのプラグインはできるだけ書かないようにしました。そういったプラグインは基本的にスニペットだけなので、必要に応じて拡張機能を検索して人気があるものをインストールすればだいたい欲しいものは手に入ります。

いろいろプラグインのインストールが終わったところで、自分のVisual Studio Codeにインストールされている拡張機能を一覧で表示してみましょう。

$ code --list-extensions

私の場合は、使ってもいない大量のプラグインが表示されています。たまにプラグインが原因で不具合が起こる場合があるので、定期的にメンテナンスしましょう。

最後に

いかがでしたか？初めてVisual Studio Codeを導入した人はもちろん、すでに使っている人にも気づきはあったでしょうか？もしまだ他のエディタを使っている場合は、試しにVisual Studio Codeを使ってみて下さい。特にWebに関わっている人なら、使っている内に名刀が手に馴染む感覚を味わえるでしょう。それでは。

環境

  • PC : macOS High Sierra 10.13.3
  • Visual Studio Code : 1.20.1