Hugo用のVSCode tasks.jsonを作成した
目次
このサイトをVSCodeで執筆するにあたり、記事の作成をやりやすくした。
問題点
- デモサーバーの起動をする必要がある
- 記事のMarkdownファイルを作成するのが面倒くさい
解決方法
デモサーバーを自動で起動する
暫定的にhugo server --baseURL=http://127.0.0.1/ --buildDrafts --disableFastRender --cleanDestinationDir --watchで起動することにする。オプションは適宜変更する。VSCodeのポートフォワーディングのペインやトーストではhttp://localhost:1313/ではなくhttp://127.0.0.1:1313/が開かれるようなので、それに合わせてbaseURL=http://127.0.0.1/とする。
ここでのポイントはpresentation.reveal = "silent"によってターミナルペインを開かないことと、runOptions.runOn = "folderOpen"によってVSCodeでこのフォルダーを開いた時にタスクを自動実行すること。
1{
2 "tasks": [
3 {
4 "label": "Hugo Server",
5 "type": "shell",
6 "command": "hugo server --baseURL=http://127.0.0.1/ --buildDrafts --disableFastRender --cleanDestinationDir --watch",
7 "group": {
8 "kind": "test",
9 "isDefault": true
10 },
11 "presentation": {
12 "echo": true,
13 "reveal": "silent",
14 "focus": false,
15 "panel": "shared",
16 "showReuseMessage": true,
17 "clear": true
18 },
19 "runOptions": {
20 "runOn": "folderOpen"
21 }
22 }
23 ]
24}
このタスクを手動で実行する場合はメニューバーのターミナル(T)→タスクの実行...から実行する。停止する場合は[Ctrl]+[@]からターミナルペインを開き、Hugo Serverのタスクを探して[Ctrl]+[C]で止める。このタスクを（手動でも自動でも）実行すると以下のトーストが表示され、既定のブラウザーで開いたりVSCode上のシンプルブラウザーで開くことができる。特にシンプルブラウザで開くと1ウィンドウでMarkdownとプレビューを同時に表示できるので便利。
記事のファイルをショートカットキーで作成する
スラッグを入力し、Markdownファイルを作成してそのファイルをVSCodeで開くまでを1個のショートカットキーで行う。commandではシェルと同じようにコマンド置換が使えるためdateコマンドで日付を取得できる。また、${input:post_slug}のようにするとinputsに定義された入力プロンプトを表示できる。これによってファイル名を構築し、hugo newで作成してcode -rで開く。
デフォルトのビルドタスクにすると[Ctrl]+[Shift]+[B]でこのタスクを起動できる。ビルドしないので本来のショートカットの意味と異なるがヨシとする。
1{
2 "tasks": [
3 {
4 "label": "Hugo New Post",
5 "type": "shell",
6 "command": "filename=\"post/$(date +%Y)/$(date +%m)/$(date +%d)/${input:post_slug}/index.md\"; cd ${workspaceFolder}; hugo new ${filename}; code -r ${workspaceFolder}/content/${filename}",
7 "group": {
8 "kind": "build",
9 "isDefault": true
10 },
11 "presentation": {
12 "echo": true,
13 "reveal": "silent",
14 "focus": false,
15 "panel": "shared",
16 "showReuseMessage": true,
17 "clear": true
18 }
19 }
20 ],
21 "inputs": [
22 {
23 "id": "post_slug",
24 "type": "promptString",
25 "description": "Input the slug of the new post"
26 }
27 ]
28}
完成したファイル
2つしか要素がないが上記を組み合わせたファイルを以下に示す。
1{
2 // See https://go.microsoft.com/fwlink/?LinkId=733558
3 // for the documentation about the tasks.json format
4 "version": "2.0.0",
5 "tasks": [
6 {
7 "label": "Hugo Server",
8 "type": "shell",
9 "command": "hugo server --baseURL=http://127.0.0.1/ --buildDrafts --disableFastRender --cleanDestinationDir --watch",
10 "group": {
11 "kind": "test",
12 "isDefault": true
13 },
14 "presentation": {
15 "echo": true,
16 "reveal": "silent",
17 "focus": false,
18 "panel": "shared",
19 "showReuseMessage": true,
20 "clear": true
21 },
22 "runOptions": {
23 "runOn": "folderOpen"
24 }
25 },
26 {
27 "label": "Hugo New Post",
28 "type": "shell",
29 "command": "filename=\"post/$(date +%Y)/$(date +%m)/$(date +%d)/${input:post_slug}/index.md\"; cd ${workspaceFolder}; hugo new ${filename}; code -r ${workspaceFolder}/content/${filename}",
30 "group": {
31 "kind": "build",
32 "isDefault": true
33 },
34 "presentation": {
35 "echo": true,
36 "reveal": "silent",
37 "focus": false,
38 "panel": "shared",
39 "showReuseMessage": true,
40 "clear": true
41 }
42 }
43 ],
44 "inputs": [
45 {
46 "id": "post_slug",
47 "type": "promptString",
48 "description": "Input the slug of the new post"
49 }
50 ]
51}