こんにちは、制作担当のI.Sです。
今回はVS Codeでよく使う拡張機能のご紹介をしようと思います。
目次
1.Japanese Language Pack for Visual Studio Code
2.Live Sass Compiler
3.Prettier – Code formatter
4.Path Intellisense
1.Japanese Language Pack for Visual Studio Code
まずは日本語化プラグインの「Japanese Language Pack for Visual Studio Code」です。
これはよく使う以前に必須プラグインだと思います。
名前の通りVS Codeを日本語化する拡張機能です。
初期状態は英語表示となりますので、VS Codeを使用する際は必ずインストールしましょう。
2.Live Sass Compiler
お次は「Live Sass Compiler」です。
こちらはSCSSファイルをCSSにコンパイルしてくれる拡張機能となります。
一応Node.jsやRubyをダウンロードして環境をつくる…という手段もありますが、
環境作成が手順が面倒だったり、いちいちコマンドを起動しないといけないなど
少し不便があります。
ですがこの拡張機能は比較的に楽にコンパイル環境ができます。また、出力先を細かく設定すればさらに手軽に扱うことができます。
僕が使用する際に参考にさせていただいた記事を載せておきます。sass環境をつくりたいという方は是非ご覧ください。
・live sass compailer 出力設定
https://shogo-log.com/live-sass-compiler/
・live sass compailer 一つのcssに統合
https://yumegori.com/vscode-sass-setting20200116#chapter-4
3.Prettier – Code formatter
3つめは「Prettier – Code formatter」です。
こちらはコードを綺麗に整形してくれるプラグインとなります。
↓例としてこのような感じです。
整形前
function example() {const foo = 2;return foo+1;}
整形後
function example() {
const foo = 2;
return foo + 1;
}
上記のように自動でコードを整形してくれます。見た目もスッキリし、次のコード入力もしやすくなります。初心者の方にもおすすめです。
4.Path Intellisense
最後は「Path Intellisense」です。
これはファイルパスを自動的に保管してくれるプラグインです。
画像やスタイルシートなどを記述する際に、パスを表示してくれるので、入力ミスが少なくなり、正確な記載ができるようになります。
まとめ
拡張機能を駆使することで、快適な制作環境をつくることができます。
これはコーディングに限らず、デザインなども当てはまるのではないかと思います。
是非、自分に合った拡張機能を見つけて、業務を効率化してきましょう。
