Our Journey to Prettier and ESLint: How We Adopted These Tools to Improve Our Code Quality

At Monogram, we've always strived to produce quality code. Alongside TypeScript we believe that Prettier and ESLint help us do just that by enforcing our coding standards across all of our repositories, and by giving us instant feedback on potential errors. Adopting these tools has been a great journey so far, and we've seen vast improvements in the quality and consistency of our code. We welcome your feedback on prettier and eslint – please share with us how you're using them in your own work!

We're excited to announce that we've released two npm packages that make it easy for you to adopt Prettier and ESLint in your own work. The first package, monogram-prettier, is a wrapper around prettier that makes it easy to use with all of your projects. The second package, monogram-eslint, is a wrapper around eslint that makes it easy to use with all of your projects.

Prettier

There are a lot of debates over code style within different teams. It can be frustrating trying to keep everyone happy. By adopting Prettier, you can automatically format your code so that everyone is on the same page - and stop wasting time arguing over style choices! Prettier is an extension for many popular code editors that will automatically format your code according to a set of rules. This means that you can just write your code and not worry about the formatting - Prettier will take care of it for you. Many teams have adopted Prettier as their standard for code formatting, and it's definitely worth considering for your team as well!

monogram-prettier installs in your package.json and it provides our own pre-defined prettier rules all you have to do is add install it and add it to your package.json.

Install

Install the package via npm or yarn.

yarn add --dev @monogram/prettier-config

Add it to your package.json

You must add it to your package.json for the rules to take effect.

"prettier": "@monogram/prettier-config",

Extend it

A .prettierrc.js file is not needed, but if you'd like to extend it and add your own settings feel free to use it like this.

// .prettierrc.js
module.exports = {
 ...require('@github/prettier-config'),
 tabWidth: 2,
 useTabs: false,
 overrides: [
   {
     files: '*.scss',
     options: {
       singleQuote: true,
       tabWidth: 2,
       useTabs: false,
       printWidth: 160
     }
   }
 ]
}

ESLint

ESLint is a tool for linting JavaScript code. It can be used to enforce your team's coding standards, or to help you write better code. ESLint uses a rules-based approach to linting, which allows you to configure it however you want. This means that you can customize it to fit your team's needs, and make sure that everything is compliant with industry best practices. Whether you're just starting out with code quality assurance or you're a seasoned pro, ESLint is a tool that can help you write better code.

The package that we've put together is called monogram-eslint, it installs in your project and it provides our own pre-defined ESLint rules.

Install

In order to install it you must run it via npx

npx @monogram/eslint-config

Both packages are open source and available on GitHub. We would love to hear from you about how you're using them and feel free to contribute via PRs. Please reach out to us on Twitter or GitHub. Thanks for helping us make our code quality even better!