> node -v                                                                                                                                                                                        ~/d/uzumaki
v19.5.0

❯❯❯❯ npx create-next-app@latest base_next --ts --eslint                                                                                                                                             ~/d/uzumaki
✔ Would you like to use `src/` directory with this project? … No / [Yes]
✔ Would you like to use experimental `app/` directory with this project? … [No] / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /hogehoge/base_next.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- @next/font
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 270 packages, and audited 271 packages in 13s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: default

Initialized a git repository.

Success! Created base_next at /hogehoge/base_next

const About = () => {
  const greeting = "hello";

  return (
    <>
      <h1>About me</h1>
      <h2>{greeting}</h2>
    </>
  )
};
  
export default About;

{
  "name": "base_next",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint" <= npm run lint コマンドでeslintが起動します
  },
  "dependencies": {
    "@next/font": "13.1.6",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "eslint": "8.33.0", <= eslint本体
    "eslint-config-next": "13.1.6", <= next.js向けのeslintの設定
    "next": "13.1.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.5"
  }
}

{
  "extends": "next/core-web-vitals"
} 

{
  "extends": "next"
} 

const About = () => {
  const greeting = "hello";

  return (
    <>
      <h1>About me</h1>
      <h2>{greeting}</h2>
      <img src='sample.jpg' /> <= 追加
    </>
  )
};
  
export default About;

> npm run lint

./src/pages/about.tsx
8:7  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Use `<Image />` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element
8:7  Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.  jsx-a11y/alt-text

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

npm install prettier --save-dev

npm install --save-dev eslint-config-prettier

{
  "extends": ["next/core-web-vitals", "prettier"]
}

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
		"format": "prettier --write --ignore-path .gitignore --ignore-unknown './**/*'"
  },

npm install --save-dev rome

npx rome init

{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

function test(callback) {
  try {
    return callback();
  } catch (e) {
    console.log(e);
    throw e;
  }
  return 20;
}

> npx rome check src 
                                                                                                                                                              ~/d/u/base_next feat/rome
src/badCode.ts:8:5 lint/correctness/noUnreachable ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This code will never be reached ...

    6 │       throw e;
    7 │     }
  > 8 │     return 20;
      │     ^^^^^^^^^^
    9 │   }

  ℹ ... because either this statement will return from the function ...

    1 │ function test(callback) {
    2 │     try {
  > 3 │       return callback();
      │       ^^^^^^^^^^^^^^^^^^
    4 │     } catch (e) {
    5 │       console.log(e);

  ℹ ... or this statement will throw an exception beforehand

    4 │     } catch (e) {
    5 │       console.log(e);
  > 6 │       throw e;
      │       ^^^^^^^^
    7 │     }
    8 │     return 20;


Checked 6 file(s) in 1037µs
Found 1 error(s)

{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentStyle": "space",
    "indentSize": 2,
    "lineWidth": 80,
    "ignore": ["node_modules"]
  }
}

npx rome format --trailing-comma none src

time npx prettier --write --ignore-unknown src                                                                                                                                  ~/d/u/base_next feat/rome
src/pages/_app.tsx 77ms
src/pages/_document.tsx 3ms
src/pages/about.tsx 2ms
src/pages/api/hello.ts 6ms
src/pages/index.tsx 17ms
src/styles/globals.css 22ms
src/styles/Home.module.css 12ms
npx prettier --write --ignore-unknown src  0.48s user 0.07s system 110% cpu 0.493 total

time npx rome format --write --trailing-comma es5 src                                                                                                                            ~/d/u/base_next feat/rome
Formatted 5 file(s) in 937µs
npx rome format --write --trailing-comma es5 src  0.20s user 0.06s system 80% cpu 0.313 total

npx rome ci src