Zenn
Open19

SolidJS

Vite
#
husky
pnpm
SolidJS
Vitest
hisayuki morihisayuki mori

SolidJS aplication作成

npxで作成できる
https://github.com/solidjs/templates

solidJSがviteのtemplateを用意しているので、vitest入りでtypescriptのtemplateでプロジェクト作成

先に.gitignoreを作っておくほうが良いと思います。

.gitignore
.pnpm-store

配置はワークディレクトリ直下で

templateを利用したプロジェクト作成します、ディレクトリはappです
（ディレクトリがない場合は自動作成されます。）

# Typescript + vitest template
$ npx degit solidjs/templates/ts-vitest app
> cloned solidjs/templates#HEAD to app

ここでも.gitignoreを作っておくほうが良いと思います。
今度はappディレクトリ内に作ります

.gitignore
node_modules

パッケージインストール

ディレクトリをappに移動

cd app
pnpm install
hisayuki morihisayuki mori

パッケージインストールがうまく行かない問題

Lockfile is up-to-date, resolution step is skipped
Already up-to-date

> vite-template-solid@0.0.0 postinstall /home/vscode/develop/app
> node ./fix-jest-dom.mjs

file:///home/vscode/develop/app/fix-jest-dom.mjs:8
    if (err) throw err;
             ^

[Error: ENOENT: no such file or directory, open '/home/vscode/develop/app/node_modules/@types/testing-library__jest-dom/index.d.ts'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/home/vscode/develop/app/node_modules/@types/testing-library__jest-dom/index.d.ts'
}
 ELIFECYCLE  Command failed with exit code 1.

Issueがたっていた

hisayuki morihisayuki mori

原因

単純にfix-jest-dom.mjsの見ているpathがpnpmでインストールした場合のpathと一致しない
npmとyarnだと一致するみたいだけど、今度はtestコマンドが動かない

$npm test

> vite-template-solid@0.0.0 test
> vitest


 DEV  v0.12.10 /home/vscode/develop/app

 ❯ src/todo-list.test.tsx (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/todo-list.test.tsx [ src/todo-list.test.tsx ]
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'hydrate'
 ❯ async src/todo-list.test.tsx:5:31
      3| import { render, fireEvent } from 'solid-testing-library';
      4| 
      5| import { TodoList } from './todo-list';
       |                               ^
      6| 
      7| describe('<TodoList />', () => {

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Test Files  1 failed (1)
     Tests  no tests
      Time  1.03s (in thread 0ms, Infinity%)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Issueのコメント見ていると、こっちはpnpmでインストールしていない動かないようになっているっぽい

使えるようにする

このPRが納得出来たのでこれを試す

hmatsu47hmatsu47

どなたかと思えば森さん！（ご無沙汰してます）

わたしは公式サイトの流れどおり npm で進めて、Vitest を後から入れようとして例の Issue の問題（この PR でも未解決な模様←実際に試してみてできなかった）に突き当たったので、一旦 Vitest を諦めて uvu を試してみました。

https://zenn.dev/hmatsu47/articles/solidjs-uvu-test-sample

hisayuki morihisayuki mori

お久しぶりです！

なるほど・・・僕の方はnpmやyarnだと同じ場所にいきつきそうなのでpnpmで進めてます🤔
結局のところtemplateを使うことで起きてる問題だとすると、templateなしでpnpmでやればViteもVitestも入りそうな気がしました😂

hmatsu47hmatsu47

テスト抜きなら template を使って Vite はすんなり入るんですけどね…。

hisayuki morihisayuki mori

とりあえずIssueは解決策見えない感じでしたし、template使ってViteとVitest入れて楽な解決策に倒しました😂
別パッケージの依存で@types/testing-library__jest-domは入ってますが、package.jsonに追記して入れるようにしました・・・ｗ

hisayuki morihisayuki mori

結局こっち

いろいろ考えてみましたが、楽なほうで進めます。

とりあえずvitest使いたいので、パッケージ管理はpnpmのまま。
package.jsonのdevDependenciesに@types/testing-library__jest-domを追記しました。

package.json
{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "postinstall": "node ./fix-jest-dom.mjs"
  },
  "license": "MIT",
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
+   "@types/testing-library__jest-dom": "^5.14.3",
    "jsdom": "^19.0.0",
    "solid-testing-library": "^0.3.0",
    "typescript": "^4.6.4",
    "vite": "^2.9.9",
    "vite-plugin-solid": "^2.2.6",
    "vitest": "^0.12.7"
  },
  "dependencies": {
    "solid-js": "^1.4.2"
  }
}

pnpm installでパッケージのインストール

$ pnpm install
 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +203
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/vscode/develop/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 223, reused 202, downloaded 1, added 203, done

> vite-template-solid@0.0.0 postinstall /home/vscode/develop/app
> node ./fix-jest-dom.mjs


dependencies:
+ solid-js 1.4.2

devDependencies:
+ @testing-library/jest-dom 5.16.4
+ @types/testing-library__jest-dom 5.14.3 (5.14.5 is available)
+ jsdom 19.0.0
+ solid-testing-library 0.3.0
+ typescript 4.6.4
+ vite 2.9.9
+ vite-plugin-solid 2.2.6
+ vitest 0.12.7

vitestの疎通テスト

$ pnpm test

> vite-template-solid@0.0.0 test /home/vscode/develop/app
> vitest


 DEV  v0.12.7 /home/vscode/develop/app

 √ src/todo-list.test.tsx (3)

Test Files  1 passed (1)
     Tests  3 passed (3)
      Time  1.40s (in thread 61ms, 2292.77%)


 PASS  Waiting for file changes...
       press h to show help, press q to quit
hisayuki morihisayuki mori

ポート番号変更

Vite側の設定でport番号を指定しました。
（やらなくてもいいかも、自分の環境だと3000で通したら3001に繋がって挙動が変になったので・・・）

vite.config.ts
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
+ // server設定を追加、portは3030に固定
+ server: {
+   port: 3030,
+ },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: './setupVitest.ts',
    // solid needs to be inline to work around
    // a resolution issue in vitest:
    deps: {
      inline: [/solid-js/],
    },
    // if you have few tests, try commenting one
    // or both out to improve performance:
    threads: false,
    isolate: false,
  },
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
  resolve: {
    conditions: ['development', 'browser'],
  }
});
hisayuki morihisayuki mori

