これをするとどうなる?
Svelte
でTypeScript
を書くとき、通常は<script lang="ts">
とlang
設定を書きますが、これを<script>
でもTypeScript
と認識させることができます
以下はVSCode
でlang
のデフォルト設定をしていない時と、した時の比較です。
デフォルト設定なし | デフォルト設定あり |
---|---|
メリット
- コーディング時に
lang
を書かなくていいから楽 - スッキリするので可読性が上がる
-
<style>
にシンタックスハイライトがされて読みやすい
-
設定方法
1. svelte.config.jsファイルを作成
svelte.config.js
ファイルを作成してください。保存場所はrollup.config.js
と同じ階層です。
const sveltePreprocess = require('svelte-preprocess');
function createPreprocessors(production) {
return sveltePreprocess({
// ここでscriptやstyleタグのデフォルトlangを指定します
defaults: {
script: 'typescript',
style: 'postcss',
},
// その他の設定
postcss: {
plugins: [
require('tailwindcss'),
require('postcss-import'),
...(production
? [
require('autoprefixer'),
require('cssnano')({ preset: 'default' }),
]
: []),
],
}
});
};
module.exports = {
preprocess: createPreprocessors(true),
createPreprocessors,
};
2. rollup.config.jsの設定
rollup.config.js
に、先ほどsvelte.config.js
で設定したpreprocess
設定を読み込ませます。
// ...
const createPreprocessors = require('./svelte.config').createPreprocessors;
const production = !process.env.ROLLUP_WATCH;
export default {
// ...
plugins: [
// ...
svelte({
// ...
preprocess: createPreprocessors(production),
}),
// ...
],
};
// ...
3. Svelte Language Serverの再起動
これらの設定をしたらSvelte Language Server
を再起動します。
VSCodeでcmd-shift-p
でコマンドパレットを開き、svelte restart
と入力したら、候補に出てくるSvelte: Restart Language Server
を実行します。
これで、先程まで出ていた警告が消えました
ビルドも正常に動きブラウザに表示されました。
まとめ
2020年の初期だったでしょうか、Svelte
がTypeScript
に対応するにはどうしたら良いか議論がされていました。そこで、Vue
で使われているVetur
というVue Language Server
にヒントを得て、同様の仕組みをSvelte
も採用することになりました。
詳しくありませんが、どうやらLanguage Server
は言語解析をしてくれてVScode
に合ってるよ/間違ってるよを教えてくれるもののようです。(間違っていたらご指摘ください )
このおかげで、Svelte
でもTypeScript
をVSCode
で書けるようになりました。
先日、『State of JavaScript 2020』でReact
を抜き満足度・興味で首位になったSvelte
。今後も使う人が増えるといいですね。
参考サイト
- Using Preprocessors
- Svelte <3 TypeScript