神エディターVisual Studio Code！WEB制作者のためのおすすめ設定はこれ

　

僕は現在WEB制作のコーダーとして Visual Studio Code を実際に使用してコードを書いています。

非常に使いやすくおすすめです！
僕が実際にコードを書いている経験をもとに「これは便利だ！」と思った設定やプラグイン（追加機能のようなもの）を紹介します。
自分に当てはまるものだけで構いませんのでマネしてみてください！

　

Visual Studio Code の初期設定

初期設定からしていきましょう。ついてきてください！

　

Flile > Preferences >Settungsの順に進みます

　

　

Auto save  off→afterDelay

オートセーブの設定です。afterDelayにすることで変更を加えた後に自動で保存してくれるため、保存忘れがなくなります。絶対に設定しておきましょう。

　

　

Tab Size 　4→2

Tabサイズの変更です。僕は4だと大きすぎてコードが見にくいなと感じましたので2にしています。

　

　

Word Wrap off→on

折り返し機能有効化です。onにしておくことで長いコードを書いても自動で折り返して表示範囲に収めてくれます。

　

Visual Studio Codeの使い方

今回はWEB制作向けということでHTMLを書いて、そのコードをウィンドウに表示させてみましょう！

　

　

まずはデスクトップにフォルダーを作成します。
今回は「first」という名前で作成。

　

　

「Open Folder」で先ほど作ったフォルダーを選択し、開きます。

　

　

画像の赤丸の箇所をクリックし、HTMLファイルを作成します。
今回は「index.html」というファイルを作成してみましょう。　

　

　

作成出来たら「index.html」ファイルにhtmlを記述してみましょう。

　

　

次にブラウザを開き、「index.html」の赤丸の箇所をブラウザにドラッグアンドドロップしてみましょう。

うまく表示されたでしょうか？
今後はこのようにhtmlをブラウザに表示しながら作業していくことになります！

あわせてデベロッパーツールの使い方も勉強しておくといいでしょう。

　

便利なプラグイン

ここではWEB制作でHTMLやCSS、jQueryなどを書いていく人向けのプラグインの紹介になります！

インストールの仕方から紹介するよ！

　

1つめはインストール方法と一緒に紹介。

Visual Studio Code を日本語化してくれるプラグインです。帰国子女でもない限り入れときましょう。

　

　

プラグインのインストールの流れは以下のようになります。

赤丸をクリック→青丸でプラグインを検索→黄丸でインストール

インストール後はソフトの再起動を求められますので再起動しましょう。

　

ここからはプラグインの紹介のみどんどんしていきます！

htmlタグを書いた時に自動で閉じタグを書いてくれるプラグインです。
progateをやってた人ならこれのありがたみが分かるはず、、

　

開始タグを変更したときに自動的に閉じタグまで変更してくれます。
修正時の時間が短縮されて便利です！

　

対応する開始タグと閉じタグを色を付けて教えてくれます。
コードをたくさん書いて画面がdivがいっぱいになってくると
「どれがどれの閉じタグだ、？」となります。
そんな時にはこいつに助けられます。。

　

htmlやcssの変更をブラウザに反映するには本来ブラウザをリロード（再読み込み）する必要があります。
このプラグインを起動しておけば自動的に反映してくれます！

インストールすると右下に「Go live」ボタンが出現しますのでクリックするだけで起動します。

　

最後に

今回はVisual Studio Codeのおすすめ設定や使い方、プラグインを紹介しました。

今後は使いながらご自身の開発する環境に応じて設定やプラグインを模索していってください！
ここを甘く見ている人は仕事ができないと僕は思います。

たったワンクリックの省略ですが、ここをしっかり極められる人とおろそかにする人とでは業務における小さなストレス、時間のロスが積もり積もって差が生まれるでしょう。
自分の業務1つ1つに効率を求め、少しでも時給をあげる意識で上を目指しましょう！