prettierやlinterの設定


## 環境
- intel Mac
- VSCode

## 自分の設定

```json: .prettier
{
  "printWidth": 120,
	"singleQuote": true,
	"semi": false,
	"vueIndentScriptAndStyle": true,
	"trailingComma": "es5"
}
```

- eslintの方になります。
    - rulesとglobals以外の部分は正直他の記事とそこまで変わらないと思われます。
```json:.eslintrc
{
  "root": true,
  "env": {
    "browser": true,
    "es2022": true,
    "node": true
  },
  "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier"],
  "parserOptions": {
    "ecmaVersion": 13
  },
  "plugins": [],
  "rules": {
    "vue/multi-word-component-names": "off",
    "prettier/prettier": ["error", { "printWidth": 120 }]
  },
  "globals": {
    "NodeJS": true
  }
}
```
### `rules`と`globals`の部分
#### "vue/multi-word-component-names": "off"
- これを設定しないと、linterを実行したタイミングで、`「Component name "" should always be multi-word」`というエラーが発生する
- 以下の記事を参考にして設定するとエラーが出なくなった
    - [Nuxt 3 触ってみる](https://zenn.dev/korosuke613/scraps/7155762df0c293)
    - [コンポーネント名がESLintで引っかかります](https://www.techpit.jp/courses/24/curriculums/25/sections/213/parts/757/questions/3806)

#### "prettier/prettier": ["error", { "printWidth": 120 }]の部分
- これを設定しておかないと以下のようなwarningが出る
- 自分は`"printWidth": 120`のみで良かったが他の原因の場合はそのprettierの設定を記述すると良いのではないかと思われる
```
「Replace `△△` with `⏎··········〇〇⏎········`eslintprettier/prettier」
```
- 以下の記事にて解決した
    - https://github.com/prettier/eslint-plugin-prettier/issues/102#issuecomment-826315412

#### 'NodeJS' is not defined no-undefというエラー
- 今回のプロジェクトでsetIntervalを使用しているのですが、typescriptによる型定義をしたタイミングで`'NodeJS' is not defined no-undef`というエラーが発生してしまう。
- ちなみに、setIntervalの引数と返り値の型は以下のようになっている
```ts
function setInterval<[]>(callback: () => void, ms?: number): NodeJS.Timer (+2 overloads)
namespace setInterval
```
- 以下の記事を参考にするとエラーが消えた
    - [eslint error 'NodeJS' is not defined no-undef](https://github.com/Chatie/eslint-config/issues/45)

## vscodeの設定

- .vscode/settings.json
    - プロジェクト直下に上記のファイルを作成
    - 以下を設定するすることで、プロジェクトの他のメンバーと設定を合わせることができる

```json:settings.json
{
	"editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.format.enable": false,
	// cmd+sを押すと同時にformatterを適用
  "editor.formatOnSave": true,
	// prettierをデフォルトのformatterとして使用
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.packageManager": "npm",
	// デフォルトのインデント幅がスペース2個分になる
  "editor.tabSize": 2,
	// phpではintelephenseをformatterとして使用
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}
```

## tabSizeが違うと出る赤いインデント幅
- vscodeのデフォルトのtabSizeは4だが、prettierのデフォルトのtabWidthが2になっているから以下の写真のようになる
    - こういう感じでformatterを指定したときにインデントの箇所が赤くなってしまう    
- prettierとvscodeのtabSizeを合わせてやると良いかも
    - 本来はprettierに設定していればvscodeは変える必要がない気もするが、自分はvscodeの方にも設定する必要があった
    - 個人的にはvscodeの方を2にするのが好きではある

![Untitledのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323207/777f8dd4-bd01-25b7-259a-5bd6c75696ae.png)

## 参考記事

- [ViteでVue3のTypescript環境を構築する](https://miyauchi.dev/ja/posts/vite-vue3-typescript/)
- [Visual Studio Codeで既定のインデント幅を変更する](https://dev.classmethod.jp/articles/change-default-indent-in-vscode/)
- [【VSCode】Prettierの使い方＆おすすめ設定を紹介](https://ma-vericks.com/blog/vscode-prettier/)
- [Next.jsにPrettierを導入して設定する](https://zenn.dev/shimakaze_soft/articles/57642e22124968)