ピン留めされたアイテム

環境

node: v20.10.0
nuxt: v3.11.1
WSL

PS C:\Users\user> wsl -l -v
  NAME      STATE           VERSION
* Ubuntu    Running         2

PS C:\Users\user> wsl --version
WSL バージョン: 2.1.5.0
カーネル バージョン: 5.15.146.1-2
WSLg バージョン: 1.0.60
MSRDC バージョン: 1.2.5105
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.22631.3296

NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu

エディタ：VSCode
PC:Windows11
OS 名 Microsoft Windows 11 Home
バージョン 10.0.22631 ビルド 22631

やること

https://github.com/yas-ako/c-road
上のリポジトリでやった準備を思い出し、書き出し、その情報をもとに下のリポジトリの準備をする
https://github.com/yas-ako/timer-app

Y - A

nuxtのインストール

npx nuxi@latest init <project-name>

VSCode開く

code <project-name>

npmのインストール

npm install

実行

npm run dev -- -o

Y - A

ディレクトリの変更

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  srcDir: 'src/'
});

Y - A

tailwind.cssの導入

npx nuxi module add @nuxtjs/tailwindcss
npx tailwindcss init

Y - A

linterとformaterをインストール

npm i --save-dev eslint eslint-plugin-vue
npm i --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
npm i --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier
npm install -D prettier prettier-plugin-tailwindcss

.eslintrc.cjsを作成

.eslintrc.cjs

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@nuxtjs/eslint-config-typescript",
    "@vue/prettier",
    "prettier",  // 参考にしたサイト①と違うところ
  ],
  overrides: [],
  parser: "vue-eslint-parser", // ここも違う。これは参考にしたサイト③より。
  parserOptions: {
    parser: "@typescript-eslint/parser", // 参考にしたサイト①と違って、②の通りにこの行がないと動かなかった
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: { "vue/no-v-model-argument": 0 },
};

.prettierrcを作成

.prettierrc

{
  "singleQuote": false,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "trailingComma": "all",
  "plugins": ["prettier-plugin-tailwindcss"]  // 参考④
}

prettier.config.jsを作成

prettier.config.js

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],  // 参考にしたサイト⑤ 一つ上の参考④と合わせて、これで初めてtailwind cssのclass名が自動で並び変えられるようになった。
};

`.vscode/settings.json`を作成

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}