Webデザイナー的「VS Code」の良いところ

今メインで使っているエディタ「Visual Studio Code」

ここ最近は「Visual Studio Code」略してVS Codeを使用してコーディングをしています。
VS Codeはマイクロソフトが提供している無料のエディタソフトです。mac/win/linuxで使えます。その前はadobeの「Brackets」、さらにその前は恋に落ちるエディタ「Sublime text」、その前が「coda2」、そしてさらにその前はCrescent Eve、EmEditorだったかな…。

ずっとwebデザイナーやってきたけれど、Dreamweaverは頑なに使わなかったです。なぜか、なぜだろう。あと、秀丸も好きじゃなかった…。UIが好きじゃなかったというか。

エディタはやっぱり自分にフィットしたものを使うのが、一番効率が上がると思います。自分の脳のスピードについてこれないツールは、イライラの原因になります。

で、今使っているのは前述のとおり、VS Codeなのですが。
そんなにUI好きじゃないです…。ただそれを上回る便利さがある（気がする）。

VS Codeの良いところ

1.エディタ内でgitやコマンドが使える

マイクロソフト公式ページにも歌われてるように、VS Codeはgitが使えます。
わざわざターミナル立ち上げたり、SourceTreeを使わないでもエディタ内で操作完結できます。（git使い込んでいるわけではないので、すべての機能がバッチリ便利なのかはわかりませんが。）

2.emmetがデフォルトで使える

コーディングはもうemmetないと「無ー理ー」なレベルです。

emmet使えない現場に居たときは発狂しそうになりました。コーディング作業が苦痛でしかたがなかったです。VS Codeなら特になにもしなくても使えます。すごいね。

ただ以前のエディタではTabを押して変換していたのですが、VS Codeは自動で選択肢が表示されます。でもタイミングを逃すと変換してくれなかったりします。ちょっと不満です。

3.わりとさくさく動く

今までで一番好きなエディタはBracketsでした。なのに、なんで使うのやめちゃったのかというと、もっさり感がどんどんひどくなっていったからでした。

使い始めた頃はそうでもなかったのですが、拡張機能（そんなにたくさん入れていたわけではないのに）や過去ファイル（？）のせいなのか、いちいち操作にもたつきが出るようになり、ついにはお別れしてしまいました。

4.Sassが簡単に使える

Easy Sassという拡張機能を入れると、本当に簡単にSassが使えます。
今までGulpとかwebpackとか開発環境整備に時間を費やしていましたが、なんだったのレベルで簡単です。

hogehoge.scssというファイルを作ると同じ階層に自動でhogehoge.min.cssとhogehoge.cssを生成してくれます。

神かな。

5.簡易ローカルサーバーが使える

Live Serverという拡張機能を使うと、簡単にローカルサーバーを起動してくれます。
オートリロード機能もあるので、エディタで変更したら即座に反映されます。⌘＋Rとかしなくてだいじょぶです。

私は今メインで使っているマシンがmacbookpro 13インチで画面が狭いので、サブディスプレイとしてiPadにduetというアプリを入れて使ってます。
とくに遅延も無くスムーズにコーディングできます。

神なのかな？？

 今、私が使ってる拡張機能

今使っている拡張機能はこんな感じです。（2019年1月現在）

  • ACF-Snippet
  • Beautify
  • Easy Sass
  • Horizon Theme
  • Image preview
  • indent-rainbow
  • Japanese Language Pack for Visual Studio Code
  • jQuery Code snippets
  • Live Server
  • Material Icon Theme
  • Material Theme
  • Paste and Indent
  • Prettier
  • stylelint
  • WordPress Snippets

今後改善していきたいところ

ソースをキレイに整形してくれるフォーマッター類がいまいち上手く使いこなせていないので、調べていきたいな。
（prittierとかBeautifyです。）
あと、BracketsにあってVS Codeにない便利機能（見つけられてないのかもしれないけど）はLine to list機能（文字の各行をliでマークアップしてくれる機能）やテーブルつく太郎（エクセルから表をコピペすると自動でtableタグにしてくれる神機能）も、代替手段がないのか探していきたいですね。

あと、日本語のサジェストボックスが入力しているところにかぶっちゃうんですよね。この現象がなんとかなればいいな…。

ブログ一覧へ