Skip to content

Commit

Permalink
Code Formatter: Prettier
Browse files Browse the repository at this point in the history
A code formatter is a essential part of a project setup to ensure a good
and consistent code style without requiring relatively time-consuming
manual corrections found by a code linter. With code being automatically
formatted on actions like saving a file the developer can focus entirely
on the code instead of spending time and energy on indenting code line
by line.

That's where one special project comes in:
Prettier [1], the opinionated code formatter with support for almost any
language and integration with almost every popular editor.
I've been using it since the first version and I totally forgot about
the fact that formatting is even a thing. That could also be because
Gophers [2] are already used to `gofmt` [3] anyway.

Prettier is a absolute must-have for every project setup and I'm not
aware of any other projects with such advanced parsers and language
support. The only negative point is that it is written in JavaScript
instead of Go [4] so it always pulls in NodeJS [5] as a development
dependency. This is not a problem at all for web-based projects,
but for Go or any other non-NodeJS project it inflates the setup
unnecessarily.

Anyway, the fantastic developer experience and project benefits clearly
outweigh the negative points. In addition many developers today already
have Node installed locally since it's large ecosystem has already
spread by far further than just the web but already powers many system,
desktop and CLI applications.

>>> Configuration

This is one of the main features of Prettier: It already provides the
best and recommended style configurations of-out-the-box.
The only option that has been changed is the print width [6].
It is set to `80` by default which is not up-to-date for modern screens
(might only be relevant when working in terminals only like e.g. with
Vim). It has been changed to `120` like defined in all of my style
guides [7].
The `prettier.config.js` configuration file is placed in the project
root as well as the `.prettierignore` file to also define ignore
pattern.

>>> Package Script

To allow to format all sources a `format:pretty` package script has been
added that also runs in the main `format` script flow.
The new `lint:pretty` script also allows to check if all supported files
are formatted correctly. It is included in the main `lint` script flow.

[1]: https://prettier.io
[2]: https://blog.golang.org/gopher
[3]: https://golang.org/cmd/gofmt
[4]: https://go.dev
[5]: https://nodejs.org
[6]: https://prettier.io/docs/en/options.html#print-width
[7]: https://github.com/arcticicestudio?tab=repositories&q=styleguide

GH-13
  • Loading branch information
svengreb committed Jun 19, 2020
1 parent 0745977 commit 405a174
Show file tree
Hide file tree
Showing 4 changed files with 432 additions and 1 deletion.
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Copyright (c) 2020-present Sven Greb <[email protected]>
# This source code is licensed under the MIT license found in the LICENSE file.

**/node_modules/*
12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,15 @@
"url": "https://github.com/svengreb/tmpl/issues"
},
"private": true,
"license": "MIT"
"license": "MIT",
"scripts": {
"format": "run-s format:pretty",
"format:pretty": "prettier --write .",
"lint": "run-s lint:*",
"lint:pretty": "prettier --check ."
},
"devDependencies": {
"npm-run-all": "^4.1.5",
"prettier": "^2.0.5"
}
}
14 changes: 14 additions & 0 deletions prettier.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*
* Copyright (c) 2020-present Sven Greb <[email protected]>
* This source code is licensed under the MIT license found in the LICENSE file.
*/

/**
* The configuration for Prettier.
*
* @see https://prettier.io/docs/en/configuration.html
* @see https://prettier.io/docs/en/options.html
*/
module.exports = {
printWidth: 120,
};
Loading

0 comments on commit 405a174

Please sign in to comment.