Using Prettier With SublimeText

Recently I discovered a great code formatter for JavaScript called Prettier and fell in love with it. It’s great because it’s a very opinionated code formatter that can automatically format your code.

It can automatically update code like turning double quotes into single quotes or adjust indentation.These things are great especially for establishing consistency when working with multiple developers on a team.

Another great thing about Prettier is that it should work with all major code editors such as Atom, Microsoft Visual Studio, and WebStorm. But the editor I like to use is SublimeText so I will show you how to get this running with your projects in SublimeText.

The first thing you need to do is install the JsPrettier package in Sublime. You can do that by opening the command pallet, type “install package” and then hit enter. On the next screen enter in “JsPrettier” and then make sure JsPrettier is selected from the results and hit enter. That will install the plugin.

You can change the settings for JsPrettier by pointing to Preferences in the menu and then Package Settings, JsPrettier, Settings — User. The settings I generally use are the following:

You can also configure a project specific configuration by creating a .prettierrc file within the root of your project.

As the documentation for the plugin says that you just installed you will now have to install the prettier module within your project either using NPM or Yarn.

The command you would use to install it locally in your project with NPM is:

npm --save-dev install prettier

The command you would use to install it locally in your project using Yarn is:

yarn add prettier --dev

Once that is done you should notice your code being formatted on save. You can test this by adding some Javascript without a semi colon at the end of the line.

If that doesn’t work you may need to restart your editor for this to work.

This will also work with Eslint if you use that with your projects also. Just there’s a couple things you’ll have to change with your Eslint configuration.

One of the first things you would need to do is install the eslint-config-prettier module.

To install it using NPM run the following command:

npm --save-dev install eslint-config-prettier

To install using Yarn run the following command:

yarn add eslint-config-prettier --dev

You then have to add Prettier to the extends option in your Eslint configuration file. It would look like the following:

{
   ...
   extends: ['prettier']
   ...
}

Once that is complete both Prettier and Eslint should work together.

Your code should then become more consistent.