![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4GGcnBx86YY7QYj73_OzVhO43l8a84ujXJBsv0Z84fLO0vFplbITnEZmq9rMyzxbTDZV7WI6k-WRaC7XTsy4oQ53DyoTijlGwZ511BgQqKOc9yDbfijYITKgNSV6ptibUdacuz1_IDGbBRMX60OThcyXmgu_RF54gH22ASsQx2etkg_prY9xd0qwa/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-08-26-17.13.29.jpg)
ここ数年間はAtom Editorを使い続けてきたんですが、若干の不満を持っていた為、人から勧めてもらった「VSCode」を使ってみることにしました。
ちなみに、VSCodeは「Visual Studio Code」の略ということで御察しの通り、マイクロソフト製でございます。
以前にも、VSCodeのことを聞いていたんですが、「VisualStudio使わない・・・」という事でインストールもしませんでしたが、
食わず嫌いはいかんという事で、早速インストール
そして、Atom Editorと少しだけ比較してみて、評価してみたいと思います。
インストール
https://code.visualstudio.com/
本家サイトの「Download」ボタンを押すと、インストーラが入手できます。
対象OSがMac , Windows , Linuxと、この辺も最近のWEBエンジニア事情をよくわかっている構成です。
ちなみに、AtomEditorも、同じOS対応なので、この点ではメリットは無いんですけどね。
Macの環境だと、ダウンロードして解凍して、アプリケーションフォルダーにぶち込むだけでインストールが完了するので、非常に楽に起動までできます。
容量が217MBぐらいあって、比較的重たいアプリだなあ・・・と思ってAtomEditorをみてみると、559MBもあったので、機能拡張やら、データキャッシュやらで、データが膨らむと、おそらく半年後には500MB越えになりそうですが、最近のテキストエディタって、こんなに容量が大きいことを思い知らされました。
ちなみに、Macの「CotEditor」は47MBぐらいでした・・・
とにかくインストールは、全く問題ないので、次に画面を開いてUI/UXをみてみたいと思います。
エディタ画面の起動
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigduTxxGGpCr4YYIdfmV8XHcdRQNH8unOpuEYJ4LN0KRWTMbYa2FpQVIgpfMLh6Dqy4mMj_oDVBa7LqrKw_oAApN54T3gVOdW9mYFVlPl53dkcMdFbvd1zaaVlHCFBcMVggOylZO8gMiCzCl90VaOqe5AgtDZW1Z970fRjYZrUto9aJFNsX6CHdD6Z/s1600-rw/29-1-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-08-26-17.23.37.jpg)
見た目は、Atom Editorとほぼ同じ感じですね。
色は要所で違いますが、おそらくこれもカスタマイズで変更可能なんでしょうね。
プログラマーって、こういう所にこだわる人多いですからね。
特徴のある機能をピックアップしてみました。
1. Alt + Click(Win) , Option + Click(Mac)
複数箇所にカーソルを設置して、同一操作が行える。
Alt + Control + 上下カーソル(Win) , Option + Command + 上下カーソル(Mac)
複数行選択が直前直後の行に対して行える。
整理されたコードでは利用価値が高いです。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LgLxgwSrgeRuf7WRIJluABqKfNTnux4SoSHlqn545DmMB04e26lf4Tpp-OrnZeZeGABIJ80KQpLyUY4MUnNfR5zp4UJoiu9bdB3DTUR2Bfrk3ulhPR8k9-oD0PHkJXfY3tNFKt78KsWnxFaCrd1hkIcJH6Mg-ZdCj__ztkV_8H9J14jM7pJQgVsQ/s1600-rw/29-2-multicursor.gif)
2. Control + D(Win) , Command + D(Mac)
文字選択している状態でこのコマンドを実行すると、選択されている文字を検索し、次のものを追加選択してくれる。
そのまま、削除したり書き直したりすることができる。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOnxwqS_a2pNv5X65JIqOQTCU9qRfVc1Rjo7v8zToiTpA9dCGwxyfK2nqF8T4PpIFbF8rbqTTqwzfcPGE-mAjSvHZUso7J8SeoAkjPLrfktWSNT8bjuv6gogrCdbn31nL9AiD1hdLtm52CKU3_2N5aUiwWGUHGL_0PNTu1SSER7S3kj5Ok9IsCvP-n/s1600-rw/29-3-multicursor-word.gif)
3. SHift + Alt(Win) , SHift + Option(Mac)
ボックスでのカーソル選択。複数行の一括作業をする際に便利。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeh77vov2RR7WZkDUaA-bEmN-2kkVivQiN9df8LkPki1Hb9PIHtaeqtOgDgJG8bRDvqnvN16wjrWrCGPv3I1pu745pKYgdBzxQytPNS--yPU2WLgjUklQPquuh0Iwk8Jukn-cv6qZ8741fH20cx79er6ibDPy6HThBNC61EE1GrjQPMY4cdfDFXe1F/s1600-rw/29-4-column-select.gif)
ほんの一握りですが、本家サイトに書かれている便利エディタ機能を紹介してみました。
うれしいGit対応
Atomエディタでは当たり前だったGit機能がVSCodeにも標準搭載されています。
この辺は開発者の使用シーンをよく理解できている点であると評価できます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tfOJTItcfB7VgvW-B_PtLN-ZDho5eQjh-gd4GnkXvsUFIXZ8JNQeIG3lfyqbUV-rRGhSTEKkTLALYSaKixzj3HP_fuvR0jjhGvmm95mbTegzUotiiGAYrJ_otHdMcGwlAjIaAtH8WugC2G9CVk9wuLgrRXveQ81jcqFCHXy9fB30mBigDEEpr8If/s1600-rw/29-5-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-08-27-8.52.01.jpg)
一番左のGitアイコンをクリックすると、更新対象ファイルの操作が視覚的に行えます。
上部の「ステージング済みの変更」は、「git add *」されたファイル群
下部の「変更」は、ステージング登録されていない、変更のあったファイル群
右クリックして、アイコンをタップするだけで、add 、commitすることが可能になります。
個人的には、ターミナルでコマンドを叩く方が好きなので、あまり使わないかもしれませんが、一覧で確認できるこのモードは非常に使えますね。
痒い所に手がとどくターミナル機能
非常に有意義な機能として、エディタの中にあるターミナル機能があります。
Control + Shift + @
上記コマンドで、画面に表示されます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRCPeOQmRkMtF5MBaM9aHsZadx7x50a6cmJL-P8dgHb7hZ8fHL9l94l6n0PK_Ogv2cbcaacZxh5XpU6iafU-eZOKRf9dGoCDtd83bPOUvI4e8HUgFu3muRmCKoTH6fwf3y_HSQsl-0PjW_UfLLyWc-nejCGkuj1PdhhwarMhmgzhni6zZv21RCghbZ/s1600-rw/29-6-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-08-27-8.47.03.jpg)
WEB開発では、Dockerを使って行うことが多く、テキストエディタ、WEBブラウザ、ターミナルの3つのアプリを行き来しながらコーディングすることが多く、デバッグ時などにも、この行き来が盛んになりますが、
テキストエディタ内にターミナルがあると、アプリ遷移の手間が減って、作業が格段に捗ります。
検索機能と置換機能
AtomEditorで一番気に入らなかったのが、検索と置換の機能でした。
AtomEditorでは、ちゃんと設定していないと、プロジェクト内の全てのファイルに対して、文字列置換操作が適用されてしまい、気がつかない間に、開いてもいないファイルが勝手に変更されてしまうという事象があり、とんでもない障害に繋がりそうになったことが、数回ありました。
また、検索に関しても、UIで前単語に移動するのがわからず戸惑っていましたが、VScodeでは、見た目でわかりやすいUIになっています。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkH7n2Sc-td3RPwQ8gBSp8syjUV0ZAEjV8mJL54ut8Ihs3edyX_El2vvvQ8cOvqfF1BabxpO5nsvfOtACDLLAAbPqdnYLshznP4W19JS2z5lfhstDCKICeKKMQtvScZhVjPsFg5v3qBUfFjMdHP0aZkeCsXPItHw4nmCY-0NnWgF9VMDVpCBT9l8hT/s1600-rw/29-7-%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2018-08-27-8.59.15.jpg)
まだまだたくさんの機能がありそうなので、しばらく使ってみて、便利機能を探してみたいと思います。
0 件のコメント:
コメントを投稿