VSCodeの拡張機能

Atom One Dark Theme
VSCodeの前はAtomだったので、シンタックスハイライトは慣れているものが良く使っています。

change-case
ショートカットキーを割り当てて、スネークケース、ケバブケース、キャメルケースなどの記法を簡単に変換してくれます。

記法の設定

settings.json

  "change-case.default": [
    "param-case",
    "camelCase",
    "PascalCase",
    "snake_case",
    "CONST_CASE"
  ],

ショートカットキーの割り当て

shift + command + p を押して「>Preferences: Open Keyboard Shortcuts」で検索
extension.changeCaseで検索
割り当てたいキーを入力（私の場合は、shift + command + U）

TC

Code Spell Checker
英語のスペルのTypoがあった時に教えてくれます。

TC

Color Highlight
CSSのカラーコードをハイライトしてくれます。

TC

Error Lens
エラーの内容をホバーや問題タブではなく、インライン表示してくれます

TC

ESLint
JSの静的解析を行ってくれます。

TC

GitLens
誰が書いたコードか、どのIssueかなどを行単位で教えてくれます。

TC

Japanese Language Pack for Visual Studio Code
VSCodeを日本語にします。英語が苦手な人にはお勧めです。

TC

Prettier
コードフォーマッターです。

TC

Project Manager
各プロジェクトのリポジトリを開くのが簡単になります。

TC

Sort lines
変数や定数などをアルファベット順に並び替えてくれます。

TC

Stylelint

TC

TODO Highlight
コード内のTODOやFIXMEなどをハイライトしてくれます。

TC

"todohighlight.keywords": [
{
"text": "NOTE:", // ハイライトさせたい文言
"color": "#ffffff", // 文字色
"backgroundColor": "#00BFFF" // 背景色
}

TC

Version Lens
ライブラリのバージョンが最新かどうかを教えてくれます。package.jsonのdependenciesなどに書かれたライブラリにフォーカスを当てるとバージョン情報が出ます。

TC

Auto Rename Tag
HTMLの開始タグを修正したときに、自動的に対になる終了タグを修正してくれます。

TC

Live Share
リモートでペアプロする時には必須です。

TC

Material Icon Theme
拡張子に合わせてアイコンを表示してくれる拡張機能です。

TC

Draw.io Integration
VSCode上で「.drawio」の拡張子を持つファイルを作成すると、Draw.ioが使えます。

hoge.drawio

デフォルトのテーマだと真っ黒で見づらいため、以下の設定を入れておくと良いです。

~/Library/Application Support/Code/User/settings.json

"hediet.vscode-drawio.theme": "Kennedy",

TC

Clock in status bar
VSCodeの下のバーに時間を表示します

TC

zenkaku
全角のスペースを可視化してくれます

TC

Indent Rainbow
インデントの深さを一目でわかるようにしてくれます。

TC

Highlight Matching Tag
HTMLの開始タグを終了タグをハイライトしれくれます。

デフォルトの設定だと物足りないので、highlightするように設定しています。

~/Library/Application Support/Code/User/settings.json

  "highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "highlight": "yellow",
      }
    },
  },

TC

Code Runner
書いたコードを気軽に実行したい時に使えます。右上の三角のボタンを押下で実行します。

TC

Googleスライドなどにコードを添付したい時に便利なやつ