Zenn
Closed2

Vite Svelte&TypeScript環境

TypeScript
Svelte
Vite
Kazuki YonemotoKazuki Yonemoto

初期構築の場合

以下コマンドでセットアップ可能。
対話モードでsvelte-tsを選択する。

yarn create vite

手動でセットアップする場合

必要パッケージのインストール（リンターその他もろもろ）

yarn add -D @sveltejs/vite-plugin-svelte @tsconfig/svelte eslint-plugin-svelte3 prettier-plugin-svelte svelte svelte-check svelte-preprocess

prettier設定例
.prettierrc

{
  "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 2,
  "plugins": ["prettier-plugin-svelte"]
}

eslint設定例
.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json",
    "extraFileExtensions": ".svelte"
  },
  "plugins": ["svelte3", "@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended-requiring-type-checking"],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "rules": {
    // Rules
  }
}

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // 省略
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

vite-env.d.ts

/// <reference types="svelte" />
/// <reference types="vite/client" />
このスクラップは2022/02/07にクローズされました