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

WEB

 

エディターってなんだ?とりあえず入れたけど使い方がまったくわからない、、

てるち
てるち

そんな方向けに僕おすすめのエディター Visual Studio Code の初期設定から使い方までを画像付きで解説します!

僕は現在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制作でHTMLCSSjQueryなどを書いていく人向けのプラグインの紹介になります!

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

 

Japanese Language Pack

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

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

 

 

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

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

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

 

Auto close tag

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

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

 

Auto Rename Tag

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

 

Highlight Matching Tag

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

 

Live Server

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

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

 

最後に

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

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

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

コメント

タイトルとURLをコピーしました