Prettier scans your files for style issues and automatically reformats your code to ensure consistent rules are being followed for indentation, spacing, semicolons, single quotes vs double quotes, etc.
We use them on our teams because:
- They keep everybody on the same page, following the same rules.
- They save time in code reviews, because we can safely ignore all style issues, and focus on things that actually matter, like the structure and semantics of our code.
- They catch errors. Prettier, not so much, but ESLint actually catches a lot of syntax errors and simple forms of type errors, such as undefined variables.
- Setting these things up is a one time cost, but the time-saving benefits compound over time.
Prettier can be run as a plugin for ESLint, which allows you to lint and format your code with a single command. Anything you can do to simplify your dev process is a win in my book. Prettier + ESLint is a match made in developer heaven.
If you’ve ever tried to run Prettier and ESLint together, you may have struggled with conflicting rules. Don’t worry! You’re not on your own. Plug in eslint-config-prettier, and all ESLint’s conflicting style rules will be disabled for you automatically.
If you’re not already using eslint-plugin-react, it can remind you to add PropTypes to your components, and eslint-plugin-react-hooks can help you catch common problems users encounter with the React hooks API. Start by installing all those as
npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
Next, you’ll need some configuration files. First, let’s ignore a bunch of stuff we don’t want to lint with
You’ll need an
.eslintrc. Here’s mine:
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
"linebreak-style": ["error", "unix"],
.prettierrc. Here’s mine:
Now you just need to add a
"lint" script to
"lint": "eslint --fix . && echo 'Lint complete.'"
I like to echo when it’s done. Otherwise, it’s just silent when there are no errors.
I also add linting to my watch script, like this:
"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",
If you’ve never used
watch, you’ll need to install it before you can use that:
npm install --save-dev watch
If you’re a Windows user, I recommend using the Linux subsystem for Windows for this stuff. I can’t guarantee all those scripts will work correctly without it.
Disclaimer disclaimer: No need for a disclaimer here. Nobody has offered me anything to say what I’m about to say.
In the video I went on a short tangent about how cool Zeit Now is. Members should watch the video to see the continuous deploy GitHub hooks in action.
Zeit Now is a great hosting service that integrates easily with GitHub to give you end-to-end continuous deployment using serverless technology. Not sure what that means or how to write “serverless” apps? No problem. Just use Next.js and let Next and Now handle all the details for you.
It’s like having the best DevOps team in the world on the payroll — without the cost of hiring full time developers to streamline your continuous delivery process. Zeit is saving us money in hosting and developer hours.
And our apps serve faster than ever thanks to Next’s automatic bundle splitting, server side rendering, and ultra-fast serverless response times, and they even integrate with the Cloudflare CDN to reduce latency to near zero in just about every part of the world.
- Even when I’m prototyping, I use TDD. When you first start using TDD, it can take 15% — 30% longer to create an initial build-out. With a year or two of experience, writing tests first can actually save you time, because you spend less time changing code, refreshing the page, and walking through workflows to test your UI changes.
- Automated lint and code formatting make developers more productive by catching errors and getting developers on the same page, allowing your team to focus code reviews on topics that are more meaningful and productive.
- Try Zeit Now.
- Hook up a watch script to run while you code to automatically lint and run your unit tests on every file save.
He enjoys a remote lifestyle with the most beautiful woman in the world.