ウェブ

Web制作にお勧めのエディタ|VSCodeの設定・拡張機能【コーダー必見】

VSCodeアイキャッチ画像

Web制作で開発ツールとしてよく使われるVSCode。自身が普段使用しているエディタで、HTMLCSSJSを書くとき便利なので重宝しています。

これから初めて使い始める人が、最初に入れておくことによってVSCodeを効率よく使いこなすための設定や拡張機能の紹介とダウンロードからインストールまでのやり方を紹介します。

プル

他にも良い拡張機能があればコメントで教えてもらいたいです。

VSCodeとは

VSCode(Visual Studio Code)とは、マイクロソフト社が無料で提供しているテキストエディタの事です。誰でも無料で利用する事が出来ます

拡張機能が豊富で必要に応じて機能を追加し、最終的に自分好みのエディターに仕上げられます。

VSCodeをダウンロードからインストール

下記のURLにアクセスします。

・Visual Studio Codeダウンロードサイト
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Visual Studio Codeダウンロード
Visual Studio Codeダウンロード

「今すぐダウンロード」をクリックし、WindowsとMacで分かれているので、自身の対応デバイスの方をクリックしてダウンロード。

ダウンロード画面
ダウンロード画面

セットアップアイコンをクリックして、同意画面で「同意する」にチェックして、「次へ」をクリック。インストール先の指定がありますので任意の場所を指定して「次へ」をクリックします。「デスクトップ上にアイコンを作成する」を選択して、デスクトップにショートカットの作成されていればダウンロードからインストールの流れは完了です。

VSCode初期設定

VSCodeを初めて開いた場合は、英語表記になっているので、日本語設定をします。

ViewCommand Paletteをクリック。

Command Palette
Command Palette

コマンドパレットに「display」と入力すると候補にConfigure Display Languageと出ますので選択。

Configure Display Language
Configure Display Language

候補からInstall Additional Languagesを選択してクリック。

Install Additional Languages
Install Additional Languages

インストールをクリック。

インストール後、VSCodeを再起動すると日本語表記になっています。

日本語設定
日本語設定

その後はいつでも言語は変更可能でenjaの表示されるのでどちらかを選択。

ja設定
ja設定

便利機能

VSCodeで改行を削除して1行など、空白行だけ削除したりする方法です。

標準でついている機能なので覚えておくと便利な操作になります。

改行を削除する

改行削除リプレイ
改行削除リプレイ

検索&置換を出しますctrl + h

検索&置換
検索&置換

検索^\nを入力。

^\nを入力
^\nを入力

▪*(正規表現)の部分をクリックすると、改行されている箇所を検出することができます。

正規表現を使用
正規表現を使用

置換部分は空白にして右ボタンをクリックで置換を実行します。

これで全体の改行は削除されます。

置換を実行
置換を実行

改行を削除して1行にする

改行削除1行リプレイ
改行削除1行リプレイ

検索\nを入力。

\nを入力
\nを入力

▪*(正規表現)の部分をクリックすると、改行されている箇所を検出することができます。

正規表現をクリック
正規表現をクリック

置換部分は空白にして右ボタンをクリックで置換を実行します。

これで全体の改行は削除されます。

置換を実行
置換を実行

▪徹底解説Visual Studio Code
テキストエディタとして人気を集めている「Visual Studio Code(VS Code)」について、使い方の基礎から応用テクニックまで幅広く解説しています。
Visual Studio Codeをすぐに使いこなせる便利な拡張機能を紹介するだけでなく、プラグインの開発方法までも掲載しており、これからプログラミングを始める人も、プログラミング経験はあるがVisual Studio Codeに触れたことのない人も、必読の1冊です!

book
created by Rinker
¥2,792 (2022/10/05 04:09:38時点 楽天市場調べ-詳細)

拡張機能

おススメする拡張機能の紹介になります。

  • Live Serverv:即時プレビュー
  • zenkaku:全角スペースの確認
  • JS-CSS-HTML Formatter:コードの自動整理
拡張機能
拡張機能

Live Serverv(ライブサーバー)

Live Servervリプレイ
Live Servervリプレイ

拡張機能で一番使用しているのが「Live Serverv」です。

HTMLCSSJSのコードの記述がブラウザに即時反映してくれるライブプレビュー機能です。通常であれば確認作業はHTMLの保存ブラウザの更新の工程が必要になりますが、この拡張機能のおかげで時間短縮になります。

インストール

Live Server
Live Server

Live Serverと入力してLive Serverを選択しインストール。

Live Serverインストール
Live Serverインストール

インストールが完了したら右下にある「Go Live」をクリック。

Go Live
Go Live

クリック後「Port:5500」になって、自身の既定のWebブラウザが起動してプレビューができるようになります。

Port:5500
Port:5500

ショートカットキー

shift + Ctrl + Pで検索を表示。

検索一覧
検索一覧

liveと入力しEnterでプレビュー出来ます。

Live
Live

zenkaku

zenkakuリプレイ
zenkakuリプレイ

コーディングあるあるで、いつの間にか全角スペースを入力してしまっているといったことがあります。HTMLCSSなどのマークアップ言語なら動くのでまだ大丈夫ですが、プログラミング言語になってくると、半角スペースを全角スペースを一文字分でも入れてしまった場合全く動かなくなってしまいます。

・全角スペースが入ってしまったばかりに問題解決が遅れてしまいます。

  • 「コードは間違ってないのになぜか動かない」
  • 「コード構造が複雑で全角スペースを見つけられない」

そうならない為に、前もって全角スペースを可視化してくれる拡張機能「zenkaku」です。

zenkakuインストール
zenkakuインストール

インストール

zenkaku検索
zenkaku検索

zenkakuと入力してzenkakuを選択しインストール。有効にして完了です。

CSS Formatter

CSS Formatterリプレイ
CSS Formatterリプレイ

インデントや半角スペースなど不要なスペースを綺麗に整理整頓してくれます。

CSS Formatterインストール
CSS Formatterインストール

インストール

CSS Formatter検索
CSS Formatter検索

CSS Formatterと入力してCSS Formatterを選択しインストール。

使い方

▪ショートカットキーshift + alt + fで一括整理されます。

▪Visual Studio Code実践ガイド–最新コードエディタを使い倒すテクニック
基本と意外と知らない基本機能からカスタマイズまで。そして拡張機能開発までを扱うVisual Studio Code解説書の決定版です。

book
created by Rinker
¥3,058 (2022/10/04 07:04:41時点 楽天市場調べ-詳細)

VSCode拡張機能の保存場所

Windows版のVSCode拡張機能のファイル場所になります。

C:\Users\ユーザー名\.vscode\extensions

↓下記本はHTML&CSSとWebデザインが 1冊できちんと身につく本です。

HTML&CSSとWebデザインが 1冊できちんと身につく本
HTML&CSSとWebデザインが 1冊できちんと身につく本

▪HTML&CSSとWebデザインが 1冊できちんと身につく本
Web制作の基礎言語であるHTMLやCSSの書き方だけでなく、多くのWebサイトが採用している4つのレイアウト手法を学ぶことで、1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込まれています。

book
created by Rinker
¥2,508 (2022/10/05 00:18:26時点 楽天市場調べ-詳細)

↓初心者から抜け出すために必要な知識を学びたい方ようです。

▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
book
created by Rinker
¥3,190 (2022/10/04 22:06:53時点 楽天市場調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA