Here we will install two dependencies to configure Prettier along with ESLint, the first disables the conflicting rules between Prettier and ESLint and the second transforms Prettier and its settings into ESLint rules, so we can integrate the two, come on:
If you don't have ESLint installed, check out the step-by-step guide (here).
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
Now let's update our .eslintrc
file again, let's leave our keysextends
, plugins
and rules
, in the example below I'll be configuring with react:
extends: [
"eslint:recommended",
"prettier/react",
"airbnb",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
plugins: ['react', 'prettier'],
rules: {'prettier/prettier': 'error'}
Finally, create a .prettierrc.json
file and configure it as follows:
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true
}
Top comments (0)