viteの環境の作り方

2024年03月26日 06:38

  1. "npm init vite@latest
  2.  cd "作成したプロジェクトフォルダ”
  3. npm install
    もしくは yarn install
  4. npm run dev  
    もしくは yarn dev

ES Lint

  1. yarn add eslint --dev 
  2. $ yarn run eslint --init 
    ウィザードにこたえると生成
  3. package.jsonのscriptタグに、ES Lint実行方法 や対象を記載
    "scripts": {

      "lint": "eslint --ext .ts --ignore-path .gitignore ."
    }

  4. 実行方法
    "yarn lint"

prettier  

  1. インストール
    yarn add prettier --dev --exact
  2.  ".prettierrc”ファイルを追加すれば、デフォルトの設定を変更できる
  3. package.jsonのscriptタグに、prettier 実行方法を記載 

    "format": "prettier --write ."

  4. 実行
    yarn format

vitest

  1. インストール
    yarn add -D vitest 
  2. Node.jsのtest環境でdomを扱うために、happy-domをインストール
    yarn add happy-dom --dev 
  3. 実行結果を表で表示するために@vitest/coverage-c8をインストール
     yarn add @vitest/coverage-c8 --dev
  4. package.jsonのscriptタグに、vitestの実行方法を記載 
    "test": "vitest --run",
    "test:watch": "vitest --watch",
    "coverage": "vitest run --coverage"


    ※「watch」は、テストファイルの変更を検知すると、そのテストだけが再実行されます。 

  5. testコードの作成
    testsフォルダをrootに用意し、「***.test.ts」のファイルにテストコードをかく

  6. 実行
    yarn test

happy-dom
happy-dom



戻る