VSCodeの拡張機能
TCAtom One Dark Theme
VSCodeの前はAtomだったので、シンタックスハイライトは慣れているものが良く使っています。
TCchange-case
ショートカットキーを割り当てて、スネークケース、ケバブケース、キャメルケースなどの記法を簡単に変換してくれます。
記法の設定
"change-case.default": [
"param-case",
"camelCase",
"PascalCase",
"snake_case",
"CONST_CASE"
],
ショートカットキーの割り当て
- shift + command + p を押して「>Preferences: Open Keyboard Shortcuts」で検索
- extension.changeCaseで検索
- 割り当てたいキーを入力（私の場合は、shift + command + U）
TCCode Spell Checker
英語のスペルのTypoがあった時に教えてくれます。
TCColor Highlight
CSSのカラーコードをハイライトしてくれます。
TCError Lens
エラーの内容をホバーや問題タブではなく、インライン表示してくれます
TCESLint
JSの静的解析を行ってくれます。
TCGitLens
誰が書いたコードか、どのIssueかなどを行単位で教えてくれます。
TCJapanese Language Pack for Visual Studio Code
VSCodeを日本語にします。英語が苦手な人にはお勧めです。
TCPrettier
コードフォーマッターです。
TCProject Manager
各プロジェクトのリポジトリを開くのが簡単になります。
TCSort lines
変数や定数などをアルファベット順に並び替えてくれます。
TCStylelint
TCTODO Highlight
コード内のTODOやFIXMEなどをハイライトしてくれます。
TC"todohighlight.keywords": [
{
"text": "NOTE:", // ハイライトさせたい文言
"color": "#ffffff", // 文字色
"backgroundColor": "#00BFFF" // 背景色
}
TCVersion Lens
ライブラリのバージョンが最新かどうかを教えてくれます。package.jsonのdependenciesなどに書かれたライブラリにフォーカスを当てるとバージョン情報が出ます。
TCAuto Rename Tag
HTMLの開始タグを修正したときに、自動的に対になる終了タグを修正してくれます。
TCLive Share
リモートでペアプロする時には必須です。
TCMaterial Icon Theme
拡張子に合わせてアイコンを表示してくれる拡張機能です。
TCDraw.io Integration
VSCode上で「.drawio」の拡張子を持つファイルを作成すると、Draw.ioが使えます。
デフォルトのテーマだと真っ黒で見づらいため、以下の設定を入れておくと良いです。
"hediet.vscode-drawio.theme": "Kennedy",
Clock in status bar
VSCodeの下のバーに時間を表示します
TCzenkaku
全角のスペースを可視化してくれます
TCIndent Rainbow
インデントの深さを一目でわかるようにしてくれます。
TCHighlight Matching Tag
HTMLの開始タグを終了タグをハイライトしれくれます。
デフォルトの設定だと物足りないので、highlightするように設定しています。
"highlight-matching-tag.styles": {
"opening": {
"name": {
"highlight": "yellow",
}
},
},
Code Runner
書いたコードを気軽に実行したい時に使えます。右上の三角のボタンを押下で実行します。
TCGoogleスライドなどにコードを添付したい時に便利なやつ