https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
起動時にテストを自動実行しないようにするには
{
"jest.autoRun": { "watch": true }
}
TypeScriptエラーを翻訳してくれる
https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
TypeScript の import を自動で挿入してくれる
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
文字列内に ${hoge} のような変数が表れた際に自動的に `(バッククォート) で文字列を囲うように置換する
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter
対象ファイルは設定できます
"template-string-converter.validLanguages": [
"vue",
"svelte",
"typescript",
"javascript",
"typescriptreact",
"javascriptreact"
],
ケースを変更する
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
node_modules を検索する
https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules
連番の数字入力
https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence
VSCodeで手軽にJavaScript TypeScript を試す
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
git の更新やブランチの状態を sourcetree.app のように表示します
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
CSVをカラムごとに色分けします
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv
htmlでクラス名を右クリックして「定義へ移動」や「F12」へ cssや scss の該当クラスへジャンプする。
CSSPeek よりおすすめ。
HTML を記述している時に CSS のサポートを受けることができます
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
HTML の閉じタグの入力支援
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
スペルミスを防ぎます
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
全角文字を薄いグレーで表示する
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku
インデント階層を色分け
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
フォルダ名やファイル名のオートコンプ(入力補完を行う)
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
cssにHTMLタグを貼り付けると CSS セレクターを生成する
https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port
</ でタグを閉じる
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
左のエクスプローラーツリーから複製(Duplicate)が行えるようになります。
SSH で接続してリモートサーバーをローカルサーバーのように編集する 監視するファイル数の上限を設定する設定方法
sudo vi /etc/sysctl.conf
fs.inotify.max_user_watches=524288
↑ 524288 は 最大値です。 任意の数値を設定してください。
設定の「Watcher Exclude」に以下を追加します。
(上から4つ目まではデフォルトで設定されています一番下の ** を追加します)
**/.git/objects/**
**/.git/subtree-cache/**
**/node_modules/**
**/.hg/store/**
**
この設定を追加するとファイルを更新したときに、gitの更新されたファイル一覧に自動的にどっちが表示されなくなります。 (その代わりに更新ボタンをいちど押せば表示されるようになります)
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
コードの複雑度(Cyclomatic complexity)などを表示する
https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align
自動で揃える文字を判別して揃えてくれます
揃える文字を追加する
"autoalign.moveableItems": [
"=>",
"=",
":",
"+=",
"-="
],
css入力時に ID, CLASS 名を保管する
誰がいつ編集したかを表示する
ログを見やすく表示
vscode-caniuse
gitflow
Git History
Log File Highlighter
"highlight.regexes": {
"( )": [
{
"backgroundColor": "#d9ad00"
}
],
"([1234567890])": [
{
"backgroundColor": "#d90000",
"color": "#1f1f1f"
}
]
}
引用 : https://qiita.com/yukishiba/items/ab1d3535f2490cb99d38
参考 : https://dev.to/gsdev/10-vscode-extensions-i-can-t-live-without-1i5c