【Prettier/ESlint】「おや・・・？npm run lint-fixのようすが・・？」「No files matching the pattern なっちゃらってエラーが・・」

![こんにちはせかい.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/f28ce378-32ed-9b64-e99d-330f01e8d98a.jpeg)
こんにちは。ポートフォリオがいい感じになったとたん燃え尽き症候群に悩まされ始めたSarasaです。
力技プログラミングにも限界を感じ、今更になって「**もしかして基礎が徹底できてない私ってヤバすぎ！？**」なことに気が付きました。

「今までやってきたフロンドエンドの領域で何か新しいこと挑戦できないかな～」
「どうやらチームで開発するときは``webpack``で環境構築したり、TypeScriptで型定義とやらができるといいらしいぞ！！」

「よし！さっそくはじめるぞい！！」

# 環境構築が終わらない
教材として活用したのはこちら
https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad

これまでは``creat-react-app``で楽々プログラミングライフを送っていたのですが、``webpack``めっちゃ時間かかる・・涙目
（``creat-react-app``ってすごかったんやな・・

しかし、``webpack``を学ばねければ出会えなかった素敵なツールと出会ってしまいました。

その名も**ESlint**と**Prettier**

この二つ、
<dl>
<dt>ESlint</dt>
<dd>「コードの構文チェックなら私に任せて！！」</dd>
<dt>Prettier</dt>
<dd>「ESlintだけだと頼りないから俺がコードの整形を担当するぞ！」</dd>
</dl>

という自動でコードをきれいにしてくれる神ツールらしいのです・・・！

早速導入だあ～

# 導入編
まずパッケージをインストールします。

```
npm install --save-dev eslint eslint-config-prettier prettier
```
次に、``package.json``の設定をいじっていきます。

```package.json
 "scripts": {
    "build": "webpack --mode=production",
    "start": "webpack-cli serve --mode development",
//ここから追記
    "lint": "eslint --fix 'src/**/*.{js,ts}'",
    "lint-fix": "eslint --fix './src/**/*.{js,ts}' 
                && prettier --write './src/**/*.{js,ts}'"
//ここまで
            },
```
``"lint-fix"``で、ESlintとPrettierそれぞれの役割分担を記載します。
ここでは、ESlintは構文の変なところをチェック、Prettierは修正を担当するという役割になっています。

ついでに、ESlintの設定もいじります。
```.eslintrc.js
extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended", 
      "prettier",
      "prettier/@typescript-eslint",
    ],

```

「んなこと言ってもほんとにちゃんとし仕事してくれるのか・・？」

という疑問がわいてきたのでチェック対象であるsrcフォルダ内のファイルを、ちょっと汚い感じのコードにしてみます。

```hello.ts
export default class World {
  message: string

  constructor(message: string) {
    this.message = message
  }

  public sayHello(elem: HTMLElement | null) {
    if (elem) {
      elem.innerText = this.message
    }
  }



}

```
最後の}をめっちゃスペース空けてみます。

この状態でコードを美しくする呪文``npm run lint-fix``を実行してみます。
すると、
![認識してくれない.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/cb747c1b-0677-410d-d337-f43a04b93b04.png)

怒られました。え？ファイル認識してくれないってどゆこと？？

# 「あなたのPCはMacですか？Windowsですか？」
どうやらパスのくくり方が**Mac**とOKだけど**Windows**で異なるらしいです。
調べれてみても
「シングルクオーテーション``''``でパスを囲めばエラー消えるぞ！」
って記載が多かったので「いや、それで動かないんですけどおお」となってしまったんですけどね。
（にしても結構調べるの苦戦したからプログラミングの世界だとWindowはマイノリティ・・？

ちなみにWindowsだと**ダブルクォーテーション**``""``でくくるのが正解。

```package.json
 "lint": "eslint \"./src/**/*.{js,ts}\"",
    "lint-fix": "eslint --fix \"./src/**/*.{js,ts}\"
                 && prettier --write \"./src/**/*.{js,ts}\""
```
改めて``npm run lint-fix``でhello.tsをきれいにしてみます。
えい！！
![エラー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/d7a16e14-f1e5-483a-6b51-487c56ada46b.png)
（うーん、エラーの表示は変わったけど、相変わらず動かんぞ・・？

# 「ちゃんとバージョンは確認した？？」
「写経してるのになんかエラー出るなあ・・」というときありがちなのが**参考元と自分のインストールしたパッケージのバージョンが異なっていること**。

エラーの内容を調べてみると、どうやら2021-02-21の時点で ``prettier/@typescript-eslint``の記載が不要になっていたよう。
レッツコメントアウト
```.eslintrc.js
extends: [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended", 
      "prettier",
      // "prettier/@typescript-eslint",
    ],
```
パスの記載よし、バージョン確認よし・・``npm run lint-fix``だ・・！！
![動いたああ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/e388d0d5-5129-a32f-2e13-65cf7b063b9a.png)
う、動いたぞコイツ・・！！

※ちなみに、``"prettier"``をコメントアウトしても動きました。（詳しいことは勉強中）

# 結論：ハマる要因は一つとは限らない
これって初心者あるあるだと思うのですが、「書いてある通りに動かせばコード書けるんじゃね？」思考に陥るとマジで根本的な要因見落とします涙

「コード書いた人と私の前提同じ？？」

となったら、OSやバージョンなど、コードだけではわからない要因に目を向けてみてもいい気がします。

**「マネするのはよくない」ではなく、マネて失敗したところから自分のミスしやすい部分を分析していくことが結果的に自身の学習モチベーション、知識のアップデートに繋がっていく気がします。**

# 書き終わって気づいたこと
**え？TypeScriptの話してなくね？？？**


# 参考ページ
* [日本一わかりやすいTypeScript入門【基礎編】](https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad)
* [Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d)
* [Windows 「 No files matching the pattern were found」 エラーを解決する。](https://qiita.com/sochan-dev/items/525539b5dc7e4d7f814b)
* [prettier/eslint-config-prettier](https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21)