VS Codeを導入してみた

f:id:ryoutaku_jo:20190318135014p:plain

【結論】

VS Codeとは、テキストエディタの一種

・様々なOSで使用可能(クロスプラットフォーム)で
 軽量さが売りの一つ。

デバッグ、Gitクライアントの統合、シンタックスハイライトなど
 多様な機能を標準で実装しており、拡張機能を追加すれば、
 更に使い勝手が良くなる

【目次】

【本題】

エディタをVS Codeに乗り換えた

これまで、テキストエディタは「Sublime Text」を使用していたのですが、
今回「VS Code」に切り替える事にしました。

きっかけは、勉強会に参加した際、VS Codeを使って発表されている方がいたのですが、
エディタ上で変数の値を確認してデバックされているのを見て非常に便利そうだと感じたのと、
私の観測範囲の強いエンジニアの方が良く使用されていた事です(Vimが一番多い)

Sublime Text」にも大きな不満はありませんでしたが、
たまに非常に重くなったり(再起動すれば直る)、
有料版の購入のポップアップが出て消すのが面倒だったりと
(無料で使っている人間が文句言うべきでは無いが・・・)
完全に満足出来る内容では無かったので、これを機に変えてみる事にしました。

VS Codeとは

Wikipediaでは、下記の様に紹介されています。

Visual Studio Codeソースコードエディタである。
マイクロソフトにより開発され、WindowsLinuxmacOS上で動作する。
デバッグ、Gitクライアントの統合、シンタックスハイライト、 インテリセンス、スニペットリファクタリングなどの機能を持つ。
カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。
Visual Studio Code - Wikipedia

他にも、他のテキストエディタと比較して、
軽量・高速である事が、利点として良くあげられます。

導入手順(Mac

まず下記の公式サイトにアクセスします。

code.visualstudio.com

「Download for Mac」からVSCodeのファイルをダウンロードします。

f:id:ryoutaku_jo:20190317203223p:plain

ダウンロードしたZIPファイルを解凍して出来たファイルを、 アプリケーションフォルダに移動させます。

f:id:ryoutaku_jo:20190317203307p:plain

最後に、そのアプリケーションを実行して、 正常に起動すれば導入完了です。

f:id:ryoutaku_jo:20190317203336p:plain

拡張機能の追加方法

VS Codeの真の力を引き出すには、拡張機能の追加は欠かせません。

拡張機能については、下記のサイトで公開されています。

marketplace.visualstudio.com

導入の手順としては、まず実装したい拡張機能のページを開きます。

f:id:ryoutaku_jo:20190317211727p:plain

ページの「Install」をクリックすると、VS codeに画面が切り替わります。

f:id:ryoutaku_jo:20190317211850p:plain

VS codeの「Install」をクリックすると、インストールが開始され、

完了すると、拡張機能が反映されます。

f:id:ryoutaku_jo:20190317211934p:plain

拡張機能の紹介

では実際に導入した拡張機能を紹介していきます。

※参考サイト

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita

開発が捗る Visual Studio Code 拡張機能 - Qiita

vscode-icons

ファイルの種類に応じて多彩なアイコンを表示して見やすくする

vscode-icons - Visual Studio Marketplace

・Prettier - Code formatter

JavaScript / TypeScript / CSSのフォーマッターです。

Prettier - Code formatter - Visual Studio Marketplace

Regex Previewer

正規表現をチェック出来る(但しRubyjQueryの独自の正規表現の記述には非対応)

Regex Previewer - Visual Studio Marketplace

・Trailing Spaces

余計なスペースをハイライトしてくれる

Trailing Spaces - Visual Studio Marketplace

・Auto Close Tag

HTMLのクローズタグを自動入力してくれる

Auto Close Tag - Visual Studio Marketplace

・GitLens

行ごとに最終更新者を表示してくれる

GitLens — Git supercharged - Visual Studio Marketplace

・Path Intellisense

ファイルパスの自動入力をしてくれる

Path Intellisense - Visual Studio Marketplace

・Quokka.js

エラーになる箇所を実行前に評価してくれる

Quokka.js - Visual Studio Marketplace

設定ファイルへの追記方法

拡張機能の他、VS codeの設定ファイルである「settings.json」に

直接設定内容を記述して、設定内容を変更する事も可能です。

「command + p」でコマンドパレットを表示させ、

「settings.json」と検索すると、設定ファイルを表示出来ます。

f:id:ryoutaku_jo:20190318154519p:plain

なお、下記のコードを追記する事で

ファイルの末尾に自動で空白行を追加してくれます。

"files.insertFinalNewline": true

拡張機能の削除方法

不要な拡張機能を削除するには、

左下の歯車マークをクリックし、「Extensions」を選択します。

f:id:ryoutaku_jo:20190318141516p:plain

その後、削除したい機能を選択し、

「Uninstall」をクリックします。

f:id:ryoutaku_jo:20190318141613p:plain

《今日の学習進捗(3年以内に10000時間に向けて)》

学習開始からの期間 :100日

今日までの合計時間:953h

一日あたりの平均学習時間:9.6h

今日までに到達すべき目標時間:913h

目標との解離:40h

「10,000時間」まで、

残り・・・「9047時間!」