ViteでPreactのTypescript環境を構築する

はじめに

Vite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。

できあがったテンプレートはこちらにあります。

やること

preact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。ツールを個別に導入できるよう、それぞれ順を追って説明しています。

Typescript
ESLint
Prettier
Stylelint
husky と lint-staged
Path Alias

環境構築

まずは、vite のテンプレートを展開しましょう。

yarn create vite-app <project-name> --template preact
cd <project-name>
yarn

bash

開発サーバーを立ち上げるとその速さに感動します。

Typescript にする

続いてプロジェクトを Typescript 化しましょう。最小限の構成では次の２つを行うだけです。

1.すべての.jsxファイルを.tsxにします。 2.index.htmlの script タグの src を/src/main.tsxに変更します。

これで開発サーバーを立ち上げると、問題なく実行できるのが確認できます。

実際はこれだけでも動きますが、エディター上でのユーザーエクスペリエンスを向上させるために、さらに設定を加えます。

tsconfig.jsonをプロジェクトルートに設置します。これでエディターに Typescript プロジェクトであることを認識させます。

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["DOM", "DOM.Iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  },
  "include": ["src"]
}

tsconfig.jsonjson

VSCode ではこの時点で、.tsxファイルにエラーが表示されているので、これを修正します。全ての.tsxファイルに次の一文を加えます。

import { h } from 'preact'

またFragmentを使っている場合は、更にそれもインポートします。

import { h, Fragment } from 'preact'

次に、エントリーポイントであるmain.tsxを修正します。 Typescript になったことで、型エラーが検出されています。 document.getElementByIdは戻り値がHTMLElementまたはnullなため、null チェックを入れてあげます。

`index.html`の id に app が必ず存在するなら、`Non-null assertion operator`も使えます。

const el = document.getElementById('app')
if (el) {
  render(<App />, el)
}

main.tsxtsx

続いてvite.config.jsに変更を加えます。

const config = {
  jsx: {
    factory: 'h',
    fragment: 'Fragment'
  },
  plugins: [preactRefresh()]
}

vite.config.jsts

最小構成で Typescript 化できました。以下は、やらなくても問題ありません。

.jsファイルの撲滅のため、vite.config.jsを.tsに変更しましょう。また、ES Module 形式に変更し、プロジェクト全体の統一感を高めましょう。

vite.config.tsは以下のようになります。

import preactRefresh from '@prefresh/vite'
import type { UserConfig } from 'vite'

const config: UserConfig = {
  jsx: {
    factory: 'h',
    fragment: 'Fragment',
  },

  plugins: [preactRefresh()],
}

export default config

vite.config.tsts

これで Typescript 化は終了です。

ESLint を導入する

リンターのない開発は厳しいので、必ず導入しましょう。

yarn add -D eslint eslint-config-preact @typescript-eslint/parser typescript

bash

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "preact"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {}
}

.eslintrcjson

package.jsonのscriptにリント用のコマンドを用意するとのちのち楽です。

"scripts": {
  "lint:script": "eslint --ext .ts,tsx --ignore-path .gitignore ."
}

package.jsonjson

個人的には、fix したくない場面もあるので、--fixは外から付けるようにしています。

さてこれを実行させましょう。

yarn lint:script --fix

bash

VSCode ユーザーは以下の設定もすることで、自動フォーマットを効かせることができます。 ESLint の拡張が必要なので、なければここを参考にインストールしてください。

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

.vscode/settings.jsonjson

これによって保存時にフォーマットできました。

husky と lint-staged を設定する

コミット前に、静的チェックを走らせ、エラーコードをコミットできない仕組みにしましょう。

yarn add -D husky lint-staged

bash

package.jsonに次を追加します。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --fix"
  }
}

package.jsonjson

これによって、コミット前にコミットファイルのうち該当する拡張子のファイルに対し、ESLint が走ります。

もちろんリントエラーの場合はコミットがキャンセルされます。

Prettier を設定する

Prettier にプロジェクト全体のフォーマットを任せましょう。また、Typescript のコードでは、セミコロンは視認性が悪くなるため、Prettier で自動的に削除しましょう。

yarn add -D prettier eslint-config-prettier

bash

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

.prettierrcjson

ESLint と Prettier を併用する場合、ルールのバッティングがあるため、.eslintrcを修正します。

{
  "extends": [
    "eslint:all",
    "preact",
    // 他のルールの下に追加
    "prettier",
    "prettier/@typescript-eslint"
  ]
}

.eslintrcjson

コマンドによってフォーマッターを実行できます。

yarn prettier -w -u .

bash

コミット前に自動フォーマットを適用させたいので、lint-stagedにその設定を加えます。

{
 "lint-staged": {
    "*.{ts,tsx}": "eslint --fix",
    "*": "prettier -w -u" // prettierは一番最後にします
  }
}

package.jsonjson

VSCode ユーザーは次の設定によって、自動的にフォーマットできます。また、例によって拡張が必要なので、なければこちらを参考にインストールしてください。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

.vscode/settings.jsonjson

Stylelint を設定する

スタイルファイルもリント対象にしましょう。

yarn add -D stylelint stylelint-config-recommended stylelint-config-standard

bash

{
  "extends": ["stylelint-config-recommended", "stylelint-config-standard"]
}

.stylelintrcjson

package.jsoonを編集して、コマンドと lint-staged を設定します。

{
  "scripts": {
    "lint:style": "stylelint src/**/*.{css,scss}"
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint --fix",
    "*.{css,scss}": "stylelint --fix",
    "*": "prettier -w -u"
  }
}

package.jsonjson

VSCode ユーザーは次の設定によって、自動的にフォーマットできます。拡張が必要なので、なければこちらを参考にインストールしてください。

長くなりましたがこれでリンターとフォーマッターの基本的な設定は終了です。

Path Alias を設定する

モジュールの import はデフォルトでは相対パスを指定しますが、alias を設定して常に同じルートを参照したいです。

vite.config.tsとtsconfig.json変更して alias を設定しましょう。

Key は`/`から始まらなければなりません。

import { join } from 'path'
import type { UserConfig } from 'vite'

const config: UserConfig = {
  alias: {
    '/@/': join(__dirname, 'src'),
  }
}

export default config

vite.config.tsts

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "/@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

tsconfig.jsonjson

これで alias の設定ができました。こんな感じで使います。

import { App } from '/@/app'

main.tsxtsx

/から始まらなければならないのが、少し違和感ありますが、パッケージ名の alias との兼ね合いみたいです。詳しくはこちらを参照ください。

以上で最低限の環境が構築できました。

Edit this page on GitHub

ViteでPreactのTypescript環境を構築する

はじめに

やること

環境構築

Typescript にする

ESLint を導入する

husky と lint-staged を設定する

Prettier を設定する

Stylelint を設定する

Path Alias を設定する

Verified with

OS

Browser

Other Article

ViteとVue3にTailwind CSSを導入する

SPAやSSGの仕組みをデプロイの観点から理解する

Comments