Eslintの導入

eslintのインストール

$ pnpm add -D eslint

.eslintrcの作成

pnpmコマンドからパッケージの直接実行をします。

$ pnpm eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · YAML
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm
Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest
 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +37
+++++++++++++++++++++++++++++++++++++
Progress: resolved 326, reused 306, downloaded 0, added 37, done

devDependencies:
+ @typescript-eslint/eslint-plugin 5.29.0
+ @typescript-eslint/parser 5.29.0
Successfully created .eslintrc.yml file in /home/vscode/develop/app
vscode@localhost:~/develop/app$

選択で選んだものは右側に出てます。
残念ながらeslintのWhich framework does your project use?の質問はreactかvue、noneしか選択できないので今回はnoneにします。

Does your project use TypeScript? はYes、Would you like to install them now? もYesです。
前こっちでやったときはパッケージマネージャーはnpmのみだったのですが、今回はWhich package manager do you want to use?と選ばせてくれたのでpnpmを選択

hisayuki morihisayuki mori

SolidJS用のプラグインを追加

$pnpm add -D eslint-plugin-solid
 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +42
++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 368, reused 300, downloaded 48, added 42, done

devDependencies:
+ eslint-plugin-solid 0.7.0

.eslintrc.ymlに追記

.eslintrc.yml
env:
  browser: true
  es2021: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
+ # SolidJS用Plugin追加
+ - plugin:solid/typescript
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - '@typescript-eslint'
+ # SolidJS用Plugin追加
+ - solid
rules: {}

ルール追加はあとまわし
ルール一覧

hisayuki morihisayuki mori

Prettierの追加

Prettierとeslint-config-prettierの追加

$ pnpm add -D prettier  eslint-config-prettier

 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +2
++
Progress: resolved 370, reused 348, downloaded 2, added 2, done

devDependencies:
+ eslint-config-prettier 8.5.0
+ prettier 2.7.1

eslint-config-prettierとは？

共有設定prettierを取り込むことで、Prettierと競合しそうなESLint側の組み込みルールを全部OFFにしてくれる。
https://github.com/prettier/eslint-config-prettier
offになるrulu

競合ルールの有無のチェック

pnpm dlx eslint-config-prettier path/to/main.js

.eslintrc.ymlへの設定追加

extendsにprettierを追加する

.eslintrc.yml
env:
  browser: true
  es2021: true
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  # SolidJS用Plugin追加
  - plugin:solid/typescript
+ # prettierの追加
+ - prettier
parser: '@typescript-eslint/parser'
parserOptions:
  ecmaVersion: latest
  sourceType: module
plugins:
  - '@typescript-eslint'
  # SolidJS用Plugin追加
  - solid
rules: {}
hisayuki morihisayuki mori

Prettierの設定追加

.prettierrcの作成

echo >> .prettierrc.yml

追加ルールは以下の通り

.prettierrc.yml
##########################################################################
#  Prettierの設定ファイル                                                #
#  (https: //prettier.io/docs/en/options.html)                            #
##########################################################################

# 折り返す行の長さ (.editorconfig:max_line_lengthでoverride)
# printWidth: 80
# インデントごとのスペース数 (.editorconfig:indent_sizeでoverride)
# tabWidth: 2
# スペースの代わりにタブを利用するか (.editorconfig:indent_styleでoverride)
# useTabs: false
# 末尾セミコロンの有無
semi: false
# ダブルクォートの代わりにシングルクォート
singleQuote: true
# 末尾コンマをなくす (https: //prettier.io/docs/en/options.html#trailing-commas)
trailingComma: none
# オブジェクトリテラルの角かっこの間のスペース
bracketSpacing: true
# アロー関数の引数（avoid: 可能な限り括弧を省く)
arrowParens: avoid

