Alternatives to Prettier – Popular Code Linting and Formatting Tools

Bybomber bot

As a developer, you know the importance of clean, consistent, and error-free code. But achieving that is often tedious and time-consuming, especially on larger projects with multiple contributors. That‘s where code formatters and linters come to the rescue.

One of the most popular code formatting tools today is Prettier. It‘s a versatile, opinionated formatter that supports many languages and integrates with most editors. However, it‘s not the only option out there. In this guide, we‘ll explore some compelling alternatives to Prettier and help you find the optimal code formatting workflow.

Why Look Beyond Prettier?

There‘s no doubt that Prettier is a powerful, easy-to-use tool that takes a lot of the pain out of code formatting. So why even consider alternatives? Here are a few reasons:

  • Prettier‘s opinionated nature means limited customization options
  • You may disagree with some of Prettier‘s formatting choices
  • Another tool might offer better performance for your use case
  • You need support for an unsupported language or file type
  • An alternative may fit your team‘s established style guide better

At the end of the day, the "right tool" depends on your particular needs and preferences. It‘s worth exploring the options to find your ideal fit.

Deep Dive Into Prettier Alternatives

Let‘s take an in-depth look at four leading alternatives to Prettier: JsFmt, StandardJS, ESLint with EditorConfig, and JS Beautifier. We‘ll examine their key features, formatting rules, pros and cons, and more.

JsFmt

JsFmt is a configurable JavaScript formatter built on top of the esformatter library. It aims to enforce consistent style across your project with minimal setup.

Key Features

  • Parses and formats JS, JSX, and many JS flavored files
  • Supports styling via CLI options and a .jsfmtrc config file
  • Option to fix indents, line endings, quotes, and more
  • Can rewrite/change your existing code

Formatting Rules

Some of JsFmt‘s default formatting conventions include:

  • 4 space indentation
  • Unix line endings
  • Single quotes
  • Removing trailing commas
  • Space after object keys

Most rules can be modified via the .jsfmtrc config file in JSON or INI format:

{
  "indent": 4,
  "line_ending": "unix",
  "quote": "single"
}

Pros

  • Offers good control over output via config file
  • Helpful option to rewrite selected code
  • Reasonably easy to integrate into build process

Cons

  • Fewer style options than some other tools
  • Not as actively maintained as alternatives
  • Documentation could be more comprehensive

StandardJS

StandardJS is a popular, opinionated linter and automatic formatter for JavaScript and JSX. It aims to save you time and mental energy by providing one JavaScript style guide to rule them all.

Key Features

  • Zero-config, "just works" approach
  • Automatically formats code to consistent style
  • Catches style errors and potential bugs
  • Supports auto-fix for many issues
  • Extensible via plugins

Formatting Rules

StandardJS enforces a well-defined set of rules, including:

  • 2 space indentation
  • Single quotes for strings
  • No semicolons
  • Space after keywords and function names
  • Always use === instead of ==

While you can‘t configure the StandardJS rules, you can toggle them on/off via special comments:

// standard-disable-next-line
let thing = "non-standard code"

Pros

  • No need to waste time on configuration
  • Enforces consistent style without effort
  • Catches many common bugs and pitfalls
  • Large ecosystem of plugins and editor integrations

Cons

  • Inflexible, one-size-fits-all approach
  • Disagreements over subjective style choices
  • Can be jarring if you‘re used to different conventions

ESLint + EditorConfig

ESLint is a powerful, configurable JavaScript linter that helps identify and report on patterns in your code. EditorConfig is a standard config file format for defining coding styles. Together, they provide a flexible system for consistently formatting your code.

Key Features

  • Highly customizable linting rules
  • Fix many problems automatically
  • Prevent style issues, bugs, and anti-patterns
  • Define project-wide formatting via .editorconfig
  • Support for many file types and editors

Formatting Rules

With ESLint, you have full control over your linting rules. You can extend popular style guides like Google, Airbnb, or StandardJS, or craft your own ruleset. Here‘s a sample config:

{
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }  
}

EditorConfig lets you define formatting conventions like indent style, trim whitespace, charset, and more. For example:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

Pros

  • Extremely versatile and configurable
  • Combine linting and formatting in one system
  • Well-documented with many examples
  • Integrates with nearly all editors and IDEs

