くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > markdown > VSCodeのMarkdownで日本語をいい感じに整形する

VSCodeのMarkdownで日本語をいい感じに整形する

markdown VSCode

VSCodeでMarkdownを書いていると、
GoogleアカウントがGoogle アカウント
みたいに、空白が入ってフォーマットされてしまう。。

いろいろ見ていると、中国語とかの兼ね合いで対応されるのに時間がかかりそう。

回避策を見つけたので試してみたときの備忘録。

回避策

回避策はこんな感じ。

こんな感じで、今までと同じショートカットキーで、
Markdownをいい感じに整形できるようにする。

グローバルにprettierをインストール

まずはインストール。

$ npm install -g prettier-plugin-md-nocjsp
$ npm install -g prettier

VSCodeのsettings.jsonの変更

次に、VSCodeでグローバルにprettierを使うように、
settings.jsonに項目を追加。

コマンドパレットからopen settings jsonで検索すると出てくる。

f:id:wannabe-jellyfish:20210708175515p:plain

// ~/Library/Application Support/Code/User/settings.json
{
  // グローバルのprettierを利用するように変更
  "prettier.resolveGlobalModules": true
}

VSCodeのタスクを追加

次に、VSCodeのタスクを追加。
tasks.jsonを作成して、実行するコマンドなどを設定すればOK。

コマンドパレットからtasks userで検索すると出てくる。

f:id:wannabe-jellyfish:20210708175537p:plain

// ~/Library/Application Support/Code/User/tasks.json
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "formatMarkdown", // タスクの名前
      "type": "shell", // shellで実行
      "command": "prettier", // 実行するコマンド
      "args": [ // 実行時の引数
        "-w", 
        "${relativeFile}" // 開いているファイルのパス
      ],
      "presentation": { // 出力の設定
        "reveal": "silent", // 表示条件: silentはエラーがあるときのみ
        "panel": "dedicated" // どのターミナルに表示するかの設定
      }
    }
  ]
}

tasks.jsonのドキュメントはここ。
・Tasks in Visual Studio Code

タスクの実行は、Tasks: Run Taskでできる。

f:id:wannabe-jellyfish:20210708175550p:plain

f:id:wannabe-jellyfish:20210708175616p:plain

VSCodeのショートカットにタスクを割り当てる

最後に作ったタスクにショートカットを割り当てる。
markdownのみ＆表示中のファイルのみを条件にする。

コマンドパレットからopen shortcuts jsonで検索すると出てくる。

f:id:wannabe-jellyfish:20210708175632p:plain

// ~/Library/Application Support/Code/User/keybindings.json
[
  {
    "key": "ctrl+shift+f",
    "command": "workbench.action.tasks.runTask",
    "args": "formatMarkdown", // タスク名を指定
    // 実行条件。言語がMarkdownで、エディタフォーカス時、かつ、読み取り専用じゃないとき
    "when": "editorLangId == markdown && editorTextFocus && !editorReadonly"
  }
]

keybinding.jsonのドキュメントはここ。
・Visual Studio Code Key Bindings

以上!!

参考にしたサイト様