The short answer: Run npx poetic

Arian Acosta
Sep 9 · 4 min read

We’ve all been there; we have a new project and we want it to follow the best code style practices. The benefits are ample — getting automatic syntax corrections and proper format sounds like a dream. So we rush online to get the latest tutorial on how to configure a linter, a formatter, and some rules, but we quickly realize that it can be challenging with tons of things to do.

Up until now, the process often involved adding a bunch of dependencies for the tools, the plugins and the linting rules (also making sure that those are compatible between them), configuring each one independently, setting up the extensions in your IDE, and finally, a long process tweaking to make it all work together. Yes, we got it! After a few hours…

Linters and formatters are amazing tools, but setting it all up is cumbersome. It often discourages new developers, and more experienced ones rarely have the time to deal with it. As a result, many projects end up with incorrect code style configurations or with none at all.

Introducing Poetic

Poetic is an open-source NPM package that automatically installs and configures ESLint, Prettier, and EditorConfig with the Airbnb and ESLint Recommended rules for JavaScript, TypeScript and React.

Installing Poetic NPM
Installing Poetic NPM

The goal of Poetic is to simplify the setup and maintenance of code styling tools and rules while allowing full customization.

npx poetic

When you run this, it adds the necessary configuration files to your project and installs the dependencies for you. The concept is similar to create-react-app in that you have a single dependency that manages sub-dependencies, so you can rest assured that they will interoperate nicely.

Most projects use a similar code style. In the past years, there has been great progress in the JavaScript community to come up with a consensus of what is considered a good practice and the Airbnb Style Guide is the most popular one due to its in-depth explanation of the rationale behind each rule. However, not every project is the same, and some of them require special rules that are best suited for them.

NPM: https://www.npmjs.com/package/poetic

Customizing Poetic for your Project

The motto of Poetic is to make code styling tools accessible to any project. It is fully customizable with the same files and configurations you are used to.

You can set your own ESLint, TypeScript and Prettier rules while keeping a curated set of base rules that are widely used in the JS community.

Diagram of Poetic configuration structure
Diagram of Poetic configuration structure

Poetic provides a set of base configurations that are maintained over time, but you can bring your own project settings. Because your configurations will extend Poetic’s, you get the best of both worlds: automatic updates and customization.

This feature makes it particularly simple to share configurations across projects. By installing Poetic on all of them, it is guaranteed that they all have the same underlying dependencies.

It’s IDE Friendly

It’s great to get instant feedback when typing code. It increases our productivity and reduces errors. Most modern editors support plugins or extensions. Poetic comes preconfigured for Visual Studio Code, but it’s compatible with any editor. Also, some IDE’s like WebStorm already come with them out-of-the-box. To take full advantage of these features make sure to install the following:

Example of an ESLint error in Visual Studio Code
Example of an ESLint error in Visual Studio Code
Example of an ESLint error in Visual Studio Code

It’s CLI Friendly Too

If you want to lint or format from the command line — maybe with a pre-commit hook (with Husky) or on your CI pipeline — you can use one of the NPM scripts added by Poetic to your package.json

  • yarn code:clean (Lints and formats)
  • yarn code:lint (Lint only)
  • yarn code:format (Format only)

There’s also another handy command that checks all the linting rules in search of interoperability issues. Use this to find out if one of your custom ESLint rules is fighting Prettier:

  • yarn code:check:rules (Checks rule interoperability)

Conclusion

As developers we want our code to be as elegant as possible without having to spend too much time on the tooling to accomplish it. Poetic is a new alternative that promotes code style and best practices, by minimizing the setup and maintenance time. It is by no means meant to fit every project out there, but it is a comprehensive starting point that hopefully is useful to you.

Contributing

We are trying to make Poetic helpful to everyone. That means trying to understand people’s needs and implement generic solutions that save you time. We just launched Poetic with support of JS, TS and React, but we plan to continue adding support for other popular setups as well.

Please, give it a try. It takes just a few seconds to install, and if you don’t like it, just discard the changes.

Github Issues and Pull Requests are welcome. It’s a great opportunity to be an early contributor to a cool open-source project. If you have ideas you would like to see on Poetic, please submit an issue or reach out via Twitter.

Github: https://github.com/arianacosta/poetic

Spread the ❤️ about Poetic

JavaScript in Plain English

Learn the web's most important programming language.

Arian Acosta

Written by

Full-stack developer, cloud enthusiast, and technology explorer. Twitter: @arian3k

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade