tags

[4]
[1]
[1]

Visual Studio Code (vscode) オススメの 拡張

● colonize ( shift + enter )で行末に ; を入れる

https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize

● Jest JavaScript , TypeScript のテスト

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

起動時にテストを自動実行しないようにするには

{
  "jest.autoRun": { "watch": true }
}

● TypeScript Error Translator

TypeScriptエラーを翻訳してくれる
https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator

● Auto Import

TypeScript の import を自動で挿入してくれる
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

● Template String Converter

文字列内に ${hoge} のような変数が表れた際に自動的に `(バッククォート) で文字列を囲うように置換する
https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter

対象ファイルは設定できます

    "template-string-converter.validLanguages": [
        "vue",
        "svelte",
        "typescript",
        "javascript",
        "typescriptreact",
        "javascriptreact"
    ],

● change-case

ケースを変更する
https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

● Search node_modules

node_modules を検索する
https://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules

● vscode-input-sequence

連番の数字入力
https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

● Quokka.js

VSCodeで手軽にJavaScript TypeScript を試す
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

● Git Graph

git の更新やブランチの状態を sourcetree.app のように表示します
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

● Rainbow CSV

CSVをカラムごとに色分けします
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

● CSS Navigation

htmlでクラス名を右クリックして「定義へ移動」や「F12」へ cssや scss の該当クラスへジャンプする。
CSSPeek よりおすすめ。

● HTML CSS Support

HTML を記述している時に CSS のサポートを受けることができます
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

● Auto Close Tag

HTML の閉じタグの入力支援
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● Code Spell Checker

スペルミスを防ぎます
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

● zenkaku

全角文字を薄いグレーで表示する
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

● indent-rainbow

インデント階層を色分け
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

● Path Autocomplete

フォルダ名やファイル名のオートコンプ(入力補完を行う)
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

● eCSStractor for VSCode

cssにHTMLタグを貼り付けると CSS セレクターを生成する
https://marketplace.visualstudio.com/items?itemName=diz.ecsstractor-port

● Auto Close Tag

</ でタグを閉じる

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

● FileUtils

左のエクスプローラーツリーから複製(Duplicate)が行えるようになります。

● Remote Development

SSH で接続してリモートサーバーをローカルサーバーのように編集する 監視するファイル数の上限を設定する設定方法 

sudo vi /etc/sysctl.conf
fs.inotify.max_user_watches=524288

↑ 524288 は 最大値です。 任意の数値を設定してください。

Remote Development を使用するときに Watcher Excludeでファイルを除外してリモート開発を高速化する

設定の「Watcher Exclude」に以下を追加します。

(上から4つ目まではデフォルトで設定されています一番下の ** を追加します)

**/.git/objects/**
**/.git/subtree-cache/**
**/node_modules/**
**/.hg/store/**
**

この設定を追加するとファイルを更新したときに、gitの更新されたファイル一覧に自動的にどっちが表示されなくなります。 (その代わりに更新ボタンをいちど押せば表示されるようになります)

● CodeMetrics

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-codemetrics
コードの複雑度(Cyclomatic complexity)などを表示する

● Auto-Align

https://marketplace.visualstudio.com/items?itemName=bladnman.auto-align
自動で揃える文字を判別して揃えてくれます

揃える文字を追加する

    "autoalign.moveableItems": [
        "=>",
        "=",
        ":",
        "+=",
        "-="
    ],

● Log File Highlighter ログファイルを見やすくする

● Regex Previewer 正規表現を確認する

● Favorites お気に入り機能

● file-icons-mac (macライクなアイコン)

● Auto Rename Tag (htmlタグのリネームを便利にする)

● CSS関連

● IntelliSense for CSS class names in HTML

css入力時に ID, CLASS 名を保管する

● Git関連

・Git Lens

誰がいつ編集したかを表示する

・Git History

ログを見やすく表示

vscode-caniuse
gitflow
Git History
Log File Highlighter

● 全角文字を発見する Hightlight

"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


No.205
10/04 09:20

edit