VSCode拡張機能のメモ

  • URLをコピーしました!

VSCodeに拡張機能を追加しました。

実際に試しながら、追加したり削除して調整していこうと思いますが、メモとして追加したものを書いていこうと思います。

なお、追加するプラグインはUdemyのチュートリアルやQiitaの記事を参考にしています。

目次

言語を問わずに使えるVSCode拡張機能

Japanese Language Pack for Visual Studio Code


VSCodeを日本語化する言語パック。

Live Server


ローカルサーバーを簡単に立ち上げることができる。

Prettier – Code formatter


コードを保存時に自動で整形してくれる。

Path Autocomplete


外部ファイル読み込み時に、パス候補を表示してくれる。

zenkaku


全角のスペースが挿入されたときに白く表示されることで、エラーを防げる。

Code Spell Checker


間違ったスペルがあったときに表示してくれる。

vscode-icons


アイコンが良い感じに表示される。

Auto Close Tag


クローズタグを補完する。

ChatGPT

ChatGPTをVScodeのサイドバーで開けるようにするプラグイン。

Color Highlight

CSSでカラーを指定したときに、その色を表示してくれる。

Github Copilot

AIを使って、コードの予測候補を表示してくれる。

background-cover

VSコードのエディター画面の背景画像を変更できる。

Image preview

画像ファイルをプレビュー表示する。

環境によって追加するVSCode拡張機能

HTML CSS Support


HTMLの入力補完。

CSS Peak


HTMLのクラス名をホバーすると該当部分のCSSコードを表示してくれる。Windowsの場合、crtlを押しながらマウスオーバーで定義の確認ができるとのこと。

Live Sass Compiler


Sassをコンパイルしてくれる。

ES7+ React/Redux/React-Native snippets

Reactの学習中なので取り合えず入れておきました。

VSCodeで設定を変更したその他の機能

ステータスバーの色変更


VScodeの下部に表示されるステータスバーの色を変更しました。

変更方法は、Ctrl+ShiftOpen User Setting(JSON)で下記のコードを追加します。

{
"workbench.colorCustomizations": {
"statusBar.background": "#0000ff", // ステータスバーの背景色
"statusBar.foreground": "#ffffff", // ステータスバーの文字色
}
}
よかったらシェアしてね!
  • URLをコピーしました!
目次