VSCode で普段使いしている便利なエクステンション達を紹介します。
:emojisense:
https://marketplace.visualstudio.com/items?itemName=bierner.emojisense
絵文字入力に便利なエクステンションです。: で絵文字の検索、Cmd + i で全ての絵文字リストから選択できます。
bookmarks
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
Option + Cmd + K でブックマークを登録・解除します。複数ファイルをまたいで作業する時、コードの場所をメモしておくのに便利です。
Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
カッコをカラフルに表示します。ネストしたそれぞれのカッコが色分けされて見やすくなります。
Browser Preview
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
VSCode のウインドウ内でブラウザのプレビューが見られるようになります。Cmd + Shift + P > Browser Preview: Open Preview またはサイドバーのアイコンクリックでブラウザを開きます。
Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
タイポを青い波線で表示します。
ESLint（要設定）
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
設定ファイル（.eslintrc など）を検出して ESLint のルールに沿わないコードを赤い波線で表示します。formatOnSave を有効にするとファイル保存時に $ eslint --fix してくれるので単純なシンタックスミスを自動修正してくれて便利です。
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[typescript]": {
"editor.formatOnSave": true,
},
HTML formatter（要設定）
https://marketplace.visualstudio.com/items?itemName=NikolaosGeorgiou.html-fmt-vscode
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "NikolaosGeorgiou.html-fmt-vscode"
},
"html-fmt-vscode.indentSize": 2,
"html-fmt-vscode.multilineAttributeThreshold": 2,
"html-fmt-vscode.voidTagsTrailingSlashStyle": "remove",
"html-fmt-vscode.attributeQuoteStyle": "add",
formatOnSave を有効にするとファイル保存時に HTML のタグと属性をきれいに改行してくれます。
indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
インデントがカラフルになってインデントレベルが分かりやすくなります。
javascript console utils
https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils
Cmd + Shift + L で console.log() を一発入力する事ができます。
Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
HTML/CSS などパッと見のファイル識別がしやすくなります。
npm Dependency Links
https://marketplace.visualstudio.com/items?itemName=herrmannplatz.npm-dependency-links
package.json のパッケージ名クリックで npm のページが開くようになります。
Open in GitHub, Bitbucket, Gitlab, VisualStudio.com !
https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github
コード右クリック > Open in GitHub でブラウザが開きます。
Prettier（要設定）
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
formatOnSave を有効にするとファイル保存時にコード整形が実行されます。
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
Project Manager
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
複数プロジェクトを行き来する時に便利です。開いているプロジェクトをワンクリックでかんたんに保存でき、アイコンクリックで一発オープンする事ができます。
Quit Control for vscode
https://marketplace.visualstudio.com/items?itemName=artdiniz.quitcontrol-vscode
うっかり Cmd + Q をタイプした時のワンクッションです。VSCode がサイレントに終了するのを防ぐ事ができます。
Quokka.js
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
手元でちょっとだけコードを書いて結果が見たい時に便利です。
REST Client
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
.http ファイルを作成して URL を書きます。ワンクリックで APIリクエストを実行してレスポンスが確認できます。
Setting Sync（要設定）
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
VSCode の設定、エクステンション、スニペットなどを Gist に保存して複数のデバイスで共有できます。
初回のみ Cmd + Shif + P > Sync: Advanced Options > Open Settings で Gist の ID とアクセストークンを指定します。autoDownload/autoUpload を有効にしておくと設定が自動で保存/読み込みされます。
// settings.json
// Code > Preferences > Settings > ナビゲーションバーの Open Settings
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.gist": "xxxx",
"sync.removeExtensions": true,
"sync.syncExtensions": true,
TODO Highlight
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
TODO: をハイライトするシンプルなエクステンションです。作業中のメモを取っておくのに便利です。
現場からは以上です！