Prettier setup
Prettier is an auto-formatter for JavaScript, CSS, Sass, GraphQL, Markdown, and many more. We encourage all projects to adopt Prettier.
Engineering
Our engineering is underpinned by principles that celebrate both the integrity of code and the ambition to innovate. This manifesto champions excellence, advocates for the adoption of cutting-edge technologies, and fosters an environment of continuous intellectual growth.
On Code Quality
On Cutting-Edge Technologies
On Starting Projects
On Security
Our Tech Stack
On Design Thinking
On Workstation Setup
On Elixir
On Frontend
On Toolchain
On Rails
How to set up Prettier
Add packages Add the prettier package. (Please avoid the prettier-cli package and some others; see Deprecated packages for info.)
yarn add --dev prettier
Configure Prettier Save a file called .prettierrc in your project's root path. This configuration roughly mimics the styling rules of Standard JS.
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true
}
Add scripts Add these scripts to package.json. Be sure to change the path globs.
"scripts": {
"prettier:check": "prettier --list-different 'styles/**/*.scss' 'scripts/**/*.{js,jsx,ts,tsx}'",
"prettier:fix": "prettier --write 'styles/**/*.scss' 'scripts/**/*.{js,jsx,ts,tsx}'"
}
Run in CI Add prettier:check to CI. Here's an example for Semahpore CI:
if grep prettier:check package.json >/dev/null; then yarn run prettier:check; fi
Set up your editor
(Optional but highly recommended) Get everyone's {vscode,atom,emacs,vim} editors to run Prettier on save. See Editor Support on prettier.io
Gotchas
• Be sure that you're linting the correct file types. For instance, you may need to include {ts,tsx} for TypeScript projects.
Interoperability with other tools
To use Prettier with other tools, you may need to install the corresponding x-config-prettier package for those tools. For instance: • Stylelint: Use stylelint-config-prettier, and add { "extends": [ "stylelint-config-prettier" ] } to your Stylelint config. • Eslint: Use eslint-config-prettier, and add { "extends": [ "eslint-config-prettier" ] } to your Eslint config. • Tslint: Use tslint-config-prettier, and add { "extends": [ "tslint-config-prettier" ] } to your Tslint config.
Deprecated practices
• Avoid prettier-eslint, use x-config-prettier packages instead. (Jan 2019) This greatly simplifies our Prettier setup and makes Prettier integrate better into other tools. • Avoid prettier-cli, use prettier instead. (Jan 2019) This is to avoid the issue of yarn not being able to run the prettier command. Prettier's official docs on CLI.
Insights, Forward Thinking.
Dive into our latest musings and discoveries. Our blog is a window to the trends shaping the future and reflections on our journey.
Exploring horizons, sharing insights.
Designing for Scalability: Engineering Challenges and Strategies
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
Agile Evolution: Adapting Strategy for Fast-Paced Tech Development
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
Innovation at the Intersection: How Diverse Cultures are Shaping Tech
From building minimum-viable-products to managing existing products, we created product teams and managed them within Mashup Garage. We work with companies of different stages and together we built products and launched them.
Connect.
Mashup Garage, a premier software development team, specialises in crafting exceptional products for startups and enterprises. With expertise in React, Elixir/Phoenix, and Ruby on Rails, we deliver solutions that meet your unique needs. Our mission is to bring value backed by decades of technical expertise and global co-founding experience.
What do you need help with?
Build a project
Build a team
Consult
Speak to someone
Expect a guaranteed response from us in 1-2 business days.
United Kingdom
London
Islington, London
+44 738 777 3405
LDN
Philippines
Manila
3F Topy IV Building, 3 Economia Road, Bagumbayan, Quezon City, 1110
+63 917 3084089
MNL