動機

【React+TypeScript】Netflixのクローンを作るチュートリアル
を参考にしてReactの素振りをする予定
Reactの環境構築の特に, prettierとかeslintとかhuskyの辺りがめんどくさそうだったのでdenoのformatterとlinterのみ採用してみることにした
あとついでにViteも採用してみる

react-tsのProjectを作成する

❯ yarn create vite
yarn create v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.9.4" with binaries:
      - create-vite
      - cva
✔ Project name: … netflix-clone
✔ Select a framework: › react
✔ Select a variant: › react-ts

tktk2o

denoのinstall

既にinstall済みだったのでupgradeのみ

❯ deno upgrade
Looking up latest version
Found latest version 1.22.1
Checking https://github.com/denoland/deno/releases/download/v1.22.1/deno-x86_64-apple-darwin.zip
29.2 MiB / 29.2 MiB (100.0%)
Deno is upgrading to version 1.22.1
Archive:  /var/folders/vp/ybjbbn4x4jsfkvndjwcv30rh0000gn/T/.tmp6urzmi/deno.zip
  inflating: deno
Upgraded successfully

❯ deno --version
deno 1.22.1 (release, x86_64-apple-darwin)
v8 10.3.174.6
typescript 4.6.2

tktk2o

denoの設定

node プロジェクトでも deno lint | deno fmt する
を参考にdenoの設定をする

lintのOptionの詳細は公式で確認できた。
よくわからないのでdefaultにしとく

deno.jsoncを作成する

deno.jsonc

{
  "compilerOptions": {
    "lib": ["deno.window"],
    "strict": true
  },
  "lint": {
    "files": {
      "include": ["src"],
      "exclude": ["node_modules"]
    },
    "rules": {
      "tags": ["recommended"]
    }
  },
  "fmt": {
    "files": {
      "include": ["src", "deno.jsonc"],
      "exclude": ["node_modules"]
    },
    "options": {
      "useTabs": false,
      "lineWidth": 100,
      "indentWidth": 2,
      "singleQuote": true
    }
  }
}

tktk2o

VSCodeの設定

.vscode/settings.json

{
  "deno.enable": false,
  "deno.lint": true,
  "deno.config": "./deno.jsonc",
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "denoland.vscode-deno"
  }
}

tktk2o

.vscode/settings.json

{
  "deno.enable": false,
  "deno.lint": true,
  "deno.config": "./deno.jsonc",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}

保存時にフォーマットが効かなかったのでこっちにした

このスクラップは2022/06/05にクローズされました