現在、Svelteの環境を調査していて、タイトルの状態にするのに苦労したので、メモしときます。
いろいろなサイトに設定が書かれているのですが、少しずつ変わってきているのでこの設定は今現在の設定でしかありませんが、今までのおぼろげな各機能の理解が少し明確になった気がします。そういった点もメモしときます。
まずはsvelteのインストール
これはSvelteのページや私の以前の記事に記載されている様に、まず「npx degit sveltejs/template my-svelte-project」でテンプレートを作成します。(コマンド実行時のカレントフォルダの下に「my-svelte-project」のフォルダでテンプレートが作られます。「my-svelte-project」を入れなければカレントフォルダにテンプレートが展開されます)
svelteをTypeScriptに変換
これも書かれている通り、テンプレートを作成したフォルダで「node scripts/setupTypeScript.js」を実行してTypeScriptに変換します。
npmでパッケージをインストール
「npm install」を実行して必要なパッケージをインストールします。最初、Typescriptに変換する前にこれをしてしまい、必要なパッケージがインストールされていませんでした。変換スクリプトはjpackage.jsonは変更しますが、パッケージをインストールしませんので、そうなります。誤って先にした場合は、Typescriptに変換後、再度「npm install」を実行しましょう。
ESLintのインストール
ここがわかりにくかったのですが、VSCodeでESLintの拡張機能を入れるとそれなりに動作してしまうのですが、ESLintの設定ファイルが無いのでSvelteの設定ができません。まず、以下のコマンドで、ESLintとSvelte用の拡張機能をインストールします。
npm i -D eslint eslint-plugin-svelte3
この時、少し古い情報ではほかにもいくつかのパッケージを入れるように書かれていますが、今の設定では概ね入っています。ESLintの拡張パッケージが必要な場合は、入れてください。（私はまだそれらの拡張パッケージについてよくわかっていませんので、入れてません。）
ESLintの初期化
「.\node_modules.bin\eslint --init」「.\node_modules\.bin\eslint --init」でESLintの初期化と必要なパッケージをインストールします。
コマンド実行後、設定用の質問と選択肢が表示されますので、()内の値を選択して下さい。間違えるとパッケージが不足します。その場合はESLint実行時のエラーを確認して不足してるパッケージをインストールすれば大丈夫です。
PS C:\開発\svelteCsAsp2\frontend> .\node_modules\.bin\eslint --init
√ How would you like to use ESLint? · problems (To check syntax and find problems)
√ What type of modules does your project use? · esm (JavaScript modules (import/export))
√ Which framework does your project use? · none (None of these)
√ Does your project use TypeScript? · No / Yes (Yes)
√ Where does your code run? · browser (Browser)
√ What format do you want your config file to be in? · JavaScript (JavaScript)
Would you like to install them now with npm? » No / Yes (Yes)
設定ファイルの変更
eslint-plugin-svelte3の説明にVSCodeでTypescriptの場合の設定例が有ります。基本この通りでいいと思いますが、元の設定と被らないものは残します。
module.exports = {
parser: '@typescript-eslint/parser', // add the TypeScript parser
plugins: [
'svelte3',
'@typescript-eslint' // add the TypeScript plugin
],
overrides: [ // this stays the same
{
/* files: ['*.svelte'],*/
files: ['**/*.svelte'], /* <= 修正（こうしないと階層が深くなると対応できない） */
processor: 'svelte3/svelte3'
}
],
rules: {
// ...
},
settings: {
'svelte3/typescript': require('typescript'), // pass the TypeScript package to the Svelte plugin
// ...
},
---------- ここからが元の設定 ----------
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
// "parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
// "plugins": [
// "@typescript-eslint"
// ],
// "rules": {
// }
};
少し説明しますと、「ESLintのルールを全部手動で設定するのは大変だからやめておけ」にありますが、ルールはとってもたくさんあるので設定は難しいです。基本は推奨設定となるように"extends": の"eslint:recommended"を設定します。ここで一つ問題が発生します。この推奨設定で未定義変数の使用はエラーに設定されるのですが、「doccument」はブラウザで定義されている変数なのでエラーになります。これを回避するために"env"の"browser": trueが必要になっています。なお、ルールは基本は空にしておいてチェックを追加したくなったときに調べて追加するのがいいのではないでしょうか。この記事の最後のほうで一つ追加してみてます。
ターミナルのテスト
次に「package.json」に以下の内容を追加し、ターミナルから「npm run lint」を実行してエラーが出ないこと、エラーを作って（未定義変数とか）エラーが出ることを確認して下さい。
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"validate": "svelte-check",
"lint": "eslint --ext svelte,js src/" <= これを追加
},
VSCodeの拡張機能
VSCodeの拡張機能の「ESLint」をインストールします。次にVSCodeの設定を変更するのですが、javascript用の設定はあったのですがtypescriptの設定は見つかりませんでした。「"files.associations"」に「"*.svelte": "html"」を設定する様に書かれていますがこれをするとjavascriptとしてチェックされるようで、typesctiptの型定義がエラーになります。また、この設定はSvelte for VS Codeの説明に削除する様に書かれています。
で、どうするか問う言うと、以下の設定をsetting.jsonに追加します。
"eslint.validate": [
"svelte"
],
これでうまくいきました。試しに「.eslintrc.js」のルールに以下のルールを追加して、テンプレートの「App.svelte」の2行目の「export let name: string;」の最後のセミコロンを消すと、ESLintのエラーが表示されるようになります。
結構ここまでの設定を調べるのに苦労しましたが、これで一通りSvelte (Typescript) + ESLintの環境ができたと思います。