<aside> 🌿 【ESLintとPrettierとは】

▼ESLint **・**jsのための静的検証ツール **・**ファイル内のバグチェックやコーディングスタイルの一貫性を保つ **▼Prettier ・**コードフォーマッター **・**ルールに則ってソースコードを整形してくれる **・**プロジェクトごとにルールを設定する

</aside>

■目次

0. プロジェクトをGitHubにプッシュしておく

1. リモートリポジトリ作成時に、.gitignoreも作成されるようチェック？しておく

2. 作成したらSSHになっていることを確認した上で、一番上に表示されているコマンドをコピー

3. VSCodeのターミナルに貼り付け、実行

4. リモートリポジトリを確認（多分READMEだけプッシュされていると思う）

5. ルートディレクトリに.gitignoreが作成されているか確認

   なければ touch .gitignore コマンドを叩き作成する

6. .gitignoreに以下を貼り付ける

   最低でもnode_modulesは絶対

   # dependencies
   /node_modules
   /.pnp
   .pnp.js
   
   # testing
   /coverage
   
   # production
   /build
   
   # misc
   .DS_Store
   .env.local
   .env.development.local
   .env.test.local
   .env.production.local
   
   npm-debug.log*
   yarn-debug.log*
   yarn-error.log*
   

7. SourceTreeを開き、「既存のローカルリポジトリを追加」から該当プロジェクトを追加

8. コミット＆プッシュ

9. リモートに反映されたか確認する

1. パッケージをインストールする

1. VSCodeで該当プロジェクトとターミナルを開く

2. 以下コマンドを叩き、各パッケージをインストールする

   <aside> 🌿 huskyとlint-stagedはGitHubを使う場合に使用。 必ずgit init してからインストールすること！

   </aside>

   npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky
   

   • eslint-config-prettier：ESLintとPrettierを併用する際に必要
   • @typescript-eslint/parser：ESLintでTypeScriptを解析できるようにする
   • @typescript-eslint/eslint-plugin：ESLintでTypeScriptのチェックを行うプラグイン
     • プラグイン一覧：https://typescript-eslint.io/rules/
   • husky：Gitコマンドをフックに、別のコマンドを呼び出せる
   • lint-staged：commitしたファイル（stagingにあるファイル）にlintを実行することができる　←husky v8.0.1以降では不要になった

2. Prettierの設定

1. ルートディレクトリに.prettierrcファイルを作成し、以下を貼り付ける

   {
   	"printWidth": 120, // デフォルトは80
   	"singleQuote": true,
   	"semi": false // セミコロンをつけるかどうか。trueでつける
   }
   

   

   https://www.youtube.com/watch?v=R35LJL6a-p0&list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad&index=3

3. ESLintの設定