Table of contents⌗

  1. Introduction
  2. How to fix
  3. Conclusion

Introduction⌗

Prettier is a code formatting tool that is synonymous with JavaScript projects. It’s a lifesaver. However, some times even after having an elaborate setup, you end up coming across issues that emanate from your code editor or just a bad day. One of the common issues that you might face is this one:

Checking formatting...
[warn] packages/mgt-components/src/utils/Utils.ts
[warn] packages/mgt-components/src/utils/WindowSegmentHelpers.ts
[warn] packages/mgt-element/src/providers/Providers.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

These warnings have flagged a number of files that have code which has violated rules that have been set up in the particular project.

How to fix⌗

Before we dive into how to fix the issue, you have to note a few things:

  1. This fix assumes that you have prettier or prettier-eslint set up in your project.
  2. You have used prettier in the project before and it was working as expected.
  3. You have prettier locally installed in your project or globally using yarn add -g prettier or npm i -g prettier.
  4. You’re using yarn or npm for package management.

Now, usually you will have prettier setup to run in your project after you save a file. However, some people prefer having the project formatting and checks to be done by the developer or before a commit is made.

In these cases, the prettier command which is run is usually:

yarn run prettier --check .

What this command does is that it checks your project to see if the prettier tool has been run on the project. When it’s successful, a true value is returned, otherwise, it will print the problems in the various files like shown above.

To fix the errors, you have to run prettier on the project. This is achieved by using the following command:

yarn run prettier --write .

This commands will perform the check on the project files based on the config of prettier.

It will try to fix the errors and those that it can’t will be shown in the final output.

Conclusion⌗

We have seen how you fix prettier errors that have to do with the code style.

The main thing to consider doing when using prettier is to set it up to run the write command after each save of a file and also to run the check command before the file is committed to version control.

To summarize the code:

yarn add prettier -g
yarn run prettier --write .
yarn run prettier --check .