自信をつけるための成長日記

ナオキブログ

プログラミング

VSCode Webコーディング効率向上のための拡張機能11選

更新日:

※技術系の情報発信はQiitaで行うことにしたので、よろしければご覧ください。

https://qiita.com/

これからHTMLの勉強を始める方、模写コーディングを始める方向けに必須の拡張機能をまとめました。

僕が勉強を始めた当初、1つのサイトを見ても説明が足りずにたくさんのサイトを見て回っていました。それを解決するためにまとめたものをここで紹介しようと考えた次第です。なので、初めての方でもわかりやすいように紹介していきます。

紹介する拡張機能は以下の通りです。

  • Live Server
  • Prettier
  • Japanese Language Pack for Visual Studio Code
  • Code Spell Checker
  • Auto Rename Tag
  • CSSTree validator
  • HTMLHint
  • IntelliSense for CSS class names in HTML
  • Visual Studio IntelliCode
  • zenkaku
  • Bracket Pair Colorizer

まだ、全然わからないと思いますので、ほぉ~って感じで見てもらえば大丈夫です。

それでは上から順にみていきます。

Live Server

この拡張機能は、VSCode側でHTMLやCSSで保存した時にブラウザ側も自動で更新してくれるようになります。

使い方

※前提としてフォルダの中にhtmlファイルを作成している状態で進めます。

①VSCodeでフォルダごと開きます。

余談:僕はフォルダごと開くと知らずに解決まで3時間ほどかかりました。

②少し待つと、作成したhtmlファイルの下の方に「Go Live」という文字が表示されるのでこちらをクリックするとブラウザが自動で立ち上がります。

➂あとはhtmlを保存すれば自動で更新されます。

※フォルダで開いでいるときは下のバーが青色、フォルダで開いていないときは紫色になっています。なので、バーが紫色になっている場合は起動しません。

開くブラウザをchromeに変更する。

①この歯車みたいなマークをクリックして、「拡張機能の設定」をクリックします。

②少し下の方に行くと開くブラウザを選択できるところがあるので、ここでchromeを選択します。

Prettier

この拡張機能は自動でコードを整えてくれます。

使い方

① ctrl + , で設定画面を開く。

②検索窓に「onsave」と入力する。

➂Format On Saveというところにチェックマークを入れる。

④あとはhtml上で保存した際に自動で整えてくれます。

Japanese Language Pack

英語表示を日本語表示にしてくれます。

使い方

インストール後、VSCodeを再起動してください。

ここから先の拡張機能は特に設定もなくインストールするだけで使用できます。

※全てインストール後、一応、再起動しておいてください。

Code Spell Checker

この拡張機能は、コードのスペルミスを教えてくれます。

Auto Rename Tag

開始タグを修正したとき、終了タグも修正してくれます。

CSSTree validator

HTMLとCSSのコード検証をしてくれます。

HTMLHint

HTMLのミスを教えてくれます。

IntelliSense for CSS class names in HTML

CSSの入力補完をしてくれます。

Visual Studio IntelliCode

CSSの補完をしてくれます。

zenkaku

コード中の全角スペースを教えてくれます。

Bracket Pair Colorizer

ペアになる ( ) や { } に色をつけて分かりやすくしてくれます。

これで紹介している拡張機能のインストールは終了しました。

最後に

僕が拡張機能を初めて入れていた時は、拡張機能の機能を一生懸命覚えようとしていました。

しかし、覚える必要はないです。

覚えるとしても、Live Server と Prettier ぐらいでいいです。

これらの機能があることを当たり前と思ってもらい、htmlを勉強していく中で「この拡張機能って、こんな感じの役割だったんだ」的な認識で進めていけばいいと思います。

ここまで読んでいただきありがとうございました。

テスト

テスト

-プログラミング

Copyright© ナオキブログ , 2020 All Rights Reserved Powered by STINGER.