Nuxt3 プロジェクト作成～ Lint/Prettier 設定まで

## はじめに

`Nuxt3` も正式リリースされて安定してきたきがします。
意外と環境構築系の記事がなかったのでまとめます。

> Nuxt バージョン： 3.2.0

## プロジェクト作成

`Nuxt3` プロジェクトを作成していきます。

```shell
npx nuxi init <project-name>
```

![image-20230215090604434.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/04c45ddf-5fab-4d2d-adc3-02a9b92e7b59.png)
`Nuxt2` の時のように CLI で質問攻めにあうこともなく、一瞬でプロジェクト作成が完了します。

![image-20230215090832357.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/05d4d679-6d6e-efb3-aa87-d119735b09f8.png)
できたプロジェクトがこちら。非常にスッキリした構造になっています。

![image-20230215090950360.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/cb324982-ce1c-b8cf-9b3d-f521d0a8b6af.png)
`package.json` も無駄なものをすべて省いた潔いものになっています。

## ESLint の導入

### インストール

`ESLint` を導入していきます。

```shell
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

### 初期設定

インストールしたら、初期設定をしていきます。

```shell
npx eslint --init
```

![image-20230215092502130.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/5fbcb575-039b-d067-b5ee-5aae8cc97710.png)
プロジェクトフォルダに `.eslintrc.js` が作成されていればOKです。

`.eslintrc.js` の編集は `Prettier` 導入後にやるので、ここには記載していません。



## Prettier の導入

### インストール

`Prettier` をインストールしていきます。

```shell
npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier
```

### 初期設定

ルールを設定するための `.prettierrc` は自動作成されませんので、プロジェクトフォルダに `.prettierrc` ファイルを作成し、ルールを編集します。

※ルールの内容は僕が普段設定しているやつです。お好みで書き分けてください

```json:.prettierrc
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf"
}
```

### ESLint 側の設定

`Prettier` のインストールが完了しましたので、 `.eslintrc.js` を編集していきます。

```diff_javascript:.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
+   node: true,
  },
  extends: [
+   'plugin:vue/vue3-recommended'
    'eslint:recommended',
-   'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
+   '@vue/prettier',
  ],
  overrides: [],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {},
}
```

こちらもルールはお好みで。



## Lint の実行

`ESLint`  と `Prettier` の導入が終わったので Lint スクリプトを追加していきます。

```diff_json:package.json
{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
+   "lint": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
+   "lintfix": "prettier --write --list-different . && npm run lint -- --fix"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "eslint": "^8.34.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "nuxt": "^3.2.0",
    "prettier": "^2.8.4"
  }
}
```

`lint` コマンドと `lintfix` スクリプトを追加しています。

基本的には `lintfix` スクリプトだけでよいかと。

```shell
npm run lintfix
```

`format` スクリプトを作成することもありますが、実際のところ `Prettier` だけ使うことは少ないので省略しています。



## まとめ

`Nuxt3` の導入から Lint が使用できるようになるところまでの環境構築方法を記載しました。

`Nuxt2` では CLI でできていた部分ですので使う人によっては `Nuxt3` のほうが大変だって場合もあるかもしれません。

個人的には `devDependencies` しかない潔さが気に入っていますｗ