初めて憧れのQiitaに憧れのアドベントカレンダーで投稿します。どきどき……。
「VisualStudioCode に乗り換えたよ！」という記事は世の中にたくさんあります。
が、「Dreamweaver から乗り換えたよ！」「ココが良かったよ」「ココが Dreamweaver と違うよ」といった記事が見当たらず……移行するまでに散々迷ったり悩んだりしました。
本記事はそんな人がいるのかどうかはさておき少しでも減るといいなと思い執筆しました。よろしくお願いいたします！
移行のきっかけ
Dreamweaver（以下、Dw） を使い続けて、だいたい7年ぐらいなのですが、この間 Dw に対して、特に不満はありませんでした。あってもせいぜいCS6以前の起動の遅さぐらいです。
しかし最近 gulp を使うようになってから、
- Dw でコーディング
- コマンドプロンプトを立ち上げる
- cd コマンドでプロジェクトの階層まで移動
- gulp のコマンドを打つ
といった面倒な手順を踏むことになり、どうにか効率化したく、たどり着いたのが VisualStudioCode（以下、VSCode） への移行でした。
移行して良かったこと
ターミナルが便利すぎる
移行の目的そのものなので言うまでもないことですが、別途コマンドプロンプトを立ち上げなくても良くなったのは本当に良かったです。ワークスペースを保存しておけば cd コマンドを打つ必要が無いのも◎。吐かれるログも見やすいです。
日本語対応マルチカーソルが神
Dw 自体にもマルチカーソルは搭載されていますが、残念ながら日本語入力モードだと複数個所に入力が反映されません。VSCode のマルチカーソルは、日本語でも全てのカーソルにきちんと入力されます。しかもコピペにまで対応しているだなんて神すぎる……。
頻繁に使う機能ではありませんが、割とストレスだったので助かりました。
拡張機能によるカスタマイズ
まだあんまりカスタマイズしていませんが、WordPress Snippet と Trailing Spaces にはだいぶお世話になっています。サジェストでWordPressの関数が出てくるとか感謝しかない。
一応、Dw にもアドオンを入れられます。そもそもアドオン入れて使ってる人を見たことがないけど
探したら WordPress Snippet に似たものを見つけましたが、更新が止まっていました。自由度や効率化はもちろん、情報の多さ、更新頻度という点で安心できるというのは大事だと思います。
移行で苦労したこと
Dw と同時に立ち上げていると、コンパイル結果に多少影響がある
何度 gulpfile.js に compressed を指定してコンパイルしても、expand でコンパイルされることがありました。
どうやら Dw と VSCode を同時に立ち上げている場合、 Dw 側のコンパイル設定が優先されてしまうようです。
まだ移行中なので、Dw でしかサイト設定（＝ VSCode でいうワークスペース）がされていないプロジェクトが多く、うっかりやらかしてます。早く移行を完了させて安心したいです……。
Dw の挙動が体に染みつきすぎて慣れない
コードブロックをコピーしたときのカーソル位置など、細かいところで挙動に違いがあります。染みついたタイピングの癖がなかなか抜けず、数秒とはいえタイムロスしているのが現状です。
特にサジェストと補完機能が結構異なっていて、Dw では cl＋Enter で class="" まで補完してくれるんですが、VSCode では上手くいきません。逃げ続けていた Emmet と仲良くする時が来たか……。
また、地味に Dw のシンタックスハイライトがどれだけ充実していたかをひしひしと痛感しています。これはちゃんと拡張機能入れれば解決しそうな気もするので、ちょうど良いものを探そうと思います。
機能や概念の理解
VSCode を使う前、「Dw のサイトという概念と、VSCode のワークスペースの違いって何だろう？」といったような、機能や概念の違いがいまいち分からなかったりしました。取り敢えず「習うより慣れろ」と無理やり移行に踏み切って、今こうしてアウトプットしつつ自分の中で理解を深めているところです。
もし「こういうの便利だよ！」といったものがありましたら、ぜひ教えてください！
移行前後で変わらなかったこと
アプリケーション起動までの時間
PCスペックや Dw のバージョン、VSCode に追加した拡張機能にもよりますが、そこまで大きな違いを感じませんでした。
CC2019 に比べて若干 VSCode の方が早いかな、という程度。
移行（中）の感想
改めて Dw ってすごいなと思いました。インストールしてちょっと環境設定すれば、SCSS のコンパイルや強力なサジェスト機能・シンタックスハイライトといった加護が得られますからね。
VSCode は、インストールしてようやくスタートラインという感じがします。Dw のような手厚いサポートセットがないのは少し心もとないですが、自力で走るためのカスタマイズをしていくのはウキウキしますし、それによって作業速度が上がっていったら楽しくなると思います。
早く体を VSCode に慣らして、最高のカスタマイズで爆速コーディングしたいものです。
移行に当たっていれた拡張について
なるべく慣れ親しんだ Dw に近い使用感＋ちょっと便利にしようと思い、下記の拡張機能を入れました。
Japanese Language Pack for Visual Studio Code
とにもかくにもまずは日本語化。
Auto Close Tag
Dw でいう 環境設定 > コードヒント > 終了タグ：開始タグの ">" の入力後 に該当する機能を追加してくれます。
無いと死ぬ機能だったので、拡張があって助かりました……。
IntelliSense for CSS class names in HTML
HTML で class を指定するとき、読み込んでいる CSS からサジェスト・補完してくれる拡張です。
HTML Snippets
Dw でも VSCode でも Emmet を使用することができますが、私自身はそんなに活用していなかったので入れました。
先述の通り Dw との挙動の違いを埋めるためにも Emmet と仲良くなろうと思います。それまでの補助輪ということで……。
Trailing Spaces
不要な空白をハイライトしてくれます。
WordPress Snippet
Wordpress の関数をサジェストしてしてくれます。暗記が苦手なので本当に助かる……。
今後、これ以外にも色々入れてみようと思います。
HTML、CSS（SCSS）、JS（jQuery）、PHPのコーディングで便利な拡張機能あったら教えてください！
ありがとう、そしてサヨナラ、 Dreamweaver
私は VSCode と幸せになります。
でも、たまには一緒に（旧案件とか）仕事しようね。
追記
記事を書き終えたあと、rakkyoさんの記事を読んで Live Sass Compiler と Live Server を導入してみました。
gulp を使うまではいかない小さな案件でも気軽に作業できるようになり、いよいよ本格的に Dw から移行できそうです！
ただ、@import hoge.css のような形で CSS ファイルの読み込みを含めてコンパイルすると、フルパス（ローカルなら、Cドライブから該当ファイルまでのパス）で吐き出されてしまったり、記述の順序がおかしくなってしまったりと、細かい部分で気を遣う必要があります。
また、Live Server と XAMPP を併用する場合は、色々制約？設定？みたいなものがあるようなので、後で調べて整理しようと思います。