DEV Community

Cover image for Configure the Prettier
Edson Junior de Andrade
Edson Junior de Andrade

Posted on • Edited on

1

Configure the Prettier

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
Enter fullscreen mode Exit fullscreen mode

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'}
Enter fullscreen mode Exit fullscreen mode

Finally, create a .prettierrc.json file and configure it as follows:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs