Svelte3でTypeScript/Prettierをセットアップする[2021/04版]
本記事は yarn の使用前提で記載しています。npm を使う場合は置き換えて進めてください。またエディターは vscode になります。
Svelte3 とは
この方の記事がまとまっていて詳しいので読んでみてください。
公式サイト
動作確認環境
OS: Windows 10 Home Version 2004
WSL2(Ubuntsu-18.04)で動作確認済み
Svelte プロジェクトを作成/TypeScript を有効にする
まずは Svelte3 を新規作成するために公式のテンプレートをインストール。
TypeScript を使う場合はこのタイミングで npm install するとエラー出るのでやらないこと。
npx degit sveltejs/template [つけたいプロジェクト名]
cd [つけたいプロジェクト名]
そのまま次のコマンドを叩くことで TypeScript をオンにすることができます。
node scripts/setupTypeScript.js
yarn install
yarn dev
これで一旦 Svelte3 アプリが起動できるはずです。
Svelte3 における Prettier および ESLint の状況について
公式で eslint-plugin や prettier-plugin ともに公開されている。
ただ残念なことに React・Vue のように cli から簡単に有効化できるシステム・テンプレートもないし、eslint-plugin-svelte3 に至っては次のことが書かれている。
Don't enable this either on Svelte components. If you want to use Prettier, just use it directly, along with appropriate plugins.
Svelte コンポーネントでこれを有効にしないでください。Prettier を使用したい場合は、適切なプラグインと一緒に直接使用してください。
どうやら prettier-plugin-svelte と eslint-plugin-svelte3 で併用することが出来ないみたいで、eslint-plugin-svelte3&prettier の組み合わせならいけるよみたいな表現がされている。
(eslint-plugin-svelte3&prettier の組み合わせを本当は本記事で試したかったけど ESLint と Prettier の知見が足りない。。。)
Svelte3 + TypeScript の環境下で Prettier を有効にする。
ESLint の設定が手間かかりそうなのとまず Svelte コードをフォーマットしたかったこともあり本記事は Prettier を優先。
まず vscode の設定ページにいる Editor: Default Formatter が「Prettier」になっていることを確認。
次のコマンドを叩いて
yarn add --dev prettier-plugin-svelte prettier
これで Svelte ファイルでも Prettier が有効化されました！🎉
Prettier の設定ファイルを作る
Prettier は JSON 形式などで専用の設定ファイルを作成することが出来ます。
今回は.prettierrcファイルを作成する方法で設定します。
Svelte アプリに関しても React や Vue と同じくプロジェクトディレクトリ直下に設置します。
こんな構成にしてみました。おそらく一番使われているプロパティたちで構成。
{
"useTabs": false, // インデントをスペースで指定、Noタブ
"semi": true, // ステートメントの終わりにセミコロン（;）を使う
"trailingComma": "all", // オブジェクトなどの末尾のカンマ（,）を有効化
"singleQuote": true, // "hoge"ではなく'hoge'を使う
"tabWidth": 2 // コードのインデントを2にする
}
Prettier コマンドでフォーマット
Prettier は CLI のコマンドを使って、フォーマットをかけることが出来ます。
次のコマンドを叩くことで、src フォルダにある svelte ファイルのフォーマットをかけることが出来ます。
npx prettier --write --plugin-search-dir=. ./**/*.svelte
終わりに
Lint やフォーマッター周りの環境構築などまだ発展途上なところがある Svelte ですが、その分ツールの進化を見守るのが楽しいです。個人的には Vue よりさらに学習コストが低めかつ手軽にアプリを作れると思っているので気になる人はぜひ使ってみてください。
参考ページ
Discussion