prettierignoreの作成

echo "node_modules/*" >> .prettierignore

scriptの追加

package.json

  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "postinstall": "node ./fix-jest-dom.mjs",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+   "format": "prettier --check \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
+   "format:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" "
  },
  "license": "MIT",
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@types/testing-library__jest-dom": "^5.14.3",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-solid": "^0.7.0",
    "jsdom": "^19.0.0",
    "prettier": "^2.7.1",
    "solid-testing-library": "^0.3.0",
    "typescript": "^4.6.4",
    "vite": "^2.9.9",
    "vite-plugin-solid": "^2.2.6",
    "vitest": "^0.12.7"
  },
  "dependencies": {
    "solid-js": "^1.4.2"
  }
}
hisayuki morihisayuki mori

型のインストール

typesyncを直接パッケージ実行

pnpx typesync

../.pnpm-store/v3/tmp/dlx-99921          | +101 ++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/vscode/develop/.pnpm-store/v3
  Virtual store is at:             ../.pnpm-store/v3/tmp/dlx-99921/node_modules/.pnpm
../.pnpm-store/v3/tmp/dlx-99921          | Progress: resolved 101, reused 57, downloaded 44, added 101, done
»  TypeSync v0.9.1
✔  3 new typings added.

📦 vite-template-solid — package.json (3 new typings added, 0 unused typings removed)
├─ + @types/prettier
├─ + @types/eslint
└─ + @types/jsdom

✨  Go ahead and run npm install or yarn to install the packages that were added.
hisayuki morihisayuki mori

haskyの導入

haskyのインストール

pnpm add -D husky lint-staged

 WARN  deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
Packages: +59
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 429, reused 357, downloaded 52, added 59, done

devDependencies:
+ @types/eslint 8.4.3
+ @types/jsdom 16.2.14
+ @types/prettier 2.6.3
+ husky 8.0.1
+ lint-staged 13.0.3

Githookを有効にする

package.jsonにscriptを追加する。
pnpmでpackage.jsonに直接登録するコマンドなかったので、ここだけnpm

Git管理しているディレクトリがpackage.jsonがある階層と同じ階層ならhusky installだけでよいのですが、
今回は.gitがある階層は1つ上なのでcd..をつけます。
ただしcd..をつけるだけだと、.gitがある階層に.huskyディレクトリができてしまいます。
.huskyディレクトリはpackage.jsonと同じ階層に必要なのでhusky installコマンドの保存先を指定します。
（今回はapp/.husky）

package.jsonにscript追加

npm pkg set scripts.prepare="cd .. && husky install app/.husky"

追加したScriptを実行

pnpm prepare

> vite-template-solid@0.0.0 prepare /home/vscode/develop/app
> cd .. && husky install app/.husky

husky - Git hooks installed
hisayuki morihisayuki mori

haskyの設定

今回は.gitとpackage.jsonの階層が別なので、script実行時に階層移動するようにします。

pre-commit時にhookされる設定追加

pnpx husky add .husky/pre-commit "pnpx lint-staged"
package.json
{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "postinstall": "node ./fix-jest-dom.mjs",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+   "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --check \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "format:fix": "prettier --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
+   "prepare": "cd .. && husky install app/.husky"
  },
  "license": "MIT",
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@types/eslint": "^8.4.3",
    "@types/jsdom": "^16.2.14",
    "@types/prettier": "^2.6.3",
    "@types/testing-library__jest-dom": "^5.14.3",
    "@typescript-eslint/eslint-plugin": "^5.29.0",
    "@typescript-eslint/parser": "^5.29.0",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-solid": "^0.7.0",
    "husky": "^8.0.1",
    "jsdom": "^19.0.0",
    "lint-staged": "^13.0.3",
    "prettier": "^2.7.1",
    "solid-testing-library": "^0.3.0",
    "typescript": "^4.6.4",
    "vite": "^2.9.9",
    "vite-plugin-solid": "^2.2.6",
    "vitest": "^0.12.7"
  },
  "dependencies": {
    "solid-js": "^1.4.2"
  },
+ "lint-staged": {
+  "*.{ts,tsx,css,json,md}": [
+    "pnpm lint:fix",
+    "pnpm format:fix"
+   ]
+ }
}

Scriptの実行

pnpm prepare

> vite-template-solid@0.0.0 prepare /home/vscode/develop/app
> cd .. && husky install app/.husky

husky - Git hooks installed

pre-commitの修正

commitイベント時に発火するScriptも.gitの階層から実行されるので、package.jsonの階層までディレクトリを移動するように追記します。

.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
+ cd app
pnpx lint-staged