0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

僕の選んだvsコードでシュパパッとメモるための拡張機能

0
Posted at

結論:実現したこと&拡張機能

  • メモに画像を入れたい
    • Paste Image
  • メモを見返すときに楽にしたい
    • 目次が欲しい
      • Auto Markdown TOC
    • 自動でプレビュー開きたい
      • Auto-Open Markdown Preview

こんな感じにできました:
image.png

想定ケース(僕の場合)

  • pythonのコーディングなどでvsコードをよく使っており、その流れで適当なメモもvsコード(.md)で書いてる
  • 画像挿入ができなかったので、キャプチャした画像を残すときはコンフルつかっててめんどくさかった
  • 個人用のメモなので多少汚くてもよく、linterなどの校正は興味ない
  • Markdown All in One的な拡張入れたけど、イマイチ上手くいかないな(このあたりで多少苦労したのでQiitaに残しておこうと思いました)

環境

OS
image.png

Visual Studio Code
image.png

使い方

下記3つの拡張機能をインストール

Paste Image
Auto Markdown TOC
Auto-Open Markdown Preview
like_this:
image.png

他のマークダウン絡みの拡張機能は一旦無効に

(再起動を求められたらやってね)
like_this:
image.png

適当に.mdファイル作る

image.png

.mdファイル開く->自動でプレビュー表示

自動でプレビューが表示されれば、Auto-Open Markdown Previewは役目を果たしています!
like_this:
image.png
(ちなみに手動プレビューはcmd+shift+V)

適当に.mdに中身作る

image.png

目次を挿入

右クリックAuto Markdown TOC: Insert/Update
右クリックメニューにこれが現れるのはAuto Markdown TOC拡張を入れてるからです!
like_this:
image.png

こんな感じで目次が表示されます:
image.png

クリップボードから画像を挿入

macだとcmd+shift+control+4で指定範囲キャプチャできます。
それを貼り付けるにはcmd+option+Vです(これはPaste Image拡張機能の力です!)

こんな感じになります:
image.png

個人用のメモとしては十分じゃないでしょうか!
vscodeと拡張機能を作ってくれた方々に大感謝です!

おわり

0
4
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
0
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?