CODE

WebコーダーがVSCodeに入れるべきプラグイン7つ【初心者向け】

この記事では、Webコーダー初心者の方がVSCodeに入れるべきプラグイン7つをご紹介します。

 

WebコーダーがVSCodeに入れるべきプラグイン7つ

WebコーダーがVSCodeに入れるべきプラグインは下記の7つです。

  • AutoFileName
  • Beautify css/sass/scss/less
  • Bracket Pair Colorizer
  • Color Picker
  • HTMLHint
  • Live Server
  • vscode-icons

では、それぞれ解説していきます。

 

AutoFileName

画像などのファイルへのパスを補完してくれるプラグインです。

imgタグなどで「src=“”」を書くとフォルダやファイルの読み込み候補が出てきます。

こういった補完機能に頼っていくことで、コーディングを効率よくゴリゴリ書いていくことができます。

vscode AutoFileName

 

Beautify css/sass/scss/less

HTMLやCSS、SASS、Javascriptのコードを綺麗に整形してくれるプラグインです。

vscode Beautify css/sass/scss/less

 

Bracket Pair Colorizer

対応するカッコに縦横線のハイライトを表示してくれます。

特にJavascriptで活躍するプラグインです。

vscode Bracket Pair Colorizer

 

Color Picker

パレットで色指定や、ピッカーで色を取得できます。

cssで16進数で色を指定するときに便利なプラグインです。

vscode Color Picker

 

HTMLHint

HTMLのシンプルな構文をチェックしてくれるプラグインです。

  • チェックしてくれる構文は下記の通りです。
  • DOCTYPE宣言が最初に記述されているか
  • タグの要素名、属性名、属性値チェック
  • 要素の閉じ忘れ
  • 空要素にスラッシュが入っているか
  • id属性が重複してないか
  • 空のsrc値がないか
  • title要素があるか
vscode HTMLHint

 

Live Server

ブラウザでHTMLとCSSが反映されたWebページを確認することができます。

Live Serverがあると、修正したコードが自動でWebページに反映されるようになります。

vscode Live Server

 

vscode-icons

VSCode画面左にあるファイルツリーのそれぞれのファイルにアイコンがつきます。

こちらのプラグインは必須ではありませんが、使ってみると、文字だけでなく、画像や色も重要に感じるのではないでしょうか。

ファイルにアイコンがつけられるプラグインは他に「Seti」「Material Icon Theme」などいろいろあるので、自分好みのプラグインを入れると良いと思います。

vscode vscode-icons

 

まとめ

この記事では、Webコーダー初心者の方がVSCodeに入れるべきプラグイン7つをご紹介しました。

VSCodeのプラグインは他にもたくさんありますが、プラグインを入れすぎてしまうと、機能が競合してしまったり、動作が重くなってしまう要因になりかねません。そのため、自分の用途に合わせたプラグインを使っていきましょう。

 

ABOUT ME
りん
フロントエンドエンジニア / 趣味ブログ / 沖縄から東京に就職1年SE→ 1年フリーランスSE→ 沖縄移住2年Webデザイナー → 福岡移住1年目フロントエンドエンジニア / HTMLCSS大好物 / JS / PHP / Laravel / WordPress / VScodeでVim使う人