Open25
【随時更新】使ってるVSCodeの拡張機能のまとめ
ピン留めされたアイテム
僕がVSCodeに入れてる拡張機能をまとめておきます。フロントエンド周りのものが多めです。
- 随時更新します。
- おすすめの拡張機能があれば、お気軽にコメントをどうぞ。
- 「それ不要だよ」みたいなものがあればご指摘ください。
Bracket Pair Colorizer 2 → 標準搭載になったので不要
- 開き括弧(
{
)に対応する閉じ括弧(}
)に色をつけて見やすくしてくれる - 「2」はパフォーマンスと正確性が向上しているとのこと
この機能は本体に標準搭載になったので不要そうですね
以下の設定を追加すれば括弧記号色付け機能が使えるようになります!
{
"editor.guides.bracketPairs": true,
"editor.bracketPairColorization.enabled": true
}
おー、情報ありがとうございます!!!!
Debugger for Chrome
- JSのデバッグのため
- 使い方はVisual Studio CodeでのJSのデバッグ方法がわかりやすい
DotENV
- DotENVファイルにシンタックスハイライトが効いて見やすくなる
Material Icon Theme
- ディレクトリやファイルの前に表示されるアイコンがカラフルに見やすくなる
- 気分が高まるので必須
Prettier
- 説明不要のフォーマッターのVSCode拡張
- これがないとCSSとかJSとか書くのしんどい
ESLint
- JSを書くので
TODO Highlight
-
TODO:
やFIXME:
から始まるコメント部分を見やすくしてくれる
YAML
- yamlファイルを書くのが楽になる
zenkaku
- 全角スペースを目立たせてくれるので、うっかり全角スペースを入れてしまったときにすぐに気づける
Remove backspace control character
- 日本語を書いていると、バックスペース文字が入ってしまう(デフォルトの設定では見えない)ことがあるが、これを保存時に削除してくれる。
- もしくはVSCodeの
settings.json
にeditor.renderControlCharacters: true
と書いておくと、バックスペース文字が見えるようになるので、見落としを防げる
Path Intellisense
- ファイルやディレクトリのパスを書くときにオートコンプリートが効くようになりはかどる
Quit Control for VSCode
-
⌘
+Q
をうっかり押してVSCodeが閉じてしまうのを防げる(確認のウィンドウが表示されるようになる) - Macの設定でもできるだろうけど楽なので
Guides
- インデントが分かりやすいようにガイドライン(うっすらと表示される縦線)をたくさん表示してくれる
Import Cost
- npmパッケージをimportするときにサイズを教えてくれる
- Dockerで作った開発環境で開発するときに使ってる。vscodeのインテリセンス等の機能を有効に出来る。
恥ずかしながら今Remote Containersというものを知ったのですがすごく良さそうですね。
教えていただき、ありがとうございます。
- SSH越しにvscodeで編集出来る。Raspberry Piのコードを変更するときに使ってる。
Git Graph
- gitの履歴を綺麗なグラフとして表示してくれます( 差分ファイルの表示も出来ます )
- gitの履歴が見やすくなるので、おすすめです。
以下のオプションを有効にすればコミット時の電子署名もチェックしてくれるのですね。
settings.json
{
"git-graph.repository.commits.showSignatureStatus": true
}
署名のチェックまでしてくれるツールは少ないので地味に有り難いです!
そんな便利なオプションがあったんですね!恥ずかしながら知りませんでした!
教えてくれてありがとうございます🙏
今度使ってみます💪
Live Share
- 自分の編集画面を他の人に共有したり、一緒にファイルの編集をすることができます
- リモートでペア・モブプログラミングや勉強会などをする時にオススメです
ありがとうございます!こちら知りませんでした。今度使ってみます!
ログインするとコメントできます