VS Codeと言われていることも多いですね。インストールはコチラ→https://code.visualstudio.com/
色々ご紹介されているようですが、自分用にメモφ(..)しておきます。
※まだ途中ですので、動画を観て理解してからまた入力します
※✔は自身のVS codeにインストールしたもの
※●初心者が入れておいた方が良いもの
プラグイン | 機能 | メモ |
---|---|---|
●✔Auto Rename Tag | 頭のタグを入れると、自動的に終了タグが入力される | 終了タグの入力漏れを防ぐ |
background-cover | VS codeの背景を変更できる | オシャレにしたい人にはおすすめですが、必須項目ではない |
Bookmarks | 特定の行をブックマークできる | サイドバーに表示されると、複数のファイルを横断する手間が省ける |
Bracket Pair Colorizer2 | どこの階層なのか色分けをしてくれるため、ひと目で分かります | ※この拡張機能は終了しているため、VS code内で設定する必要がある(動画説明あり) |
●✔Code Spell Checker | 英単語のスペルチェックをしてくれる | 英語が苦手な人はスペルミスが分かるので、入れておいた方が良い |
CSSTree validator | W3Cに基づいたCSSの構文チェックをしてくれ、間違った箇所に波線がでます | W3Cと違って設定の必要がない |
●✔CSS Peak | CSSのclass名の中身を見たい時、クリックをすると表示される | 中身が表示された時、その中身を修正する事ができる |
●✔DartJS Sass Compiler and Sass Watcher | ||
●✔Evilinspector | 全角スペースがある箇所を表示してくれる | 初心者のうちは入れておいた方が良い |
●✔Format HTML in PHP | PHPファイル中のHTMLが綺麗に整形される | WordPressの固定ページでインデントを手動で揃える必要がなくなる |
✔GitLens | Git使用者必須 いつ誰がコミット(関わったのか)したのか履歴を辿る事ができるため、チーム開発時は必要 | 他人がどのような目的で追加されたのかなど、この拡張機能を入れていれば分かります |
●✔Highlight Matching Tag | タグの相方(終了タグ)をハイライトで表示される | <div>など同じものがたくさんある場合、相方の終了タグを探すのにはとても便利 |
●✔HTML CSS Support | class名やid名などを自動で保管し、変換候補に出てくるようになる | 1から入力する必要がなくなるため時短になる |
●✔htmltagwrap | 選択した箇所をタグで囲ってくれる、文章内の特定の箇所だけspanタグを囲いたいなど | スクロールしないといけない程のものになった時や、Auto Rename Tagと併用して利用すると便利 |
●✔indent-rainbow | インデント(字下げ)がカラー別で表示される | ひと目で分かるのでおすすめ |
IntelliSense for CSS class names in HTML | 元々作成しているCSSを自動保管してくれる | HTML CSS Supportとほぼ同じ機能で、HTML CSS Supportの方がよくおすすめされている |
●✔Japanese Language Pack for Visual Studio Code | 文字を日本語化してくれる | 英語が苦手な人におすすめ |
●✔Live Preview | chromeを開かず、VS code内でchrome画面が見られる | chrome画面に切り替える必要がなく、VS codeの画面内で左右に表示されるので便利 |
●✔Live Sass Compiler | 下に表示されているWatch Sassを押すと、Sassが自動でCSSにコンパイルされる | 「コンパイル」とは、ソースコードを解析し、コンピュータが直接実行可能に変換する事 |
●✔Live Server | HTMLやCSSなどを変更しても自動でブラウザが更新される ※Go LiveをONにする必要がある | リロードする必要がなくなる |
●✔Material Icon Theme | ファイルのアイコンが絵柄になる | 可愛くしたい場合におすすめ |
Material Theme | 右側に表示された好きなテーマに変更できる | 黒の画面がお好みでない方にはおすすめ |
●✔Path Intellisense | ファイルパスを自動で保管してくれ、フォルダやディレクトリなどを見つけてくれる | ディレクトリやファイルなどを探す手間と、手入力をする手間が省けます |
●✔PHP Intelephense | PHPのコード定義をみたり、保管、コードチェック、整形をしてくれる | Prettier – Code formatterでは、PHPのコード整形はしてくれないため、入れておく 拡張機能内でWordPressの設定が必要 |
●✔Prettier – Code formatter | 余分に入っている改行・空白などを無くし、綺麗に整列してくれる | 有効だけでなく、別の設定が必要になるため、説明しているサイトや動画を参考にする必要がある |
WordPress Snippets | WordPressの関数の入力保管をしてくれる | WordPressを使用するならば、長いコードの入力は面倒なため、入れた方が良い |
zenkaku | エラーの元になる全角スペースになっているものを表示してくれる | Evilinspectorがあれば必要ない |
W3C Validation | HTML・CSSの記述をチェックし、間違っている箇所に波線を引いて教えてくれる | 他に設定があり、初心者だと大変(人によって全然違うため) |
上記の表は、初心者用に入れておくと良いとご紹介があったものですが、スキルアップが出来たら自分に合ったプラグインを追加してく事はあるかと思います。
【参考動画】
【参考サイト】
https://simelog.com/html-css-self-study
【あとで確認】
https://zenn.dev/toono_f/articles/38fd6ce1cf82e5
https://lunaris-code.com/web/785/
上記以外の動画などを拝見すると、必ず紹介されているものもあれば、そうではないものがあり、初心者にとって一体どの拡張機能を入れれば良いのか分からなくなってしまい、かなり混乱しました。
なので、時間がある時に、これとこれはよく似ている機能だからどちらかを選択すれば良いとかそういったものをまとめたいと思います。最初からそのような書き方をされる方がいらっしゃらないのですよね・・・VS codeに限らずですが。。。