Memo

Visual Studio Code プラグイン

VS Codeと言われていることも多いですね。インストールはコチラ→https://code.visualstudio.com/

色々ご紹介されているようですが、自分用にメモφ(..)しておきます。

※まだ途中ですので、動画を観て理解してからまた入力します

※✔は自身のVS codeにインストールしたもの

※●初心者が入れておいた方が良いもの

プラグイン機能メモ
●✔Auto Rename Tag頭のタグを入れると、自動的に終了タグが入力される終了タグの入力漏れを防ぐ
background-coverVS codeの背景を変更できるオシャレにしたい人にはおすすめですが、必須項目ではない
Bookmarks特定の行をブックマークできるサイドバーに表示されると、複数のファイルを横断する手間が省ける
Bracket Pair Colorizer2どこの階層なのか色分けをしてくれるため、ひと目で分かります※この拡張機能は終了しているため、VS code内で設定する必要がある(動画説明あり)
●✔Code Spell Checker英単語のスペルチェックをしてくれる英語が苦手な人はスペルミスが分かるので、入れておいた方が良い
CSSTree validatorW3Cに基づいたCSSの構文チェックをしてくれ、間違った箇所に波線がでますW3Cと違って設定の必要がない
●✔CSS PeakCSSのclass名の中身を見たい時、クリックをすると表示される中身が表示された時、その中身を修正する事ができる
●✔DartJS Sass Compiler and Sass Watcher
●✔Evilinspector全角スペースがある箇所を表示してくれる初心者のうちは入れておいた方が良い
●✔Format HTML in PHPPHPファイル中のHTMLが綺麗に整形されるWordPressの固定ページでインデントを手動で揃える必要がなくなる
✔GitLensGit使用者必須
いつ誰がコミット(関わったのか)したのか履歴を辿る事ができるため、チーム開発時は必要
他人がどのような目的で追加されたのかなど、この拡張機能を入れていれば分かります
●✔Highlight Matching Tagタグの相方(終了タグ)をハイライトで表示される<div>など同じものがたくさんある場合、相方の終了タグを探すのにはとても便利
●✔HTML CSS Supportclass名や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 Previewchromeを開かず、VS code内でchrome画面が見られるchrome画面に切り替える必要がなく、VS codeの画面内で左右に表示されるので便利
●✔Live Sass Compiler下に表示されているWatch Sassを押すと、Sassが自動でCSSにコンパイルされる「コンパイル」とは、ソースコードを解析し、コンピュータが直接実行可能に変換する事
●✔Live ServerHTMLやCSSなどを変更しても自動でブラウザが更新される
※Go LiveをONにする必要がある
リロードする必要がなくなる
●✔Material Icon Themeファイルのアイコンが絵柄になる可愛くしたい場合におすすめ
Material Theme右側に表示された好きなテーマに変更できる黒の画面がお好みでない方にはおすすめ
●✔Path Intellisenseファイルパスを自動で保管してくれ、フォルダやディレクトリなどを見つけてくれるディレクトリやファイルなどを探す手間と、手入力をする手間が省けます
●✔PHP IntelephensePHPのコード定義をみたり、保管、コードチェック、整形をしてくれるPrettier – Code formatterでは、PHPのコード整形はしてくれないため、入れておく
拡張機能内でWordPressの設定が必要
●✔Prettier – Code formatter余分に入っている改行・空白などを無くし、綺麗に整列してくれる有効だけでなく、別の設定が必要になるため、説明しているサイトや動画を参考にする必要がある
WordPress SnippetsWordPressの関数の入力保管をしてくれるWordPressを使用するならば、長いコードの入力は面倒なため、入れた方が良い
zenkakuエラーの元になる全角スペースになっているものを表示してくれるEvilinspectorがあれば必要ない
W3C ValidationHTML・CSSの記述をチェックし、間違っている箇所に波線を引いて教えてくれる他に設定があり、初心者だと大変(人によって全然違うため)

上記の表は、初心者用に入れておくと良いとご紹介があったものですが、スキルアップが出来たら自分に合ったプラグインを追加してく事はあるかと思います。


【参考動画】

【参考サイト】

https://simelog.com/html-css-self-study

【あとで確認】

https://zenn.dev/toono_f/articles/38fd6ce1cf82e5

https://lunaris-code.com/web/785/

上記以外の動画などを拝見すると、必ず紹介されているものもあれば、そうではないものがあり、初心者にとって一体どの拡張機能を入れれば良いのか分からなくなってしまい、かなり混乱しました。

なので、時間がある時に、これとこれはよく似ている機能だからどちらかを選択すれば良いとかそういったものをまとめたいと思います。最初からそのような書き方をされる方がいらっしゃらないのですよね・・・VS codeに限らずですが。。。

-Memo
-,