Zenn
Closed36

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

ESLint
Tailwind CSS
Prettier
Nuxt 3
TatsukiTatsuki

【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: [],
}
TatsukiTatsuki

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

tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
TatsukiTatsuki

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

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

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

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

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

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

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

TatsukiTatsuki

【esLintの導入】
下記記事を参考に設定
https://qiita.com/kentarou_masuda/items/c0180fe383b01ba54cbf

TatsukiTatsuki

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

yarn add -D eslint eslint-plugin-vue

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

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
TatsukiTatsuki

作成された.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": {
    }
}
TatsukiTatsuki

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

TatsukiTatsuki

【Prettierの導入】
下記サイトを参考
https://miyauchi.dev/ja/posts/vite-vue3-typescript/

TatsukiTatsuki

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

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

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

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

.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": {
    }
}
TatsukiTatsuki

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

TatsukiTatsuki

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

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

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

TatsukiTatsuki

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

TatsukiTatsuki

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

TatsukiTatsuki

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

TatsukiTatsuki

【完成】

TatsukiTatsuki

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

TatsukiTatsuki

【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
  }
}
このスクラップは2022/10/30にクローズされました