テンプレートリテラル内のマークアップを整形する

[knokmki612]

prettierのembeddedLanguageFormattingを有効にしたが、 "html``" のようなタグテンプレート内でしか整形されないことが分かった。

• [x] タグテンプレートに用いるhtmlを定義するか、定義済みのものがあれば利用する

https://prettier.io/blog/2020/08/24/2.1.0.html#add---embedded-language-formattingautooff-option-7875httpsgithubcomprettierprettierpull7875-by-bakkothttpsgithubcombakkot-8825httpsgithubcomprettierprettierpull8825-by-fiskerhttpsgithubcomfisker

• [x] Accordion
• [x] Avatar
• [x] Badge
• [x] Balloon
• [x] BoxedTab
• [x] Button
• [x] Card
• [x] Chat
• [x] FilledTag
• [x] IconButton
• [x] Input
• [x] Introduction
• [x] LabeledLikeButton
• [x] LikeButton
• [x] LoadingCard
• [x] LoginCard
• [x] OutlinedButton
• [x] ProfileCard
• [x] Select
• [x] SignUpCard
• [x] Spinner
• [x] Tab
• [x] Tag
• [x] TextButton
• [x] Textarea
• [x] ToggleSwitch

[Hidetaro7]

html is not a function
TypeError: html is not a function
    at Object.Template (http://localhost:6006/main.iframe.bundle.js:1600:10)
    at finalStoryFn (http://localhost:6006/vendors~main.iframe.bundle.js:14126:32)
    at http://localhost:6006/vendors~main.iframe.bundle.js:10759:21
    at http://localhost:6006/vendors~main.iframe.bundle.js:12683:16
    at wrapper (http://localhost:6006/vendors~main.iframe.bundle.js:9534:12)
    at http://localhost:6006/vendors~main.iframe.bundle.js:11252:14
    at http://localhost:6006/vendors~main.iframe.bundle.js:11266:26
    at http://localhost:6006/vendors~main.iframe.bundle.js:10759:21
    at http://localhost:6006/vendors~main.iframe.bundle.js:12647:12
    at http://localhost:6006/vendors~main.iframe.bundle.js:12683:16

htmlというパッケージが見つからない気がしていたので

yarn list --pattern html

すると

yarn list v1.22.10
├─ @storybook/html@6.3.7
├─ @types/html-minifier-terser@5.1.2
├─ ansi-html@0.0.7
├─ ansi-to-html@0.6.15
├─ escape-html@1.0.3
├─ html-entities@1.4.0
├─ html-loader@1.3.2
├─ html-minifier-terser@5.1.1
├─ html-tags@3.1.0
├─ html-void-elements@1.0.5
├─ html-webpack-plugin@4.5.2
├─ htmlparser2@4.1.0
└─ renderkid@2.0.7
   └─ htmlparser2@6.1.0

[Hidetaro7]

yarn add html

してもエラーが消えず。

ひとまずコードの修正は一通り終了。

[knokmki612]

これを使っていただけますか？ https://github.com/tuqulore/tuqulore-ui/commit/9d9f37e94d988f76fe4c3fb6ceced4b2bb908d88

[Hidetaro7]

これを使っていただけますか？ 9d9f37e

使ってます、元々含まれていますよ。

[knokmki612]

使うというのは #96 の差分のように、 require("<packages/tailwindcss/stories/html.js のパス>") のように読み込み、これをタグ付きテンプレートとして使っていただきたいという意味でした。もし既にそのように書かれているようであれば失礼しました。

もしそのように書かれているのであれば、外部のパッケージをインストールする必要はないはずなので上記の通りになっていないのではないかと推測した次第です。

もしより詳細に現状の把握と問題の特定をするのであれば、作業中のコードをプッシュしていただければ確認できるかと思いました。