Configuring ESLint, Prettier and Airbnb in 1 Line
The short answer: Run
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.
The goal of Poetic is to simplify the setup and maintenance of code styling tools and rules while allowing full customization.
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.
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.
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:
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
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)
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.
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.
Spread the ❤️ about Poetic