Nuxt 3 + Tailwind + ESLint + Prettierの環境を作成する

Tatsuki

タイトルの通りの環境を作成する。
開発環境は【VSCode】を想定。拡張機能を使用することを前提とする。

最終的な成果物を確認したい方はこちら

Tatsuki

【検証環境】
OS : macOS Big Sur (Intel Core)
node : v16.18.0

Tatsuki

【Nuxt3のプロジェクトを作成】
公式ページを参考にする

Tatsuki

順番にコマンド実行

npx nuxi init nuxt-tailwind-app

cd nuxt-tailwind-app

yarn install

yarn dev -o

Tatsuki

こんな感じの画面が出たら成功

Tatsuki

この時点でのディレクトリ構成

Tatsuki

【Tailwindの導入】
プロジェクトのRootディレクトリで下記コマンドを実行
(Rootディレクトリ = npx nuxi init nuxt-tailwind-appのnuxt-tailwind-app)

yarn add @nuxtjs/tailwindcss -d

npx tailwindcss init

この時点でRootディレクトリ内にtailwind.config.jsが作成される

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tatsuki

assetsフォルダを作成してassetsフォルダ内にcssフォルダを作成する。
cssフォルダ内にtailwind.cssファイルを作成し、下記内容を記載する

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tatsuki

この時点でのディレクトリ構成

Tatsuki

Rootディレクトリ配下にあるnuxt.config.tsを下記のように編集

nuxt.config.ts

export default defineNuxtConfig({
    postcss: {
        plugins: { tailwindcss: {} }
    },
    css: ['~/assets/css/tailwind.css'],
    modules: ['@nuxtjs/tailwindcss'],
})

Tatsuki

Rootディレクトリ配下に作成されたtailwind.config.jsを下記のように編集

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './*.vue',
    './components/**/*.vue',
    './layouts/**/*.vue',
    './pages/**/*.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tatsuki

適用されるかを確認する。
Rootディレクトリ配下にあるapp.vueを下記のように編集
編集内容はTailwindの公式を参考

app.vue

 <template>
  <div>
+    <h1 class="text-3xl font-bold underline">
+      Hello world!
+   </h1>
-    <NuxtWelcome />
  </div>
 </template>

Tatsuki

再度yarn dev -oコマンドで起動。下記のように表示されればtailwindが反映されている。

Tatsuki

【esLintの導入】
下記記事を参考に設定

Tatsuki

下記コマンドをRootディレクトリ上で実行

yarn add -D eslint eslint-plugin-vue

yarn add -D typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript

Tatsuki

esLintの初期化を実行

yarn run eslint --init

$ yarn run eslint --init
# 設定内容
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes

Tatsuki

VS Codeの拡張機能にESLintを追加する

Tatsuki

作成された.eslintrc.jsを下記のように編集する

.eslintrc.js

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        'plugin:vue/vue3-recommended',
        'eslint:recommended',
        '@nuxtjs/eslint-config-typescript',
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Tatsuki

デフォルトだと画像のように.eslint.jsが赤線でエラー表示されるが、この時点では無視してみる。
(Prettierで自動整形したい...)

Tatsuki

【Prettierの導入】
下記サイトを参考

Tatsuki

Rootディレクトリ配下で下記コマンドを実行

yarn add -D prettier eslint-plugin-prettier @vue/eslint-config-prettier

Tatsuki

Rootディレクトリ配下に.prettierrcファイルを作成し、下記内容で保存する

{
  "singleQuote": true,
  "semi": false,
  "vueIndentScriptAndStyle": true,
  "trailingComma": "none"
}

Tatsuki

.eslintrc.jsを編集

.eslintrc.js

module.exports = {
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        'plugin:vue/vue3-recommended',
        'eslint:recommended',
        '@nuxtjs/eslint-config-typescript',
+        '@vue/prettier'
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

この時点でのディレクトリ構成

【VS Codeでファイル保存時に自動でesLintとPrettierが反映されるように設定】
現時点だと各コマンドを実行することでLinterやformatterを実行することになるが、面倒臭い。
vscodeの設定で、ファイル保存時に動作するように編集する。

Tatsuki

Rootディレクトリ配下に.vscodeフォルダを作成する

Tatsuki

.vscodeフォルダ内にsettings.jsonを作成し、ファイルの内容を下記のように編集する。

settings.json

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

Tatsuki

他記事でもよく記載があるが、ファイル名に注意すること。
.jsonの前は「s」なので注意すること。

Tatsuki

この時点で.eslintrc.jsを保存してみると、コードが自動整形されエラーが表示されなくなることを確認する

Tatsuki

app.vueなども編集して保存するとコードが自動で整形されることが確認できる。

Tatsuki

この時点でファイルが整形されないときには、VS Codeの設定を見直す。
Macの場合、[Cmd] + [,]キー押下で設定画面を表示する。
上の検索ボックスで[formaton]と入力して、Editor: Format On Saveのチェックボックスにチェックを入れる。

Tatsuki

【完成】

Tatsuki

【課題もある】
コンポーネントに値を渡すとき、v-model:〇〇の形式で記述するとeslintのエラーが表示される。
解決の必要あり

Tatsuki

【v-model:〇〇の形式で記述した際に表示されるエラー(vue/no-v-model-argument')の解決】
.eslintrc.jsのrules項目に
'vue/no-v-model-argument': 0
を追加することで解消

eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@nuxtjs/eslint-config-typescript',
    '@vue/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
  }
}

Tatsuki

リポジトリ