【Nuxt3】Nuxt3+ESLint+Prettier+TailwindCSSでの環境構築【2023年1月版】

## はじめに

フライング1月版。
[前回の記事](https://qiita.com/airRnot1106/items/6cc7ad9d9da61375b0fd)が見返したら結構ひどかったので書き直します。なお、今回もひどい場合があります。

## 環境

```
VSCode: v1.74.1
yarn: v1.22.18
```

```json:package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@nuxtjs/tailwindcss": "^6.2.0",
    "@tsconfig/strictest": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^5.47.0",
    "@typescript-eslint/parser": "^5.47.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vueuse/core": "^9.7.0",
    "@vueuse/nuxt": "^9.7.0",
    "eslint": "^8.30.0",
    "eslint-plugin-tailwindcss": "^3.7.1",
    "eslint-plugin-vue": "^9.8.0",
    "nuxt": "3.0.0",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "typescript": "^4.9.4"
  },
  "dependencies": {
    "daisyui": "^2.45.0"
  }
}
```

## 導入

### Nuxt3

プロジェクト名はお好みで

```zsh
npx nuxi init nuxt-template-v2
```

```zsh
cd nuxt-template-v2/
```

```zsh
yarn install
```

次に、`nuxt.config.ts`を以下のように編集

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  devServer: {
    host: '0.0.0.0',
  },
  srcDir: 'src', // ここで指定したディレクトリにcomponentsやcomposablesなどを置いていく
});
```

`src`ディレクトリを作成し、`app.vue`をその中に移す

### TypeScript

`tsconfig.json`を編集したい場合は直接編集するのではなく`nuxt.config.ts`に追記する

今回は型制約を最強にしたいので`@tsconfig/strictest`を利用する

```zsh
yarn add -D @tsconfig/strictest
```

`nuxt.config.ts`に以下を追記

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  devServer: {
    host: '0.0.0.0',
  },
  srcDir: 'src',
  /* 以下を追記 */
  typescript: {
    tsConfig: {
      extends: '@tsconfig/strictest/tsconfig.json',
    },
  },
});
```

### TailwindCSS

Nuxt3ではmoduleとしてTailwindCSSをサポートしているらしいのでそれを利用する

```zsh
yarn add -D @nuxtjs/tailwindcss
```

`nuxt.config.ts`に以下を追記

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  devServer: {
    host: '0.0.0.0',
  },
  srcDir: 'src',
  typescript: {
    tsConfig: {
      extends: '@tsconfig/strictest/tsconfig.json',
    },
  },
  /* 以下を追記 */
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    exposeConfig: true,
    configPath: 'tailwind.config', // 拡張子は不要
  },
});
```

次に、rootに`tailwind.config.cjs`を作成する
実は、modulesに'@nuxtjs/tailwindcss'を指定するだけでTailwindCSSは使えるようになるのだが、今後色々設定を足したりすると`nuxt.config.ts`が肥大化するのでtailwindの設定は切り出すようにする

```js:tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'], // 正直'./src/**/*.vue'だけでいいような気がする'
  /* 以下は個人的な設定なので不要 */
  theme: {
    extend: {
      colors: {
        'light-black': '#333333',
      },
    },
  },
};
```

なお、`@assets/css/tailwind.css`といったものは作成しなくても動作する

また、`tailwind.config.cjs`を編集した後は一度`yarn run dev`し直さないと反映されない

### ESLint

```zsh
yarn add -D eslint eslint-plugin-vue typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript eslint-plugin-tailwindcss
```

rootに`.eslintrc.cjs`を作成し、以下のように編集

```js:.eslintrc.cjs
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:tailwindcss/recommended',
    '@nuxtjs/eslint-config-typescript',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint', 'tailwindcss'],
  rules: {
    'tailwindcss/no-custom-classname': [
      'warn',
      {
        config: 'tailwind.config.cjs',
      },
    ],
  },
};
```

rulesの`tailwindcss/no-custom-classname`は、`tailwind.config.cjs`に自分で設定したclassで怒られないようにするために設定する

なお、この辺りで発生するESLintからの怒られは次項のPrettierの設定をするとおさまる

### Prettier

```zsh
yarn add -D prettier @vue/eslint-config-prettier prettier-plugin-tailwindcss
```

rootに`.prettierrc`を作成し、以下のように編集

```:.prettierrc
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "vueIndentScriptAndStyle": true
}
```

※この辺りの設定はお好みで

また、`.eslintrc.cjs`に以下の内容を追記

```js:.eslintrc.cjs
module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:tailwindcss/recommended',
    '@nuxtjs/eslint-config-typescript',
    '@vue/eslint-config-prettier', // ここを追加
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint', 'tailwindcss'],
  rules: {
    'tailwindcss/no-custom-classname': [
      'warn',
      {
        config: 'tailwind.config.cjs',
      },
    ],
  },
};
```

## おまけ

以下は個人的に常備しておきたいライブラリです。

### daisyUI

TailwindCSS用のUIプラグイン。UI系で一番使いやすい

```zsh
yarn add daisyui
```

`tailwind.config.cjs`に以下の内容を追記

```js:tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
  theme: {
    extend: {
      colors: {
        'light-black': '#333333',
      },
    },
  },
  /* 以下を追記 */
  plugins: [require('daisyui')],
  daisyui: {},
};
```

このままだと`require('daisyui')`で型定義がないと怒られるので型定義を追加する

`@/types`ディレクトリを作成し、`global.d.ts`を追加する

```ts:src/types/global.d.ts
declare module 'daisyui';
```

### VueUse

VueUseは、便利な関数をまとめたライブラリ

```zsh
yarn add -D @vueuse/nuxt @vueuse/core
```

`nuxt.config.ts`に以下の内容を追記

```ts:nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  nitro: {
    preset: 'node',
  },
  devServer: {
    host: '0.0.0.0',
  },
  srcDir: 'src',
  typescript: {
    tsConfig: {
      extends: '@tsconfig/strictest/tsconfig.json',
    },
  },
  modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt'], // ここを追加
  tailwindcss: {
    exposeConfig: true,
    configPath: 'tailwind.config',
  },
});
```

## おわりに

eslint周りは何入れればいいのかよくわからないしextendsの順番も正解がわからないしややこしい。

## リポジトリ

https://github.com/airRnot1106/nuxt-template-v2