WEB部門での実務経験

実務経験44日目、vscodeでコーディングする時の拡張機能

vscodeでコーディングする時の拡張機能

 

LPのコーディングをする時に効率的にできた方が時間の短縮とストレスが減ります。

実務でずーっとコーディングしている時があるのですがとにかく疲れます

Twitterでも↓を見ますが納得です。

私はエディタにvscodeを使ってコーディングしていますがお勧めの拡張機能があるのでその解説をします。

コーディングを初めてある程度経ってから色んな拡張機能を知ったのですが「もっと早く知っていればよかった〜」と悔やんでいます。

まだvscodeを使ってなくてこの記事を見ている人はこれを機会にエディタを変えみてはどうでしょうか?

特にコーディングを始めたばかりの人は後になって「もっと早く使っておけばよかった〜」って思うかもしれません。

それでは説明しますが拡張機能を追加する所は全て同じでまず↓の赤枠をクリックします。

 

↓の赤枠に入れたい拡張機能名を入れれば拡張機能が出てきますのでインストールしてください。

 

私の中で衝撃的だったLive Server

私はこれを知ってエディタをvscodeに変えました。

何ができるかですがコーディングの時にCSSを変えたら画面をリロード(再読み込み)しないといけないですよね?

それを自動でやってくれます

LPを作っている時に何度も何度もリロードしないといけないのですがこれがあると相当面倒なのがなくなりました。

リロードストレスフリーです。

「もうLiveServerなしでコーディングしたくないけど」って感じです。

こんな素晴らしい拡張機能を作った人は神様です 笑

Twitterでも↓です。

 

Live Serverの使い方

vscodeを開いた状態でcommand+Oをします。

するとフォルダが開ける状態になるのでコーディングしたいフォルダを選びます、ファイルは開いてはいけないので気を付けて下さい。

フォルダを開くがファイルは開いてはいけない

 

するとエディタの画面の右下に「Go Live」が表示されるのでクリックします。

画面右下にGo Liveが表示されます

 

すると↓の様にファイルが選択できるようになるのでコーディングするファイルを開きます。(選択画面にならずコーディングするファイルが開く時があります)

コーディングするファイルを選ぶ

 

画面右下が↓になっていたらLive Serverを起動している状態になります。

画面右下の赤枠が表示されたらLive Serverが起動しています

 

本当におすすめなので使って欲しいです。

 

cssを書くのがグッと楽になるEmmet

何ができるかというとcssの短縮ができます。

例えば「display:flex;」はMacなら「dfとTab」(windowsはdfとAlt)で表示できます。

コードを数回しか書かないならそのままでもいいですけどずーっとやってるとこの拡張機能のありがたさがよく分かるはずです。

実務でフロントをしてますがコーディングを8時間位ずーっとしていてEmmetがあるのとないので疲れの差が大きく出ます。

この拡張機能はvscodeに最初から入ってます、こんな便利な物が最初から入っていて無料で使えるからヤバイです。

Emmetの使い方

私が使うプロパティは元々のコードから連想できる短縮した形の↓ですが短縮形を入力します。(macの場合で書いています)

display

元々のコード 短縮したコード
display:block;  db+Tab
display:inline-block; dib+Tab
display:inline;  di+Tab
display:flex; df+Tab

 

余白

元々のコード 短縮したコード
padding-top:10px; pt10+Tab(marginも同じ)
padding-bottom:10px; pb10+Tab (marginも同じ)
padding-left:10px; pl10+Tab(marginも同じ)
padding-right:10px; pr10+Tab(marginも同じ)
padding:5px;  p5+Tab(marginも同じ)
padding:10px 5px; p10-5+Tab(marginも同じ)
padding:2px 5px 6px 7px;  p2-5-6-7+Tab(marginも同じ)

 

中央寄せ

元々のコード 短縮したコード
text-align:center; tac+Tab

 

元々のコード 短縮したコード
background-color:#ffffff; bgc#f+Tab
color: #ffffff;
c#f+Tab

 

文字のサイズ

元々のコード 短縮したコード
font-size:10px; fz10+Tab
font-weight:bold; fwb+Tab
width:100px; w100+Tab
width:100%;
w100p+Tab

私はこれだけしか使ってないですがコーディングが圧倒的に楽になりました。

 

これがないと困る、zenkaku

何ができるかですがコーディングしていて半角で書いているつもりが全角でスペースを開ける時があります。

その場合cssが反映されなかったりwordpressのテンプレートだとエラーになります。

でもzenkakuがあれば↓の様に全角でスペースを開けている部分が白色と波線がついて教えてくれます。

閉じタグの<が全角になっている部分に白色と波線が付いています

 

欠点もあり

これの欠点ですが<p><あいうえお</p>などとするとpタグの中の「<」にzenkakuが反応してエラーの波線が付きます。(実際はエラーではないから大丈夫です)

zenkakuがaの前の<をエラーと判断しています

 

こんな感じでエラーではない物も拾いますが私はタグの中の記号のエラー(<のこと)しか見たことがないです。

 

scssを使うのに必須なLive Sass Compiler

何ができるかですがcssをscssで書くことができます

scssはcssを短縮して書くことができる物と思っていいです。

 

Live Sass Compilerの使い方

Live Serverを開いた状態にしてcssフォルダの中に拡張子がscssのファイル(style.scssとか)を作ります。

そして↓の赤枠をクリックします。

そして↓になったらscssが反映されます。

 

scssの欠点

cssが反映されない時があり私が見たことがあるのは2通りです。

ケース1:記述間違い

これが一番多いと思いますがscssが反映されない時はまずエディタ(vscode)を見ましょう。

↓になったら記述間違いのエラーになっていてエラーの部分が記載されているのでそれを修正しましょう。

全て英語ですが今後経験するプログラミングエラーの解決の練習と思いましょう。

青枠の中にエラーと描いてあります

 

 

ケース2:キャッシュが残っていてスーパーリロードでも消えない

スーパーリロードはデベロッパー(開発)ツールの状態で画面のリロードを右クリックでするやつです。

赤枠をクリックするとスーパーリロードです

 

これをすると普通はscssの更新がされるのですが理由が分からないけど更新されない時があります。

そういう時は何でもいいのでどこかのプロパティの値の変更をしましょう、そうすればscssの更新がされます。

初めてこれを経験した時どうすればいいか分からなくてたまたまプロパティの値をたまたま変えて気がつきました。

 

scssの書き方

書き方に関しては↓で説明しています。

実務経験37日目、エディタでおすすめのvscodeとその拡張機能
実務経験37日目、エディタでおすすめのvscodeの拡張機能 「コーディングのスピードをあげたいな〜」と思っていてTwitterを何となくみたらこんなツイートがありました。 h...

 

一度使うと戻れなくなるAuto Rename Tag

何ができるかですがvsocodeで例えば<div>を書いたとします。

通常閉じタグの</div>を付けないといけないのですがそれを自動的にやってくれます

さらにタグの名前を変えたら閉じタグの名前も自動的に変えてくれます。

 

といったところですがYouTubeでもエンジニアがおすすめ拡張機能の紹介をしています。