Cons

  • Steep learning curve for beginners
  • Config can get complex in larger projects
  • Takes time to set up "just right"

JS Beautifier

JS Beautifier, or js-beautify, is a NPM package and CLI tool for cleaning up and formatting HTML, CSS, and JavaScript code. It offers a range of options for controlling the output style.

Key Features

  • Beautifies JS, HTML, and CSS
  • Highly configurable formatting options
  • Available as CLI, Node module, and in-browser tool
  • Can be integrated into build tools and editors

Formatting Rules

JS Beautifier provides many configuration options, which can be set via CLI flags or a .jsbeautifyrc file. Some notable options include:

  • indent_size: Indentation size (default 4)
  • indent_char: Indentation character (default space)
  • max_preserve_newlines: Max number of line breaks to preserve (default 10)
  • brace_style: Brace style for blocks (default "collapse")
  • keep_array_indentation: Preserve array indentation (default false)

Pros

  • Lots of granular formatting control
  • Easy to use for one-off formatting
  • Supports HTML and CSS alongside JavaScript
  • Online playground for quick testing

Cons

  • Not a linter, so no error checking
  • Some flags have confusing names
  • Documentation lacks depth in places

Formatting Results Comparison

To see how these tools stack up, let‘s run some sample code through each one and examine the output. Consider this messy code snippet:

const numbers=[2,3,8,9,7]
let peoples = [‘kamal‘,‘lawal‘,"shola","olaide"];

JsFmt

const numbers = [2, 3, 8, 9, 7];
let peoples = ["kamal", "lawal", "shola", "olaide"];

StandardJS

const numbers = [2, 3, 8, 9, 7]
const peoples = [‘kamal‘, ‘lawal‘, ‘shola‘, ‘olaide‘]

ESLint + EditorConfig

const numbers = [2, 3, 8, 9, 7];
let peoples = [‘kamal‘, ‘lawal‘, ‘shola‘, ‘olaide‘];

JS Beautifier

const numbers = [2, 3, 8, 9, 7];
let peoples = [‘kamal‘, ‘lawal‘, "shola", "olaide"];

As you can see, each tool has slightly different conventions, but they all make the code much more consistent and readable. The "best" output depends on your preferred coding style.

Choosing the Right Tool for Your Project

With so many great options, how do you pick the right code formatter for your needs? Here are some factors to consider:

  • Language support: Not all tools work with all languages. Pick one that supports your primary language(s).
  • Flexibility: Do you want total control, or prefer a tool that makes most choices for you? SuperSet and ESLint offer more customization than Prettier or StandardJS.
  • Ease of setup: Consider the time and effort required to configure your chosen tool. Prettier and StandardJS are easier to set up than ESLint for complex projects.
  • Team buy-in: Will your team be happy with the formatting conventions imposed? Make sure to get everyone on board to avoid constant nitpicking over style choices.
  • Editor integration: Some tools are easier to integrate with certain editors than others. Check if your editor has a plugin for your chosen tool.

Remember, the most important thing is to be consistent. Any of these tools will improve your code quality and maintainability, so don‘t agonize over the choice. You can always switch later if you change your mind.

Incorporating Formatters Into Your Workflow

Once you‘ve chosen a code formatter, you‘ll want to set it up to run automatically when you work. Here are some tips for doing that:

  • Use an editor plugin to format on save, so you never have to think about it. Most editors have plugins for popular tools like Prettier and ESLint.
  • Set up your formatter to run in your Git pre-commit hook using a tool like lint-staged or husky. This will ensure all committed code is properly formatted.
  • Make your formatter part of your automated build and CI pipeline. This will catch any unformatted code before it gets merged.

The easier you make it to format your code, the more likely you and your team will do it consistently. Automated formatting should be a core part of your development process.

Conclusion

Clean, consistent code is a hallmark of professional software development. While Prettier is a fantastic tool for achieving that, it‘s far from the only option. JsFmt, StandardJS, ESLint + EditorConfig, and JS Beautifier all bring something unique to the table.

By exploring the alternatives and finding the right fit for your projects and team, you can take your code quality to the next level. You might even enjoy writing code more when you don‘t have to worry about the little formatting details.

So go forth and format! Your codebase (and your fellow developers) will thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *