(2019年) VSCode の拡張機能と設定まとめ

自分の設定を書き残しておきます。誰かの参考になれば。

Yuji Tsuburaya
Apr 5 · 6 min read

フロントエンドエンジニアの @___35d です。仕事では Web フロントエンド(HTML / CSS / JavaScript)と React Native 、プライベートでは Ruby on Rails を中心に書いています。

僕は普段 VSCode というエディタを使っています。プライベート・仕事のどちらも同じ設定で使っています。しばらく使い倒してきて、だいぶ自分の手に馴染んできたので、拡張機能と設定をブログに書き残しておこう思います。ちょっとでも誰かの参考になれば良いなと思います。


拡張機能

とりあえずインストールしてる拡張機能のスクショをペタペタ貼りました。なにか不便を感じたら、ググるとたいていそれを解決してくれる拡張機能があるので、それを都度入れていくっていう感じで徐々に増えていっています。

さいきん知った拡張機能で便利だなと思ったものを1個だけ紹介します。この Formatting Toggle ってやつがほんとオススメです。

さいきん知った Formatting Toggle おすすめです

基本的にコード整形は Prettier の自動整形に任せているのですが、業務コードだと整形したくない部分も整形されちゃって、無駄な差分が生まれちゃうみたいなことありませんか?フロントエンドの人だと特に。

これを解決してくれるのがこの Formatting Toggle で、コマンドパレットから自動整形の ON/ OFF を切り替えてくれます。めちゃめちゃニッチなんだけどめちゃめちゃ便利で助かってます。もし良かったら使ってみてください。

Toggle formatting

設定

settings.json の話に移ります。エディタ全体の設定と、Rails やReact Native だけで使用するプロジェクト固有のものを分けて設定しています。固有のものはワークスペースの設定として .vscodeのファイルをプロジェクトのリポジトリに保存し Git 管理するようにしています。

プロジェクト固有の設定は「ワークスペースの設定」へ

エディタ全体の設定(ユーザー設定)の方は、2019年4月の時点では以下のようになっています。

{
"window.zoomLevel": 2,
"editor.tabSize": 2,
"editor.wordWrap": "on",
"emmet.triggerExpansionOnTab": true,
"editor.renderIndentGuides": false,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"workbench.colorTheme": "Framer Syntax",
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.showUpdateMessage": false,
"editor.fontFamily": "Source Han Code JP, Menlo, Monaco, 'Courier New', monospace",
"atomKeymap.promptV3Features": true,
"prettier.printWidth": 130,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.sideBar.location": "left",
"git.autofetch": true,
"git.enableSmartCommit": true
}

カラーテーマは👇こんな感じになってるので、デフォルトからちょっといい感じにしたい人は参考にしてみてください。だいぶ気に入ってます。

"workbench.colorTheme": "Framer Syntax",
"workbench.iconTheme": "material-icon-theme",
"material-icon-theme.showUpdateMessage": false,
"editor.fontFamily": "Source Han Code JP, Menlo, Monaco, 'Courier New', monospace",

また、ここに書いた設定とプロジェクトごとの設定はすべて Gist に書き残していて、設定を変えるたびにこちらをアップデートしていく運用にしています。気になる人は見てみてください。


そのうち気が向いたら VSCode のショートカットキーのまとめ記事とかも書こうかなと思います。Twitter でもこんな感じのことを発信しているのでもし良かったらフォローしてください。気になるところありましたらDMください。お気軽にどうぞ〜。

2020年も VSCode 使っていたら来年も書きたいと思います。

___35d

日報

Yuji Tsuburaya

Written by

株式会社ビズリーチのフロントエンドエンジニア。個人開発もやってます。

___35d

___35d

日報

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade