Hello Developers, Have you tried Prettier yet? If you do one of the common errors that you will see is “prettier.resolveConfig.sync is not a function”.
This is one of the common errors, usually, you will come across “Prettier 3.0.0 TypeError” when you are installing it or upgrading it from an older version.
Let’s first understand what is Prettier.
What is Prettier and Why do Developers use it?
Prettier is a code formatting tool that is used to format written code. There are various languages available and it’s become hard to generalise it. The developers have different kinds of code-writing habits which are now causing the trouble of readability since one thing can be written in multiple syntax. Some developers write in indented blocks some don’t. Some use a tab while some use space. Even though logical code is the same but still representation writing code is completely different
To overcome this issue and to standardize written code Prettier came into the picture. Because of the prettier now anyone can write in any style and Prettier will automatically format the code for you. There are various customization is also available you can read them in Prettier Configurations.
What is the “Prettier.resolveConfig.sync is not a function” error?
Prettier TypeError generally when you tried to access Prettier but forget to install it also it can also happen when you have not configured prettier properly. Updating prettier to the latest Version can also be an issue.
There can be multiple causes for this issue let’s review them one by one and their solution
Solution 1: Incompatability between Prettier and Eslint
I checked the official Prettier and eslint-plugin-prettier plugins and came to know that there is an incompatibility between prettier and eslint-plugin-prettier.
A specific version of Prettier is only compatible with the specific version of the eslint-plugin-prettier plugin. So check whether there is a compatibility issue or not.
For example, let’s say you are using Prettier 3 along with eslint-plugin-prettier 4.
These two versions are incompatible. You can easily solve this issue by just installing a compatible version of eslint-plugin-prettier. In this scenario, it is eslint-plugin-prettier version 5
you can easily install any particular prettier version by simply running the npm command or yarn command.
npm install --save-dev eslint-plugin-prettier@5.0.0or
yarn add -D eslint-plugin-prettier@5.0.0“–save-dev” and/or “-D” flag is used to specify to save the package as a dev package since we don’t want it prettier to get shipped into the production server. Prettier is only useful for developers it’s not useful for end users so it’s better to save it in the dev packages
Also Read: https://pratikpathak.com/top-vscode-extension/
Solution 2: Downgrading Prettier to Older version.
The easiest and most common way to solve “prettier.resolveConfig.sync is not a function” is just by downgrading the prettier to an older version.
This is the easiest and fastest method, you just revert back to the old version, and voila your problem is gone now.
How to downgrade Prettier to an older version?
Downgrading NPM packages is a very simple task, firstly uninstall any pre-installed package and then run this command
npm install --save-dev eslint-plugin-prettier@versionNumberin place of “versionNumber,” You have to write your required version number
Example:
npm install --save-dev eslint-plugin-prettier@4.0.0Solution 3: Installing Prettier
This may sound absurd but most of the time we as developer forgot to install the prettier itself since we work parallel in lot of task which leads to “prettier.resolveConfig.sync is not a function”
Just make sure you have installed the Prettier in your system and try again.
Solution 4: Reinstalling Prettier
Even after going through all of the solutions if you still face issues then I will recommend you reinstall all the packages again. Make a clean installation of the packages and try again.
Last few words…
Prettier has now become the backbone for code writing. We all should use prettier in order to standardize the code writing, this will be the best method. While using Prettier for the first time you may encounter many issues, let these issue come because the more you face the more you learn, if you are stuck at any point don’t forget to comment section right below.