Is there a way to get lint messages in the terminal when updating a .tsx or .js file using create-next-app with TypeScript, and ESLint . It would be nice to see lint messages in the web browser console as well. After configuring .eslintrc.json I'm able to see lint messages running npm run lint, but I'm having trouble finding a way to get lint logs on file update and/or displayed in the browser console.

I've attempted to use:
- npx create-next-app my-next-app
- npx create-next-app@v14.3.0-canary.68 my-next-canary-app

.eslintrc.json

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "next": {
      "rootDir": "packages/web-app/"
    }
  },
  "plugins": ["jsx-a11y"],
  "rules": {
    "no-unused-vars": ["warn"],
    "react/no-unescaped-entities": 0
  }
}

My IDE shows code linting hint and if I run npm run lint I get linting warnings so I know the linting is working:

./src/app/page.tsx
6:9  Warning: 'hey' is assigned a value but never used.  no-unused-vars

I appreciate any help and also realize that this feature may not be avalible through next.js.