【結論】
・様々なOSで使用可能(クロスプラットフォーム)で
軽量さが売りの一つ。
・デバッグ、Gitクライアントの統合、シンタックスハイライトなど
多様な機能を標準で実装しており、拡張機能を追加すれば、
更に使い勝手が良くなる
【目次】
- エディタをVS Codeに乗り換えた
- VS Codeとは
- 導入手順(Mac)
- 拡張機能の追加方法
- 拡張機能の紹介
- 設定ファイルへの追記方法
- 拡張機能の削除方法
- 《今日の学習進捗(3年以内に10000時間に向けて)》
【本題】
エディタをVS Codeに乗り換えた
これまで、テキストエディタは「Sublime Text」を使用していたのですが、
今回「VS Code」に切り替える事にしました。
きっかけは、勉強会に参加した際、VS Codeを使って発表されている方がいたのですが、
エディタ上で変数の値を確認してデバックされているのを見て非常に便利そうだと感じたのと、
私の観測範囲の強いエンジニアの方が良く使用されていた事です(Vimが一番多い)
「Sublime Text」にも大きな不満はありませんでしたが、
たまに非常に重くなったり(再起動すれば直る)、
有料版の購入のポップアップが出て消すのが面倒だったりと
(無料で使っている人間が文句言うべきでは無いが・・・)
完全に満足出来る内容では無かったので、これを機に変えてみる事にしました。
VS Codeとは
Wikipediaでは、下記の様に紹介されています。
Visual Studio Codeはソースコードエディタである。
マイクロソフトにより開発され、Windows、Linux、macOS上で動作する。
デバッグ、Gitクライアントの統合、シンタックスハイライト、 インテリセンス、スニペット、リファクタリングなどの機能を持つ。
カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。
Visual Studio Code - Wikipedia
他にも、他のテキストエディタと比較して、
軽量・高速である事が、利点として良くあげられます。
導入手順(Mac)
まず下記の公式サイトにアクセスします。
「Download for Mac」からVSCodeのファイルをダウンロードします。
ダウンロードしたZIPファイルを解凍して出来たファイルを、 アプリケーションフォルダに移動させます。
最後に、そのアプリケーションを実行して、 正常に起動すれば導入完了です。
拡張機能の追加方法
VS Codeの真の力を引き出すには、拡張機能の追加は欠かせません。
拡張機能については、下記のサイトで公開されています。
導入の手順としては、まず実装したい拡張機能のページを開きます。
ページの「Install」をクリックすると、VS codeに画面が切り替わります。
VS codeの「Install」をクリックすると、インストールが開始され、
完了すると、拡張機能が反映されます。
拡張機能の紹介
では実際に導入した拡張機能を紹介していきます。
※参考サイト
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
正規表現をチェック出来る(但しRubyやjQueryの独自の正規表現の記述には非対応)
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」と検索すると、設定ファイルを表示出来ます。
なお、下記のコードを追記する事で
ファイルの末尾に自動で空白行を追加してくれます。
"files.insertFinalNewline": true
拡張機能の削除方法
不要な拡張機能を削除するには、
左下の歯車マークをクリックし、「Extensions」を選択します。
その後、削除したい機能を選択し、
「Uninstall」をクリックします。
《今日の学習進捗(3年以内に10000時間に向けて)》
学習開始からの期間 :100日
今日までの合計時間:953h
一日あたりの平均学習時間:9.6h
今日までに到達すべき目標時間:913h
目標との解離:40h
「10,000時間」まで、
残り・・・「9047時間!」