Open19

SolidJS

SolidJS aplication作成

npxで作成できる

https://github.com/solidjs/templates

solidJSvitetemplateを用意しているので、vitest入りでtypescripttemplateでプロジェクト作成

先に.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

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

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がたっていた

原因

単純にfix-jest-dom.mjsの見ているpathpnpmでインストールした場合のpathと一致しない
npmyarnだと一致するみたいだけど、今度は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が納得出来たのでこれを試す

どなたかと思えば森さん!(ご無沙汰してます)

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

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

お久しぶりです!

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

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

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

結局こっち

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

とりあえず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

ポート番号変更

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'],
  }
});

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?の質問はreactvuenoneしか選択できないので今回は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を選択

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: {}

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

Prettierの追加

Prettiereslint-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への設定追加

extendsprettierを追加する

.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: {}

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"
  }
}

型のインストール

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.

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

haskyの設定

今回は.gitpackage.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

SolidJSのLintルール

一旦、extendsplugin:solid/typescriptを追記しているので、マニュアルでの追加はとくになし
(プラグイン追加で全ルール適用)
邪魔なルールが出てきたら以下のページを見て随時Offにする

https://www.npmjs.com/package/eslint-plugin-solid
ログインするとコメントできます