LPのコーディングをする時に効率的にできた方が時間の短縮とストレスが減ります。
実務でずーっとコーディングしている時があるのですがとにかく疲れます。
Twitterでも↓を見ますが納得です。
久々に長時間コーディングしてると疲れる。
でもやっぱりキャッチアップ力と実装力すごいわ。俺。#自画自賛#セルフモチベート#リモートワークつらい— ひさじゅ@RUNTEQ (@hisaju01) September 9, 2019
私はエディタにvscodeを使ってコーディングしていますがお勧めの拡張機能があるのでその解説をします。
コーディングを初めてある程度経ってから色んな拡張機能を知ったのですが「もっと早く知っていればよかった〜」と悔やんでいます。
まだvscodeを使ってなくてこの記事を見ている人はこれを機会にエディタを変えみてはどうでしょうか？
特にコーディングを始めたばかりの人は後になって「もっと早く使っておけばよかった〜」って思うかもしれません。
それでは説明しますが拡張機能を追加する所は全て同じでまず↓の赤枠をクリックします。
↓の赤枠に入れたい拡張機能名を入れれば拡張機能が出てきますのでインストールしてください。
目次
私の中で衝撃的だったLive Server
私はこれを知ってエディタをvscodeに変えました。
何ができるかですがコーディングの時にCSSを変えたら画面をリロード(再読み込み)しないといけないですよね？
それを自動でやってくれます。
LPを作っている時に何度も何度もリロードしないといけないのですがこれがあると相当面倒なのがなくなりました。
リロードストレスフリーです。
「もうLiveServerなしでコーディングしたくないけど」って感じです。
こんな素晴らしい拡張機能を作った人は神様です 笑
Twitterでも↓です。
LiveServerがどんなものかを説明したいのですが、まだレベルが低すぎてよい説明ができません。。詳しくはググってください( ;∀;)
とりあえず、うれしくて小躍りするほど便利だということは伝えさせてください('ω')！
教えてくれた方ありがとうございます！！
— じゅん＠web系学習＆就活がんばる (@bouningen_shufu) September 4, 2020
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の書き方
書き方に関しては↓で説明しています。
一度使うと戻れなくなるAuto Rename Tag
何ができるかですがvsocodeで例えば<div>を書いたとします。
通常閉じタグの</div>を付けないといけないのですがそれを自動的にやってくれます。
さらにタグの名前を変えたら閉じタグの名前も自動的に変えてくれます。
といったところですがYouTubeでもエンジニアがおすすめ拡張機能の紹介をしています。
