htmlなどのコードの編集にはマイクロソフトが開発しているVSCodeの使用を推奨します。Windows,macOS,Linuxで動作します。いかにダウンロードの方法を書いていきます。
ダウンロード
ダウンロードは以下のページから行うことができます。使用中のOSに合わせて適したものを選択してください。
インストールが完了したらVSCodeを開いてください。以下のようなウィンドウが表示されれば問題ありません。
拡張機能のインストール
VSCodeでは拡張機能をインストールすることによって機能を増やしたり、快適にコーディングを行うことができるようになります。
以下でおすすめの拡張機能とその機能の説明をしていきます。
Japanese Language Pack for Visual Studio Code
この拡張機能を使用することによってVSCodeを日本語化することができます。特別な理由がなければ使用することをお勧めします。
id:MS-CEINTL.vscode-language-pack-ja
Live Server
この拡張機能を使用するとhtmlを確認しながらコーディングすることができるようになります。絶対使用することをお勧めします。コードを編集して保存した瞬間に自動的に反映して表示してくれるのでとても使いやすいです。
ただしphpでは使用することができないので最初の段階にhtmlで作成する際に使うことで作業効率を上げています。
id:ritwickdey.LiveServer
Auto Rename Tag
タグを変更するときに、開始タグを変更すると自動的に終了タグも編集してくれる拡張機能です。h3からh4への変更などがしばしば発生すると思うのでこれを使用するとストレスを減らすことができるかなと思います。
id:formulahendry.auto-rename-tag
Image preview
テキストエディタの左端部分にどのような画像が読み込まれているのかを表示してくれる拡張機能です。ファイル名からどのような画像なのかわかるようにすることは大前提ですが、それでも画像として表示されているほうが直感的に理解しやすいので使用をお勧めします。常時表示されることになりますが、そこまで邪魔にはならないです。
id:kisstkondoros.vscode-gutter-preview
indent-rainbow
読んで字のごとくインデントをカラフルにしてくれます。画像のように色を付けてくれることによってかなり可読性が上がると感じています。まぁ正直これは人によっては邪魔になるかも……個人的にはこれ入れて作業効率上がったなと感じています。
id:oderwat.indent-rainbow
vscode-pets
かわいい
それ以外の機能はない
id:tonybaloney.vscode-pets
コメント