LoginSignup
5
3

More than 3 years have passed since last update.

@kaeken1jp(嘉永島 健司)

VSCode逆引きメモ

Last updated at Posted at 2020-10-17

背景

  • VSCode について「XXしたい」という逆引きで作ってみました

  • VSCode 概要説明は省略しています

  • 機能が膨大にあるので、個人的な独断と偏見でランダムにトピックを逆引き形式で選んでみました(適宜追加)

逆引き

ランダムな値を取得したい

  • vscode-random - Visual Studio Marketplace を入れます
  • 上記のように、ランダムな数字・名前・IPアドレスなど取得できます
  • 以下のように、他にもさまざまな種類の値を取得できます

複数のファイルの差分を知りたい(Git未登録)

  • まず、比較したいファイルを COMMAND キーを押しながら２つ選択状態にします。

  • つぎに、右クリックして、Compare Selected を選択します。

  • 比較された画面が表示されて、差分が表示されます。

マルチカーソル機能で、同時に複数箇所を選択したい

  • 以下のように OPTION キー押しながら、複数箇所を選択できます

  • 以下のように OPTION + SHIFT キー押しながら、複数箇所をドラッグすれば、同じ位置に選択＆操作ができます

  • 各行先頭に加えたい文字列を一括で追加できます

連番を入力したい

  • 次に CMD + SHIFT + P でコマンドパレットを開いて"Insert Numbers"を選択すると、自動的に連番が挿入されます

Markdown プレビューを見ながら書きたい

  • Markdown ファイル .md を開く

  • 画面右上アイコンをクリック

  • 以下のように VSCode 上でプレビューを見ながら書けます

  • アウトラインも左サイドバーで確認できます

インデントをカラフルに色分けして見やすくしたい

カッコの対応関係をカラフルに色分けして見やすくしたい

カッコ閉じに対応するカッコヘッダを表示したい

Emmet を使って HTML や CSS を高速に記述したい

  • HTML ファイルを準備します。
  • 特定の記法で HTML や CSS を高速入力できる Emmet が使えます
  • 例えば、! + TAB で以下のように HTML を書けます

制作物をリアルタイムプレビューで確認したい

  • Extension Live Server を入れます

  • VScode を起動させ、ファイルではなく、上位のフォルダを開く

  • VScode の右下に GoLive マーク が表示される

  • GoLive をクリックするとリアルタイムプレビュー開始します

  • ファイル変更して保存すると、リアルタイムにプレビューに反映されます

JavaScript スニペットを使いたい

スペルミスを検知したい

  • Quick Fix を選べば、近しい単語候補が出てくる(どれが正しい単語なのかは GG る必要あり)

GitHub リポジトリツリーを見やすくしたい

ファイルやフォルダを種類ごとにアイコンを変えたい

BigQuery SQL ハイライト / スニペットを活用したい

CSVやExcelをVSCodeで見たい

  • after(並び替えや絞り込みもできます)

行末の余計な空白を検知したい

Jupyter Notebookをプレビューしたい

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3