VScodeを使ったHP作り

おはこんばんにちは、うぷ主です。

今回はPCに普段使いでWindowsを使ってるけどコード書くときはlinux使ってる人が

多いと思います。

そしてテキストエディタにはVScodeを使ってる人も多いと思います。

そんな人にはWindowsのWindows Subsystem for Linuxを使います。

まずはWindows上でLinuxが使えるようにします。

Windowsマークの隣にあるっ検索バーでWindowsの機能の有効化または無効化と入力して

検索、コントロールパネルに行きます。

下の図のようにWindows Subsystem for Linuxの横のチェックボックスをチェックしてok

これでWindows側の準備はokです。

次にMicrosoft Storeでlinuxと検索し、出てきたディストリビューションから好きなものを

インストールしましょう。

インストールしたら起動してユーザー名とパスワードを入力してWindowsにlinuxを

入れる作業は終わりです。

続いてVisual Studio Codeをインストールします。

上記のサイトからダウンロード、Setupファイルを実行してインストール完了です。

その後拡張機能を入れていきます。

今回HPを作成するにあたって入れた拡張機能は

1.Japanese Language Pack for VS Code

VScodeを日本語表記する

2.Visual Studio Code Remote - WSL

Windows上VScodeのterminalでインストールしたlinuxが使えるようにする

3.Visual Studio Code HTML Snippets

HTMLの補完をしてくれる

4.Live Server

書いたHTMLファイルをブラウザ上に表記するためのウェブサーバの役目をする

5.Path Intellisense

面倒なパス周りを処理してくれる

6.Auto Rename Tag

タグの補完をしてくれる(HTML Snippetsのタグだけ強化版)

7.HTMLHint

HTMLのコンパイラ代わり

8.sftp sync extension for VS Code

よくわからん。テキストエディタからサーバにftp接続等をする拡張機能。ftp関連は詳しくないからとりあえず入れてみた。もしかしたらLIve Serverだけでいけるかも

9.VS Code JavaScript (ES6) snippets

javascriptの補完をしてくれる

10.IntelliSense for CSS class names in HTML

CSSのクラス名をHTMLで書くときに補完をしてくれる(CSS関連のファイルから探してくるので結構楽に補完できる)

以上が今回入れた拡張機能。

あと細かい設定、インデント補完と自動保存

ファイル→基本設定→設定から検索バーにindentと入力して検索、以下の画像のように設定

今度は検索バーにAuto Saveと入力して検索、以下のように設定

これでVScodeの準備は終了。

リモートコントロールして作業ができるようになる。

リモートコントロールをするにはVScodeを開いて左下の><をクリック、

Remote-WSL: New Window using Distributionを選択してさっきインストールしたlinuxの

ディストリビューションを選ぶとWindows上のVScodeでterminal上でのlinux操作ができるようになった。

これでHTMLが書けるようになりました！

試しに書いてみるとこんな感じ

Auto Saveなのでctl+sをしなくてもセーブされているけどめちゃ心配で何回もセーブしてしまうバカです...

その後、左のファイル欄でhtmlファイルを右クリック、"open with live server"を押したら設定されたブラウザで表示されます。

こんな感じ↓

ポート番号もあるしうれしいね！

てことで今回はここら辺でとりあえずおしまい、やることリストすっぽかしちゃった分やらねば...

後付け

VScodeのterminalでlinux環境が使えるようになったことについて、これだと毎回VScodeを開くたびにリモートコントロールに切り替えなければならないのでもう設定から変更しちゃおうということにした。

まずはエクスプローラーの中にあるlinuxのexeファイルを探す必要がある。

ファイルはだいたい

C:\Users\user\AppData\Local\Microsoft\WindowsAppsの中にあるから探す。userは自分のユーザー名で。ファイルのアドレスをコピーしたらVScodeの設定→機能→ternimnalで下にスクロールしていくと

Integrated>automation shell: Windowsがあるのでそこのsettings.jsonで編集をクリック

settings.jsonでは"terminal.integrated.shell.windows":の右を

コピーしたファイルのアドレスに置き換える。この時に元の分はコメントアウトするかして絶対に消さないように。元に戻すときにだいたいの場合面倒くさいことになります...

ちなみにうぷ主はやってしまいました(汗)

あともう一つ、フォルダの区切りをスラッシュ一つだけにしたままだとVScode独自のエスケープ文字と混同してエラーになってしまうため、スラッシュは二つで区切りましょう。

これでVScodeを再起動したら完了です。

ついでのおまけとして、他の人にディスプレイの一部分だけスクショして見せたいことが結構あると思いますので便利なショートカットをば...

WindowsマークとShiftキー+sでディスプレイの一部分だけスクショすることができます、スクショした後はペイントツールで編集でき、編集しなくてもいい場合はそのまま保存することで使用することができます。

printscreenのボタンでスクショする方法もあるんですけど、僕の場合何の反応もなくてスクショされたかわからないのでWindowsマークの方でスクショしてます。

あとVScodeでterminalを出すにはctl+@です。

open with live serverのショートカットもおそらくあるんでしょうけど、僕は押しても反応がなかったです(泣)

これでだいたいの環境は整いました。あとはCSSやjavascriptを書くにつれて必要な拡張機能が出てくるかもしれないし、作ったHPを外部からも見れるようにしたいですね。

おわりんぬ