DAY8の課題は「エディタをインストールしよう」になります。
30DAYSトライアルを開始しますが、DAY1〜DAY7(ProgateのHTML＆CSSの学習・道場コースの全てを完了させる）は30DAYSトライアルをやろうと決意する前に個人的にやってたので割愛し、DAY8からやっていきます。
目次
VScode(Visual Studio Code)のインストール
30DAYSトライアルでは開発用のエディタに高機能且つ拡張機能も豊富で人気が高い、MicrosoftのVisual Studio Code(VSCode)をおすすめしているようです。
現に自分もすでにインストール済みで、模写コーディングはVSCodeでやってました。
インストール方法は東京フリーランスのサイトにQita記事へのリンクが貼られているので同じものを貼っておきますが、プログラミング経験者であれば手順見なくてもインストールできると思います。
拡張機能のインストール
以下の拡張機能のインストールがおすすめされています。
Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
開始タグと閉じタグを記述済みのタグを編集する際に編集しているタグに対応したタグ(開始タグを編集する場合は終了タグ、終了タグを編集する場合は開始タグ)も同時に編集してくれる。上記のリンクに編集時のGIF動画が貼られてるのでそれをみるとイメージが分かりやすいです。
「開始タグのみ修正して終了タグの修正を忘れてしまってた」などの凡ミスを減らしてくれる拡張機能。
CSSTree validator
https://marketplace.visualstudio.com/items?itemName=smelukov.vscode-csstree
CSSにのプロパティと値に誤りがないかをリアルタイムにチェックし、誤りがある箇所を強調表示してくれる。また、問題ウインドウに誤りがある箇所の一覧が表示され、をれをクリックすることで誤りがある箇所にジャンプできる。
Visual Studio Code CSS Support for HTML Documents
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
HTMLにclass、id属性を指定する時に、VSCodeのワークスペース内のスタイルシート(Sass含む)の中から候補を表示してくれる。
IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Visual Studio Code CSS Support for HTML Documentsと同じようにHTMLにclass属性を指定する際の補完(入力候補表示)をしてくれる。Visual Studio Code CSS Support for HTML Documentsとの違いはVSCodeのワークスペースだけでなく、link要素のCSSも対象というところ。
class属性の補完だけだとIntelliSense for CSS class names in HTMLのみで事足りるけど、id属性の補完はできないからVisual Studio Code CSS Support for HTML Documentsも入れる感じかな。
Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
VSCodeは英語なので、メニューなどを日本語化してくれます。
HTMLHint
https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint
HTMLの文法に誤りがないかをリアルタイムにチェックし、誤りがある箇所を強調表示してくれる。また、問題ウインドウに誤りがある箇所の一覧が表示され、それをクリックすることで誤りがある箇所にジャンプできる。
zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku
プログラムには大敵である全角スペースを表示する。
zenkakuをインストールしただけでは動作しません。「shift + commqne + P」でコマンドパレットを起動して「Enable Zenkaku」を実行する必要がある（全角スペーズの表示をやめる場合は「Disable Zenkaku」を実行する)。
「Enable Zenkaku」はVSCodeを起動する度に実行しなければならないのでちょっと面倒っていう方は「/Users/ユーザー名/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js」の「enabled」という変数の値をfalseからtrueに変更するとVSCode起動時に「Enable zenkaku」が実行された状態となります。(自分はこの設定にしました)
|
1 2 |
// var enabled = false; // 初期値 var enabled = true; // tureに修正 |
詳しくは以下のサイトで紹介されています。
注意点としては上記のサイトはWindows7での例になっている点と、「/Users/ユーザー名/.vscode」は隠しファイルなのでFinderで隠しファイルを表示するようにしなければいけないというところですね。
Finderで隠しファイルを表示させる方法はMac – Finderで隠しファイル・フォルダを表示する方法で紹介されています。
以上がおすすめされている拡張機能になります。主にに入力の補完や文法チェックなどの入力ミス防止などの機能ですね。特に最後の全角スペースなんかは表示させておこないとパッと見ても分からないので、どこでエラーになっているか分からずに時間が過ぎていくとなりがちなので必須ですね。
Emmetを理解する
EmmetとはHTMLやCSSの入力を補完するプラグインで、VSCodeには標準で搭載されているようです。
個人的に勝手に閉じタグが作成されるとかかなぁと思っていましたが、東京フリーランスのサイトに貼られているリンクの「はじめて」でも簡単！Emmetの使い方とよく使うパターン集を見てみたら驚愕しました。
自分はどんだけ無駄なパンチをしてたんだと。
基本である「要素 + Tabキー」だけでもaタグとかはharf属性(harf=””)が記述されますし、下記の例なんて衝撃以外の何者でもないです。
|
1 |
ul>li*5 /* ここからTabキーを押すと以下のHTMLが生成される */ |
開始タグの「>」を入力したタイミングで閉じタグが作られて「おぉ」って思ってたのが恥ずかしいです。
これからの30DAYSトライアルの課題の中だったり、模写コーディングする時に積極的に使っていって早く自分のものにしたいと思います。
まとめ
- エディタはVSCodeがおすすめ(高機能、軽い、拡張機能で自分好みにカスタマイズできる)
- 拡張機能は入力補完や入力ミスを防止するものを最低限インストールする
- Emmetを使用するとプログラミングのスピードが上がり、入力ミスも少なくなる
- HTMLでのEmmetの基本は「要素 + Tabキー」に演算子(+、*、>)の組み合わせでどうにかなる
- CSSでのEmmetの基本は「プロパティの頭文字 + Tabキー」だけど、慣れが必要と思う
- 最初はEmmetのチートシート片手にプログラミングすると良い
