こんにちは！あくあ（@aqua_life_0227）です！
実は先日不具合があって、VSCodeをアンインストール、再インストールしました。
VSCodeの初期設定の手順を自身の設定備忘録としてまとめてみました。
VSCode(Visual Studio Code)とは
Microsoftが無償で提供している開発者向けのエディターです。
他のエディターに比べて、
ソフト自体が軽いこと
拡張機能がとても充実していること
高度な使い方も設定次第で可能なこと
などの利点があり、エディターソフトでは最も人気を誇っている開発者向けのソフトとなっています。※WebDesigning2月号より
VSCodeを完全削除するには？
そもそも今回の発端は、エラーを吐いていて、ソフトが思ったように動作しなかったため１から設定をしようと思い、アンインストールしたことにあります。
再度インストールしたら、なんと以前DLした拡張がそのままそっくり最初から入っていました！
どうやらただアンインストール、インストールをするだけでは、設定の情報やプラグインは Mac 内に残るため、初期化して再設定ができないようです。
そこで色々調べて参考にしたサイトがこちら。
Macユーザー向け
Windowsユーザー向け
私の場合はMacユーザー向けのリンク先の通りにやったら、無事完全アンインストールすることができました！
VSCodeをダウンロード、インストール、初期設定について
ダウンロード、インストールの手順(Mac)
VSCodeは以下のサイトからダウンロードすることができます！
公式ダウンロードサイト
特に複雑なことは何もなく、右上のダウンロードボタンをクリックするとダウンロードページに飛ぶことができます。
その後、ご自身が使っているOS（WindowsまたはMac）のボタンを選択し、ダウンロードしてください。
必須プラグイン(拡張機能)をインストールしよう！
VSCodeはプラグイン(拡張機能)を入れなければ、普通のテキストエディターです。
真価を発揮するためにも、自信が必要だと思ったプラグイン(拡張機能)をぜひインストールしましょう。
以下は私がインストールしたプラグイン(拡張機能)をまとめてあります。自分のメモ目的が第一なので、不足情報があったらすみません…！
【必須】Japanese Language Pack
以下、導入手順です。
VSCodeは初期のままだとメニューバーが英語表示
Japanese Language Packを検索、インストール
インストール後、再起動
メニューバーが日本語になっているのを確認できたら準備完了
英語がすごく得意！という方以外のほとんどの日本人にとっては必須プラグインですので、一番最初に入れておくといいと思います。
その他導入したプラグイン
私が導入したプラグイン一覧です。
説明が間違ってる可能性もありますので、公式ページを確認して必要だと思ったものがあればインストールしてみてくださいね。
- Live Server
-
自分でコードを書いて動作確認する際は、その都度その都度更新ボタンを押さなければいけません。ですが、こちらのプラグインを導入すると、簡易ローカルサーバーを起動し、自動的にHTMLやCSSのコードの変更を検知し、ライブビューとして表示されているブラウザに反映してくれるためとても便利です。
- Autoprefixer
-
CSSはブラウザによって使えるもの使えないものがあるそうです。※ベンダープレフィックスをつけることによってどのブラウザでも動くようになります。このプラグインを導入すると必要の有無を自動で判断し、必要であれば構文に追加してくれるようになります。
※ベンダープレフィックスとは
ベンダープレフィックスとは、新しいCSSプロパティなど使用が確定するまでの途中段階で試験的に使用する際などにプロパティの前に接頭辞としてつけるもののことだそうです。
- -webkit-
-
Google Chrome、Safari、Microsoft Edge、Operaなど
- -moz-
-
Firefoxなど
MDN Web Docsなどでブラウザ対応状況を確認できるそうですが、いまいち見方がわからず…。後日調べて記事化したいと思います。
- Code Spell Checker
-
コード内のスペルミスを波線で教えてくれます。英語苦手で割とあるあるなので、とても助かっています。
- Auto Rename Tag
-
開始タグを修正した時、ペアになっている終了タグも自動で修正してくれます。
- CSSTree validator
-
CSSの構文をチェックしてくれるプラグイン。エラーを教えてくれるのは初学者には助かりますね。
- HTML CSS Support
-
HTML上で作成したクラス名やID名を入力する時に、CSSファイルから参照して候補を表示してくれるプラグインです。打ち間違い防止にもなるため必須アイテムです。
- HTMLHint
-
HTMLの構文でエラーがある箇所を教えてくれます。
- Prettier – Code formatter
-
コードを整形してくれます。なお初期設定のままだと変なところで改行されてしまう使用っぽいです。(2023/01/17時点)なので、気になる方は改行するまでの文字数の設定を変更する必要がありそうです。ちなみに私は100文字に変更して使ってます。以下のリンクを参考に設定しました。
QiitaVSCodeのPrettierの改行される文字数の変更の仕方 – Qiita VisualStadio CodeにPrettierの拡張機能を入れて開発しているのですが、あまりにもタグが改行されまくって、イラっとさせられてしまいましたので、ちょっと調査しまして備… - Color Highlight
-
[#333]などカラー指定した場合、どんな色を設定したか視覚的にわかりやすいように表示します。
- zenkaku
-
コード内の全角スペースがある場合、赤くマーキングして教えてくれます。
- Trailing Spaces
-
文末の半角スペースがある場合、赤くマーキングして教えてくれます。
- Andromeda
-
完全に個人的な好みですが、エディターの配色テーマのプラグインです。コンセプトは「宇宙テイストのダークテーマ」だそう。見やすい。
- CSS Peek
-
HTMLファイルからそれぞれの CSS ID とクラス文字列のCSS への定義を覗くことができます。
- Highlight Matching Tag
-
一致するタグをハイライトしてくれます。
- Image preview
-
コード内に参照した画像を、hoverした際に表示してくれます。何を挿入したか確認する際に便利。
- indent-rainbow
-
インデントをレインボーで階層分けしてくれます。見やすさ重視の方は導入してみるのもいいかもしれません。
- Material Icon Theme
-
HTML、CSS、JavaScript、Sassなどそれぞれの拡張子のマテリアルアイコンを導入します。こちらも見やすさ重視の方は導入してみてもいいかもしれません。
- Path Intellisense
-
ファイルパス名を予測し、候補を出してくれます。打ち間違い防止にどうぞ。
VSCordの使い方は検索でも十分出てきますが、初心者の方は書籍ですぐ調べられるようにしておくのもおすすめです。
その他初期設定について
Emmetを編集する
Emmetとは
Emmetとは、HTML、CSS等の超強力な入力補完プラグインです。
基本的な使い方は、こちらのブログがわかりやすくまとめてあるのでぜひ読んでみてくださいね。
初期のままでも十分使えますが、自分好みの雛形を追加したいため、Emmetを追加編集します。
参考にしたサイトはこちら。
私が追加したコードは以下の通り。
"html5": {
"prefix": "!",
"body": "<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <meta name=\"format-detection\" content=\"telephone=no\" />\n <link rel=\"icon\" href=\"favicon.ico\" />\n <link rel=\"icon\" href=\"favicon.svg\" type=\"image/svg+xml\">\n <title>${1:Document}</title>\n <meta name=\"description\" content=\"Document\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/ress/dist/ress.min.css\">\n <link rel=\"stylesheet\" type=\"text/css\" href=\"./css/style.css\">\n</head>\n<body>\n $0\n</body>\n</html>"
}こちらを展開すると以下の通りになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no" />
<link rel="icon" href="favicon.ico" />
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<title>Document</title>
<meta name="description" content="Document">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
</body>
</html>大体のお決まり文句の雛形が挿入されました。
まだまだ学習中のため、これからどんどん使いやすく拡張機能などを追加編集していくかと思います。皆さんもよく使う雛形を登録してみてくださいね。