- Install eslint, prettier, eslint-plugin-prettier, eslint-config-prettier
- Update eslintrc file to look like this:
extends: [
'eslint:recommended',
'plugin:react/recommended', // if react is used
'plugin:react-hooks/recommended', // if react is used
'plugin:@typescript-eslint/recommended', // if ts
'plugin:prettier/recommended'
],
plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],
With this setup ESLint starts to use Prettier and its rules for code style checks and autofixes.
Moreover, now you don't need two separate commands to run ESLint and Prettier, they both will run with a single command eslint --fix.
Additional steps for VS Code:
- Install the "Prettier - Code formatter" extension
- Go to Settings and set the "Editor: Default formatter" to "Prettier - Code formatter"
- Enable "Editor: Format On Save"
