基本的には以下のドキュメント通りに導入する。
<div class="link-card">
<div class="link-card-header">
<span class="link-card-site-name">marcus.se.net</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Svelte | Obsidian Plugin Developer Docs</p>
</div>
<div class="link-card-description">
This guide explains how to configure your plugin to use Svelte, a light-weight alternative to tradit...
</div>
</div>
</div>
<a href="https://marcus.se.net/obsidian-plugin-docs/getting-started/svelte"></a>
</div>
ドキュメントと異なる点だけいくつか補足。
## `view.ts`のサンプルコード
`children[1]`をつけないと、Viewの下の方に表示されてしまう。
```diff
async onOpen() {
this.component = new Component({
- target: this.contentEl,
+ target: this.containerEl.children[1],
props: {
variable: 1
}
});
}
```
以下のサンプルコードでも`children[1]`を記載しているので、こちらの方がいいはず。
<div class="link-card">
<div class="link-card-header">
<span class="link-card-site-name">marcus.se.net</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<div>
<p class="link-card-title">Views | Obsidian Plugin Developer Docs</p>
</div>
<div class="link-card-description">
Views determine how Obsidian displays content. The file explorer, graph view, and the Markdown view ...
</div>
</div>
</div>
<a href="https://marcus.se.net/obsidian-plugin-docs/user-interface/views"></a>
</div>
## TS1371エラー
以下のようにclass以外をimportしたとき
```ts
import { TaskService } from "./app/TaskService";
```
TS1371エラーが出る。
```
TS1371: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'.
```
[[📝Svelteを使ったプロジェクトでtypeやinterfaceをimportするとTS1371エラーになる]] を見て解決する。
## [[Prettier]]導入
[[SvelteにPrettierを適応]] を参考に。