Also, you can integrate it with your CI/CD.
That way nobody will be able to merge to the master branch if the code is not well-formatted.
With Prettier you will be able to define your own rules, however default rules are enough at the beginning.
Your rules will be defined in a file called .prettierrc placed in your project’s root.
npm install prettier --save-dev
{
"trailingComma": "es5",
"tabWidth": 4,
"printWidth": 120,
"semi": true,
"singleQuote": false,
"useTabs": false,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"bracketSpacing": false,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"requirePragma": false,
"insertPragma": false,
"proseWrap": "preserve",
"endOfLine": "lf"
}
See more options for the .prettierrc file
npm install gulp-prettier -save-dev
gulp.task("prettier", () => {
return gulp
.src("./**/*.js")
.pipe(prettier(".prettierrc"))
.pipe(gulp.dest("./"));
});
If you are using PHP Storm, it’s highly recommended that you configure your IDE to auto-format your code every time you save a .js file
https://prettier.io/docs/en/webstorm.html The plugin will take the rules from you .prettierrc file
Configure a File Watcher in PhpStorm to auto-format the code on save.
{
"prettier.useTabs": false,
"prettier.trailingComma": "es5",
"prettier.tabWidth": 4,
"prettier.printWidth": 120,
"prettier.semi": true,
"prettier.singleQuote": false,
"prettier.quoteProps": "as-needed",
"prettier.jsxSingleQuote": false,
"prettier.bracketSpacing": false,
"prettier.jsxBracketSameLine": true,
"prettier.arrowParens": "avoid",
"prettier.proseWrap": "preserve",
"prettier.endOfLine": "lf"
}