実務経験37日目、エディタでおすすめのvscodeとその拡張機能

おすすめのエディタのvscodeと拡張機能のEMMETでコーディングのスピードが上がるけど

「コーディングのスピードをあげたいな〜」と思っていたのですがエディタはvscodeを使って拡張機能はEMMETを入れていました。

EMMETはcssを短縮できる拡張機能ですが「display:flex;」は「df+tab」でできたり「font-size:16px」は「fz16+tab」でできます。

他にもコードを短縮できるので気になる人はググって下さい。

それと拡張機能のlive serverですがこれはcssを変更して画面を読み込むのを自動的にやってくれます。

これだけでもコーディングのスピードは上がりますがもっとスピードを上げたいと思い知ってはいたけど使ってなかったscssを使うことにしました。

 

scssを使ったらcssに戻れなくなった

scssはcssを短縮した書き方で何度も使う色や横幅や縦幅のサイズを変数として宣言できたり他のファイルから変数を持ってきたりできます。

それと親要素と子要素の関係がめっちゃ見やすくなります。

 

 

子要素にcssを当てる時ですが親要素の中に書くので子要素が増えれば増えるほどコードが減ります。

親要素の直下の子要素やnth-childを使う時は↓になります。

 

 

他にもいーっぱいありますがググれば見つかります。

scssはプログラミング言語のRUBYで使うのですがvscodeなら拡張機能でscssを使うことができます。

「vscode scss」でググればすぐ見つかります。

 

scssを使う時に困ったこと

HTMLファイルにscssを読み込むための記述をしないといけないのですがネットで見つけることができなくて悩んだ結果「もしかしてcssと同じでは？」と思いやってみたらうまくいきました。

scssの拡張子ですが「style.scss」みたいになります。

コーディングスピードが上がるのとcssがすっきりして見やすくなるのでcssを使っている人はぜひscssを使って下さい。

「エディタはvscodeを使ってないけど」という人もいるはずですがこの機会にエディタを変えてみてはどうでしょうか？

vscodeのシェア率は圧倒的です。

 

拡張機能もあるし無料だし使いやすいからだと思います。