Nuxt3でeslintとPerettierを有効化してvue,typescriptのコードの静的解析＆自動修正する。


## 目的
チーム開発をする際に開発メンバーのレベル感を合わせるため
ソースコードのスタイルを事前チェックできるようにeslintでエラーを事前検知できるようにしたい。
あと、コードレビューでスタイルに関する細かい指摘をしないように自動修正したい。

## 設定方法

### 必要パッケージをインストールする。

下記のパッケージをインストールする。

```console
# ESLint
yarn add --dev eslint

# Prettier
yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier tslint-config-prettier 

# TypeScript support
yarn add --dev typescript @typescript-eslint/parser @nuxtjs/eslint-config-typescript
```

### eslintrcの設定を行う

`npm init @eslint/config`で対話的に設定をする。
Successfully created となればOK

```console
❯ npm init @eslint/config 
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard-with-typescript
✔ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · yarn
Installing eslint-plugin-vue@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^6.4.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0 || ^16.0.0 , eslint-plugin-promise@^6.0.0, typescript@*

<中略>

Successfully created .eslintrc.yml file in /pass/to/your/project
```

作成されたymlファイルのextend,parser,parserOptionを編集する。
ルールについては、recommendedを設定
vue-eslint-parserをparserに指定しないとVueのチェック時にうまくパースできないので設定
Option側のperserに@typescript-eslint/parserを指定する。

推奨設定以外に細かいルールのカスタマイズをしたい場合はまずeslintのRulesページで該当するものがないかを確認する。
https://typescript-eslint.io/rules/

```yaml
env:
  browser: true #基本はこれでよい
  es2021: true
extends:
  - eslint:recommended # eslintの推奨ルール
  - plugin:@typescript-eslint/recommended 
  - plugin:@typescript-eslint/stylistic
  - plugin:vue/vue3-recommended
  - prettier # prettierを併用する場合必要
parser: 'vue-eslint-parser' # vue/typescript併用の場合はこのperserを指定
parserOptions:
  ecmaVersion: latest
  sourceType: module 
  parser: '@typescript-eslint/parser' # typescript用perser
  project: true
  extraFileExtensions: 
    - '.vue'
plugins:
  - vue
rules: {} # plugin外で個別のコーディングルールを指定する場合に使う

```

### Perettierの設定を行う

.prettierrc.ymlを作成し編集する。

```yaml
trailingComma: "es5"
tabWidth: 2
semi: true
```

## VSCodeでESlint,Prettierを利用する場合

VScodeの拡張機能をインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/9112f0f3-0132-1ab3-83c0-54f6a43581e0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89244/27ac9e92-7067-83df-854e-1dee65a8e564.png)


参考URL

[Getting Started with ESLint](https://eslint.org/docs/latest/use/getting-started)
[typescript-eslint.io](https://typescript-eslint.io/)