今回はVisual Studio Codeのお勧めとフォントについて解説していきます。
プラグインのインストール方法は画像の赤丸をクリックして、四角枠にプラグイン名を入力すると出てきます。
それをインストールして有効化するだけなのでとても簡単です。
Auto Rename Tag
こちらはHTMLタグを間違えた際にタグを修正すると閉じタグも同じように修正されるプラグインです。
うっかり閉じタグの修正を忘れててエラーが起きる、と言った症状が発生しなくなりますので、是非導入しておきたいプラグインです。
Beautify
こちらはHTMLのインデントを自動的に綺麗に整えてくれるプラグインです。
ショートカットは【option＋shift＋f】です。
日本語入力時は聞きませんので要注意です。
DIVの閉じタグが意味のどこだろう？って探すような手間も省けるのでお勧めです。
CSS版もありますが、あちらは個人的に不要だと思ってます。
Code Spell Checker
こちらは英語のスペルが誤ってないかを自動的に検知してくれるプラグインです。
CSSやJavaScriptなどの英単語を多用する言語にも対応しております。
誤ってる箇所に下波線がつきますので、ありがちなClass名間違いなどでCSSが反映されない！などのエラーも防げますのでお勧めです。
Japanese Language Pack for Visual Studio Code
Visual Studio Codeはデフォルト言語が英語です。
それを日本語化してくれるプラグインです。
Microsoftが提供してるプラグインなので安心して利用可能です。
Live Sass Compiler
こちらのプラグインはSassを利用するために必要なプラグインです。
利用前にVS codeのフッターにある【Watch Sass】を押し忘れないように！
Gulpなどを入れなくとも気軽にSassが利用できるのでとりあえずSassの勉強をしたい！と言う方におすすめです。
Live Server
コーディングを行なっている際に、ブラウザで仕上がりを確認しつつ作業していると思いますが、それを自動で行なってくれる便利なプラグインです。
VS codeの保存を手動でなく【afterDelay】にしておけば、ファイルを更新する度に自動保存されますので、自動保存される度にブラウザも更新されますので非常に便利です。
こちらのプラグインを入れて、保存をafetrDelayにすると作業量が圧倒的に減りますので是非入れていただきたいプラグインです。
プログラミング用フォント Ricty Diminished
こちらはフォントの設定になるのですが、VS codeのFont FamilyをRicty Diminishedに設定すれば全角スペースが○表示に変わりますので、全角スペースによって発生するエラーを防ぐことができます。
DLしたファイルをクリックするとフォントをインストールする画面が出てきます。
その後インストールを行い、VS code側のFont FamilyをRicty Diminishedに設定すればOKです。
同等の機能のプラグインもありますが、フォントごと設定してしまった方が、プラグインの更新でエラーが起きたりするような事象を防げますので、是非フォントを設定される事をお勧めします。
以上となります！それでは良きコーディングライフを！
