npm -v
8.11.0

node -v
v18.3.0

# 作業ディレクトリの作成
cd /Users/user-name/Public/workspace/
mkdir eslint-sample-app

# npm設定作成（デフォルト）
npm init -y

# ESLintをプロジェクトに追加
npm i -D eslint

# 何をしたいか尋ねる
npx eslint --init

OK to proceed?
続けてよろしいですか？

How would you like use ESLint?
to check syntax only.
to check syntax and find problems.
❯  to check syntax, find problems, and enforce code style
--
ESLintをどのように使いたいですか？
構文チェックのみ行いたい
構文をチェックし、問題を発見する
❯ 構文をチェックし、問題を発見し、コードスタイルを強制する

What type of modules does your project use?
❯ JavaScript modules
CommonJS
None of these
--
あなたのプロジェクトでは、どのような種類のモジュールを使用していますか？
❯ JavaScript モジュール
CommonJS
なし

Which framework does your project use?  
React
Vue.js
❯ None of these
--
あなたのプロジェクトでは、どのフレームワークを使用していますか？... 
React
Vue.js
❯ どれも使っていない

Does your project use TypeScript? › No / Yes
--
あなたのプロジェクトはTypeScriptを使用していますか？ ❯ いいえ / はい

? Where does your code run? 
  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node
--
あなたのコードはどこで実行されますか？
(<スペース>で選択、<a>で全選択、<i>で反転します。）
✔ Browser
✔ Node

? How would you like to define a style for your project? 
❯ Use a popular style guide
  Answer questions about your style
--
プロジェクトのスタイルをどのように定義しますか？
❯ 一般的なスタイルガイドを使用する
  スタイルに関する質問に答える

? Which style guide do you want to follow? … 
  Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
❯ Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
--
どのスタイルガイドに従いますか？
  エアビーアンドビー： https://github.com/airbnb/javascript
  スタンダード： https://github.com/standard/standard
❯ Google: https://github.com/google/eslint-config-google
  XO：https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? 
  JavaScript
❯ YAML
  JSON
--
? 設定ファイルはどのような形式で作成しますか？
  JavaScript
❯ YAML
  JSON


eslint-config-google@latest eslint@>=5.16.0
? Would you like to install them now? › No / ❯ Yes
--
今すぐインストールしますか？' いいえ / ❯はい

? Which package manager do you want to use? 
❯ npm
  yarn
  pnpm
--
どのパッケージマネージャを使用しますか？
❯ npm
  yarn
  pnpm

# prettier のインストール
npm i -D --save-exact prettier

# 空の設定ファイル .prettierrc.jsonを追加して、Prettierを使用していることをエディタに知らせる。
echo {}> .prettierrc.json

# .prettierignore を追加して、除外ファイルを記載する
echo {}> .prettierignore

# Ignore artifacts:
build
coverage

# prettier の全ファイル実行
npx prettier --write .

# 例：app内のtest.jsにのみ適用
npx prettier --write "app/**/*.test.js"

# 全ファイルチェック
npx prettier --check .

# 処理済なら以下のように出る
Checking formatting...
All matched files use Prettier code style!

npm i -D eslint-config-prettier

env:
  browser: true
  es2021: true
extends:
  - google
parserOptions:
  ecmaVersion: latest
  sourceType: module
rules: {}

env:
  browser: true
  es2021: true
extends:
  - google
+ - prettier
parserOptions:
  ecmaVersion: latest
  sourceType: module
rules: {}

npx eslint-config-prettier path/to/main.js

# インストール
npm i -D husky lint-staged
npx husky install

# package.json > prepare script を追記
npm pkg set scripts.prepare="husky install"

"scripts": {
  "prepare": "husky install"
},

npx mrm@2 lint-staged

実行後
Running lint-staged...
husky - Git hooks installed
husky - updated .husky/pre-commit

# コードスタイルを自動的に修正し、コミットに追加する。
# これにより、eslint --fix が実行され、自動的にコミットに変更が加えられます。
"lint-staged": {
  "*.js": "eslint --fix"
}

# PrettierがサポートするあらゆるフォーマットのコードスタイルをPrettierで自動的に修正する
"lint-staged": {
  "**/*": "prettier --write --ignore-unknown"
}

# JavaScript、TypeScript、Markdown、HTML、CSSのprettierでコードスタイルを自動的に修正
"lint-staged": {
  "*.{js,jsx,ts,tsx,md,html,css}": "prettier --write"
}

# .husky/pre-commit ファイルに対して npx lint-staged を追記
npx husky add .husky/pre-commit "npx lint-staged"

# package.json > lint-staged script を追記
npm pkg set lint-staged."**/*"="prettier --write --ignore-unknown"

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

# インストール
npm i -D husky-init pretty-quick
# 設定追加
npx husky set .husky/pre-commit "npx pretty-quick --staged"

- repo: https://github.com/pre-commit/mirrors-prettier
  rev: "" # Use the sha or tag you want to point at
  hooks:
    - id: prettier