Prettier has been getting a lot of attention recently – and rightly so; it’s a simple and effective way to ensure a consistent style across your code base. By configuring a limited set of options, you can quickly set up Prettier to format your code in your favourite IDE using one of the respective plugins (Atom, VSCode and Sublime, for example). You can then have it automatically format on save or if you prefer a little more control, on a specific key binding.

My own personal experience with various code formatters in Sublime Text 3 has been very variable – many are very good at plain Javascript but few are good at JSX. Prettier does a great job at JSX as well as Javascript, flow, Typescript, CSS, LESS and SCSS.

However, Prettier doesn’t do everything for you. It won’t apply code quality rules. So for example, it won’t check if you have unused variables in your code or whether a path you’ve specified on an import is correct.

This is why you still need a linter.

Prettier and eslint can be made to work really well together, hand in hand, when set to run on save in VSCode. Where I’ve struggled a little more has been with Sublime Text 3. It’s really important that Prettier runs first and your linter runs second and Sublime was always tripping over itself – at least in my experience.

So I came up with a way to have them play nicely together and perfectly format and lint my code every time.

Prerequisites

Learning the basics of Sublime Text 3 is outside the scope of this tutorial. I’m therefor going to assume you have Sublime Text 3 installed including the Package Manager and you know how to install new packages and configure their settings.

I’m also assuming you have eslint installed to your project or globally and you have some pre-existing configuration set up for this.

Step 1: Install Some Packages

You’re going to need all the following packages. It doesn’t matter which order you install them in.

SublimeLinter3

The base linter package you’ll need for Sublime Text 3. This allows you to later install a linter for your specific needs – in our case it will be eslint.

SublimeLinter-eslint

Building on the previous package, this enables eslint to work with Sublime Text 3

JSPrettier

The plugin that allows you to use Prettier in Sublime Text 3

ESLint-Formatter

This code formatter will use your configured eslint rules and format your code accordingly

ChainOfCommand

Run a series of commands in Sublime Text 3 from a single key binding

Step 2: JSPrettier Configuration

Open up the User Settings for JSPrettier and ensure you have auto_format_on_save set to false. You can also configure your Prettier settings now. I’ve shown mine below but you can set yours as per your own preferences.

{
  "auto_format_on_save": false,
  "prettier_options": {
    "useTabs": false,
    "printWidth": 100,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "parser": "babylon"
  }
}

Step 3: ESLint-Formatter Configuration

Open up the User Settings for ESLint-Formatter and ensure you have format_on_save set to true:

{
  "format_on_save": true
}

Step 4: Update the SublimeLinter settings

I’ve found that the default SublimeLinter delay setting may need to be increased slightly – from 0.25 to about 0.4 – but you should play with this setting to get the optimal one for your situation. You also want to make sure your lint_mode is set to background:

{
  "user": {
    // ...  
    "delay": 0.25,
    "lint_mode": "background",
    // ...
  }
}

Step 5: Set up a keybinding to format and lint your code

Open up the Keybindings screen and add the following binding:

{
  "keys": ["super+shift+s"],
  "command": "chain",
  "args": {
    "commands": [
      ["js_prettier"],
      ["save"]
    ]
  }
}

You can see I’ve assigned it to a key stroke other than my usual “save” action so I can have more control over when this gets applied. This is largely because I’m working in a project with large swaths of legacy code that I don’t want reformatted until I’m sure they’re ready. You could assign this command chain to your regular save key binding and it would work just fine.

Summary

What we’ve done here is install a few packages and a command chain that runs on a keystroke you define. That command chain calls Prettier and then saves your file, which in turn activates the ESLint-Formatter which we previously set to active on save.

And that’s all there is to it! Sure, it’s a little more involved than some other IDE’s but if it means I can get all the benefits of nicely formatted code without having to move away from Sublime Text 3, I think it’s worth it.

Feel free to comment! Have you got another method to achieve the same? Let me know!