How to Setup Eslint, Prettier, and Babel for your React Project medium.com3 years ago in #Dev Love26

Building high-quality apps these days is hard. That’s why nowadays, there are many tools that allow us to write quality code and make sure our apps don’t break. You may think of testing tools like Jest at first, but before even writing a test, you can prevent many head-scratching situations. In this article, we will overview the process, how I set up these tools for a React project. First of all, you need to install Prettier. For using this tool you need to install Prettier: npm install -D prettier Now you have Prettier installed and from now with a little config, your code will be always consistent. I’m sure many of you were work on projects where some files have tabs, some spaces, or have a trailing comma and others don’t… Prettier is a project which takes all the conversation out of context and it standardizes to a predefined style. So everyone will be on the same format. I actually, really don’t care about how is my code looks like as long as it’s well-formatted and consistent. The great thing Prettier does this for us. Configurate Prettier You can run from the command line as an npm script: “scripts”: {“format”: “prettier “src/**/*.{js,html}” –write”,clicks’))} Or install the plugin and just add to your vscode config this two lines (without my comments): “editor.formatOnSave”: true, // enable a formatter to format on save“prettier.requireConfig”: true, // prettier only run if installed And create a file in the project root directory named .prettierrc with an empty object {} in it (it means you will use the default settings). And that’s it Prettier is installed in your project. And now if you press ctr+s Prettier will run so you can focus more on your code. URL Out – – medium.comDate – 2019-12-27 01:40:13

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply