vscodeの便利な拡張機能を使ったコーディングのやり方

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

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

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

久々に長時間コーディングしてると疲れる。
でもやっぱりキャッチアップ力と実装力すごいわ。俺。#自画自賛#セルフモチベート#リモートワークつらい

— ひさじゅ@RUNTEQ (@hisaju01) September 9, 2019

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

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

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

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

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

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

これがないとコーディングができない拡張機能Live Server

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

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

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

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

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

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

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

Twitterでも↓です。

LiveServerがどんなものかを説明したいのですが、まだレベルが低すぎてよい説明ができません。。詳しくはググってください( ;∀;)

とりあえず、うれしくて小躍りするほど便利だということは伝えさせてください('ω')！

教えてくれた方ありがとうございます！！

— じゅん＠やっぱりプログラミング楽しい (@bouningen_shufu) September 4, 2020

Live Serverの使い方

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

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

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

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

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

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

cssを書くのが楽になるEmmet(旧：Zen Coding)

何ができるかというと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が反応してエラーの波線が付きます。(実際はエラーではないから大丈夫です)

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

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

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

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

Live Sass Compilerの使い方

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

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

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

scssの欠点

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

ケース1:記述間違い

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

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

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

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

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

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

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

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

それか↓の「Watch Sass」を一旦無効にして再び有効にすればcssが反映されます。

scssは親要素と子要素の関係を見やすくする

見慣れたcssだと親要素と子要素の関係が見えにくいです。

また私はよくやっていたのですがセレクタに対するcssを指定したのに下の方でまた同じセレクタに指定していました。

cssの2度付けです。

でもscssで書いてからは親要素と子要素の関係が見えやすいのでどこにcssをつけているかが分かり同じセレクタにcssの2度付けをすることがなくなりました。

子要素にcssを当てる時ですが親要素の中に書くので子要素が増えれば増えるほどコードが減ります。

親要素の直下の子要素やnth-childを使う時は↓になります。

scssを使うときの注意点

親要素に対して子要素はインデントしないとcssが反映されないので注意しましょう、↓とします。

scssにBEMを使うとさらにいい

BEMはクラスの命名規則で↓の略称です。

・Block (親要素に使う)

・Element  (子要素に使う)

・Modifier(親要素と小要素を装飾する時に使う)

BEMを使うとclass名を細かくするので同じclassを二度以上使うことがなくなりcssを重複して画面崩れしたり想定外の表示になるのを防げます。

BEMの使い方

↓で親クラス(Block)に「texture1」を選んで子クラス(Element)に「pタグ」を選んだとします。

子classのpタグにclass名を付ける時は（親classの名前)__(子classの名前)にします。

例えば↓で1つ目のpタグのclass名は「textue1__name」で2つ目のclass名は「

装飾したい(Modifier)時は(classの名前) — (装飾の時に自分で付けるclassの名前)とします。

↓の18行目の「list__image — change」です。

cssを書く時ですがscssを使うとコードの量をもっと減らせます。

親要素に対する子要素を書く時は↓になります。

親要素に対する子要素のMODIFIERを書く時は↓になります。

ネットで見つけて自分で使っているのはこれ位なのですが色んな人のコードを見てもめっちゃ細かく説明されている内容がなかったので恐らく細かすぎる書き方はないと思います。

class名が長くなるのが嫌で我流のルールを加えている人が結構いました。

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

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

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

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

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