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+Shift → Open User Setting(JSON)で下記のコードを追加します。
{
"workbench.colorCustomizations": {
"statusBar.background": "#0000ff", // ステータスバーの背景色
"statusBar.foreground": "#ffffff", // ステータスバーの文字色
}
}
