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

はじめに

フライング1月版。
前回の記事が見返したら結構ひどかったので書き直します。なお、今回もひどい場合があります。

環境

VSCode: v1.74.1
yarn: v1.22.18

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

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

npx nuxi init nuxt-template-v2

cd nuxt-template-v2/

yarn install

次に、nuxt.config.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を利用する

yarn add -D @tsconfig/strictest

nuxt.config.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をサポートしているらしいのでそれを利用する

yarn add -D @nuxtjs/tailwindcss

nuxt.config.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の設定は切り出すようにする

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

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を作成し、以下のように編集

.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

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に以下の内容を追記

.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系で一番使いやすい

yarn add daisyui

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

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を追加する

src/types/global.d.ts

declare module 'daisyui';

VueUse

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

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

nuxt.config.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の順番も正解がわからないしややこしい。

リポジトリ