VSCodeの便利拡張機能と制作効率化

VSCodeの便利拡張機能と制作効率化

VSCodeは無料で利用できる高機能なコードエディタでウェブ制作との相性も抜群です。拡張機能を追加することでHTMLやCSSやJavaScriptの補完や整形やライブプレビューなどさまざまな機能を取り入れられます。最初は標準状態のまま使い慣れてきたら少しずつ拡張機能を試していくと迷いにくくなります。

学習に役立つ基本テンプレート

毎回ゼロからHTMLを書き始めるのは大変なので学習用のテンプレートファイルを用意しておくと便利です。doctypeやmetaやviewportなど毎回必要になる要素をあらかじめ入れておき必要に応じて見出しやセクションを追加していきます。

See the Pen VSCodeの便利拡張機能と制作効率化 by Syo Yanai (@h1-tech-japan) on CodePen.

ショートカットとスニペット

VSCodeには複数行編集や検索置換など作業を効率化するショートカットが多数用意されています。またよく使うコードをスニペットとして登録しておけば短い入力でテンプレートを展開できます。最初から全部を覚える必要はなくよく使う操作から少しずつ手に覚えさせていくと自然に作業速度が上がっていきます。