Eslint and prettier can be in conflict

[kisp]

Consider this App.tsx code:

import {clsx} from 'clsx'

const title = 'Hello React'
const classes = clsx('mb-5 bg-blue-500 py-5 text-center text-5xl')

function App() {
  ;[1, 2, 3].forEach(x => {
    console.log(x)
  })

  return <h1 className={classes}>{title}</h1>
}

export default App

This raises the eslint error:

/workspace/src/App.tsx
  7:3  error  Unnecessary semicolon  no-extra-semi

[kisp]

This fixes the problem

npm i -D eslint-config-prettier

And this change:

➜  /workspace git:(main) ✗ git diff .eslintrc.cjs
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1474448..553f2ac 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
+    'prettier',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',