Vite + Svelte + TypeScript + ESLint + Prettier の環境構築

Viteプロジェクト作成

いつも通り。

yarn create vite

使用フレームワークを聞かれたらsvelteを選択。

ESLint導入

いつも通り初期化

yarn create @eslint/config

いろいろ聞かれる。
オレオレ選択的にはこんな感じ。

// ESLintを構文の確認と問題の発見のために使う
How would you like to use ESLint? 
	-> To check syntax and find problems
	
// ES2015のimport/exportを使う
What type of modules does your project use? 
	-> JavaScript modules (import/export)

// フレームワークはReactを使う
Which framework does your project use?
	-> React

// TypeScriptも使う
Does your project use TypeScript?
	-> Yes

// ブラウザで動かすアプリを作る
Where does your code run? 
	-> browser

// 設定ファイルはYAMLで書く
What format do you want your config file to be in?
	-> YAML

// 必要なパッケージを今すぐインストールする
Would you like to install them now?
	-> Yes

// yarnを使ってインストールする
Which package manager do you want to use?
	-> yarn

Svelte用プラグインを入れる

yarn add -D eslint-plugin-svelte3

設定ファイルに追記。

eslintrc.yml

 env:
   browser: true
   es2021: true
 extends:
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
+overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }]
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: latest
   sourceType: module
 plugins:
   - "@typescript-eslint"
+  - svelte3
 rules: {}

Prettier導入

インストール

yarn create prettier

いろいろ聞かれるのでお好みで回答。

オレオレ的にはこんな感じ。

prettierrc.yml

printWidth: 80
tabWidth: 2
useTabs: false
semi: false
singleQuote: false
trailingComma: all
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: avoid

ESLintにprettier登録

yarn add -D eslint-config-prettier

eslintrc.yml

 env:
   browser: true
   es2021: true
 extends:
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
+  - plugin:prettier/recommended
 overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }]
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: latest
   sourceType: module
 plugins:
   - "@typescript-eslint"
   - svelte3
 rules: {}

Svelte用プラグインを入れる

yarn add -D prettier-plugin-svelte

VScodeで.svelteファイルを認識させる

ESlintとPrettier関連拡張機能はVScodeに既に導入されているとする。

加えるべきはこの拡張機能。
https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

そしてsettings.jsonに追記。
プロジェクトルートの.vscodeディレクトリ内に置いてもいいし、コマンドパレットでグローバルなsettings.jsonを開いて追記してもよい。

settings.json(...は中略)

{
  ...
  "eslint.probe": [
      ...
      "svelte"
  ],
  "eslint.validate": [
      ...
      "svelte"
  ],
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  ...
}

多分これで*.svelteファイル保存時にformatされるはず。