難しいことは分からない!なら、VSCodeを使っちゃおう!

難しいことは分からない!なら、VSCodeを使っちゃおう!

一時期、いろんなエディターが出て、あっちこっちに手を出しては変えて・・・を繰り返す時期もありましたが、ここ1年以上、ようやくVSCodeを使うことで落ち着いてきました。
おはこんばんちわ、kouraku です。

最近自分の周りでは、これまであまりコーディングをしたことない人がコーディングをすることになり、質問してくる機会がちょこちょこあったりします。

「gulpなんか知らない」
「git?何それ美味しいの?」
「エディター?EmEditor使ってるよ」

・・・なんて感じで、ちょっと前のタイプのWeb系の会社が、実は今も尚数多く存在してるんですね。そんな環境で働いている人に、「じゃあgulp使えるようにしようか」とか「git使えるようにしようか」など、いきなり言ったところで、そう簡単に導入なんかできなかったりするわけです。ですが、

「じゃあ、VSCode使ってみたら?」

は、簡単に言えます。別のエディターを使うくらいであれば、インパクトはさほどありません。 ということで今回は、コーディングを始めたばかりの方に、gulp等タスクランナーが使える環境がなくても、VSCodeを使えば仕事ができちゃうオススメ拡張機能をザッと5点ほど挙げてみます。

browsersync

rootとなるフォルダを右クリックして「BrowserSync Start」メニューをクリックするだけで、Browsersync(※)が誰でも気軽に使えるという優れもの。普段gulp等を使っている人でも、「今回はそこまで開発環境作ることないな・・・」とか「受け入れチェックしないと・・・」という時に便利。

スクリーンショット 2018-08-06 15.36.51.png

※Browsersync
ローカルサーバを起動して、同一ネットワーク上であれば複数ブラウザで同期操作が可能。Chrome/Firefox/Safari/ie11やスマホなどで、同時に確認ができる。また、ファイル監視もしているので、変更すると自動的にリロードしてくれる。

HTMLHint

HTMLの記述ミスや記述ルール違反などを、即座に教えてくれる拡張機能。統合ターミナルパネルの「問題」タブに出てくるのでわかりやすい。

スクリーンショット 2018-08-06 15.53.06.png

Live Sass Compiler

Sassファイルを更新すると自動的にCSSファイルに変換してくれます。

ただし、出力先は固定なので注意。ディレクトリごとに出力したい・・・となると別の手段を考えるべきか(それこそ、gulpの出番!?)。

ステータスバーにコンパイラー起動のスイッチ「Watch Sass」が追加されているので、そこで自動変換のON/OFF切り替えができる。

Live Serverも一緒にインストールされるので、「Go Live」をクリックすると、プロジェクトディレクトリのルートを起点としてローカルサーバが起動。

スクリーンショット 2018-08-06 17.48.33.png

scss-scan

Sass利用の際、ワークスペース内で定義されている変数やmixin、placeholder等を選択候補として表示してくれる。「mixinの名前何だったかな?」とかいう時が良くあるので、重宝している拡張機能。

スクリーンショット 2018-08-06 18.51.32.png

css-auto-prefix

入力したら即時にベンダープレフィックスを追加してくれる優れもの。わざわざ自分で書く必要がないので、コーディングの時間短縮にも繋がる。

ただし、gulpなどでautoprefixer等を使用しているときは邪魔でしかないので、そのときはしっかりと無効にしておきましょう。

スクリーンショット 2018-08-06 18.54.29.png

まとめ

本当にざっくりと5点、拡張機能をご紹介しましたが、HTML/CSSを書くくらいならこの程度でも十分だと思います。

とにかくVSCodeはプラグインを使えば、他にも色んなことができます。バージョン管理も楽々です(閉ざされた環境でなければ)。無料なのに、軽くて高機能。日々バージョンアップが行われ、使い勝手をどんどん良くしていこう、という開発者の心意気が感じられるエディターなのです。

「どのエディターを使うと良いのかな・・・」、と悩んでいる方は、VSCodeも一度試してみてはいかがでしょうか?

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