Web制作の為のVisual Studio Code導入とオススメのプラグイン & 設定

いしかわ

2022年2月6日 22:41

今回は、僕と同じ様に、Web制作にVisual Studio Code（以下VSCode）を導入したい初心者の方向けに、導入方法や、主に僕が使っているプラグイン、と設定の紹介をしていきたいと思います。

■インストール方法

まずは、インストール方法です。以下のページにアクセスします。

「今すぐダウンロード」をクリック

お使いのOSの物をクリック。こちらではWindowsで進めていきます。

ダウンロードが開始されます。

exeファイルをダブルクリックして開きます。

「同意する」にチェックをつけて、「次へ」をクリック。

インストール先を指定できる。特に変更する必要もない場合が多いと思うので、そのまま次へをクリック。

特に変更する必要もないので、そのまま次へをクリック。

そのまま「次へ」をクリック。
もし、ファイルやフォルダを右クリックした時に「codeで開く」という文言を追加したい場合は、チェックボックスにチェック。

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

インストールが開始されます。

インストールが終わると、上の画像の様な画面が出るので、「完了」をクリック。
「Visual Studio Codeを実行する」にチェックがある状態だと、完了を押した後にVSCodeが開きます。

これで、インストールは完了ですが、このままだとUIが英語です。
プラグインをインストールして、日本語化を始め、便利な機能をインストールしていきます。

■僕の使っているプラグイン

VSCodeは、日本語化を始め、様々なプラグインをインストールする事で、色々な機能を追加して、カスタマイズする事が出来ます。

今回は、僕が実際にインストールしているプラグインを紹介していきます。僕と同じ様にWeb制作をしていきたい方に参考になると良いなと思います。

・Japanese Language Pack for Visual Studio Code

VSCodeのUIを日本語化する為のプラグインです。

1.左側にあるメニューのプラグインのアイコンをクリック

2.上部の検索ボックスに、「japanese」と入力。「japanese」で始まるプラグインの一覧が表示される。

3.「japanese」で始まるプラグインの中から、「Japanese Language Pack for Visual Studio Code」のInstallをクリック。

4.Installをが終わると、右下に再起動を促すボタンが出てくるので、「Restart」をクリックする。

5.再起動が終わると、日本語化が完了。

なお、別の方法として、英語バージョンのVSCodeを開くと、以下の画像の様に右下にJapanese Language Pack for Visual Studio Codeの案内が出るので、そちらをクリックすることでも、日本語化できます。

・Live Server

ブラウザをリロードしなくても、コード上での変更がブラウザに反映されるので、ブラウザでhtmlを確認する際に、便利なプラグインです。

1.プラグインの追加画面から検索し、Live Serverをインストール。

2.フォルダを開き、htmlファイルを表示させる。右下に「Go Live」の文字が出るので、クリックする。

3.ブラウザが立ち上がり、htmlを表示します。場合によっては、ファイヤーフォールのアラートが出るかもしれませんが、許可してしまってOKです。

4.VSCode上で、htmlを更新して上書き保存する。

5.自動的にブラウザが更新され、変更内容が表示される。

※補足
もし、「Live Server」の文字が右下に表示されない場合は、いちどVSCodeを落として、再度開くか、コマンドパレットを使って起動させる。

表示->コマンドパレットをクリック

入力欄にliveserverと打ち込むと、Live Server：で始まるコマンドの一覧が表示されるので、「Open with Live Server」を選択してクリック、またはenterキーを押す。

Live Serverが起動し、ブラウザにhtmlが表示される。

・zenkaku

HTMLやCSSは、半角スペースをよく書きます。その時に、初学者の方は間違えて全角スペースを打ってしまう事がよくあります。
zenkakuは、コード上の全角スペースを強調して表示してくれるプラグインです。

1.プラグインの追加画面から検索し、zenkakuをインストール。

2.再起動させると、全角のスペースが強調される様になる。

・Background Phi Colors

Background Phi Colorsは、コードの階層を色で表示してくれるプラグインです。
HTMLの開始タグと閉じタグの組みを見るのに便利です。

1.プラグインの追加画面から検索し、Background Phi Colorsをインストール。

2.コードのインデントを色分けして、コードの階層を見やすくしてくれます。

・Bracket Pair Colorizer

Bracket Pair Colorizerは、カッコの開始と閉じの組みを、色分けして表示してくれるプラグインです。
javascriptやphpなど、カッコを間違えるとエラーで動かなくなるプログラム系のコードを書く時に便利です。

1.プラグインの追加画面から検索し、Bracket Pair Colorizerをインストール。

2.Javascriptなど、カッコが入れ子になることの多い言語で、カッコの対が同じ色になる様に色分けしてくれます。

・Error Lens

VSCodeは、デフォルトではコードにエラーがある時、波線でコードをハイライトしてくれるだけですが、Error Lensを使うとコード上のエラーを、わかりやすく表示して、ヒントも出してくれます。

1.プラグインの追加画面から検索し、Error Lensをインストール。

2.エラーをわかりやすく表示してくれます。

・htmltagwrap

HTMLを書く時、もう書いてあるコードの後から別のタグでコードを括りたい時に便利なプラグインです。

1.プラグインの追加画面から検索し、htmltagwrapをインストール。

2.コード上の括りたい場所をドラッグして選択します。

3.alt + w（MACはoption + w）を押す。デフォルトではpタグで括られる。

4.好きなタグ（画像ではdivタグ）を打ち込むと、開始タグと閉じタグを同時に書いてくれる。

・IntelliSense for CSS class names in HTML

HTMLを書く時に、CSSにあるクラス名から、コードヒントを出してくれる便利なプラグインです。

1.プラグインの追加画面から検索し、IntelliSense for CSS class names in HTMLをインストール。

2.CSSにクラスを書きます。画像では、文字の色を変えるクラスを書いています。

3.クラスが書かれているCSSを読み込んだHTMLに、class属性を追加する時に、ctrl + space（MACはcontrol + space）で、CSSに書かれているクラスをコードヒントとして表示してくれます。

・SFTP

VSCode上で、サーバーと接続して、ファイルのアップロードやダウンロードができるプラグインです。
保存と同時にアップロードする設定にすると、WordPressサイトなどサーバーじゃないと見られないサイトを作るのに便利です。（ただし、エラーがあってもおかまいなしにアップロードしちゃうので注意が必要です。）

1.プラグインの追加画面から検索し、SFTPをインストール。

2.コマンドパレット（表示->コマンドパレット）から、「sftp」と入力し、「SFTP:Config」を選択してエンターキーを押す。

3.SFTPでアップしたいサーバーの情報を入力するファイルが作成されます。host、protocol、port、username、などの情報を入力します。
uploadOnSaveをtrueにすると、ファイルを保存時にファイルをアップしてくれます。
なお、passwordの項目が、最初は無いので、画像では追加しています。