Project Patterns and Tools - Prettier

The last tool we are going to configure is Prettier.

Prettier is another tool to make our code format with the same standard for the whole team. It consist in makes your code as the same as the rest of your code. By using Prettier, your team will, or maybe not, skips all disagreements about spacing, semicolons, commas, etc, because Prettier will re-formatt the code as your configuration.

Before we begin the configuration, be aware you will need to remove Prettier - Code Formatter from your VSCode because it can cause some incompatibilities with our configuration.

Starting the configuration

Remember that, all these configuration will be the same for NodeJS, ReactJS and React Native.

We will start with the Prettier package installation by run the command below:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Three dependencies will be added to format the code and integrate Prettier with ESLint.

After that instalation, we have to change the files .eslintrc.json adding the lines below in to "extends":

"prettier/@typescript-eslint",
"plugin:prettier/recommended"

and we need to add "prettier" configuration in to "plugins" option:

"plugins": [
        "@typescript-eslint",
        "prettier"
    ]

For "rules" I'm gonna add one line to enable ESLint display all errors where Prettier can not lead the corrections.

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"

So, the final file should be like this:

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

After all those configurations, chances are you got some conflicts between ESLint and Prettier.

To sort this conflicts out we are going to create a file at the project's root named "prettier.config.js" and add the lines below:

module.export = {
    singleQuote: true,
    trailingComma: 'all',
    arrowParens: 'avoid',
}

Conclusion

Don't bother yourself by manually formatting your code. We know it takes time that can be better spent writing more code and also and can be different from your teammates.

Take advantage of the amazing modern tools out there and set up EditorConfig, ESLint and Prettier for your projects!

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.
Say Hi 👋! on Twitter - Instagram - Facebook - LinkedIn