Did you find yourself stuck in a project simply because the patterns used between your colleagues is different? Probably yes!
Actually, to keep the code patterns and conventions for all companies and development teams is one of the most challenge thing they are facing.
Why does it happens? In simple term, because everyone working on this industry learned to program differently, they had different background, they have their own preferences and habits.
Because that, subjects as clean code, SOLID principles, KISS principles and so on are trends, but is there a way to try to automate or at least keep the code under some patterns defined previously?
In that post I will explain about some tools we can use to help us to keep our code under control and make our life easier when our projects is becoming bigger and more developers is join the project.
For that purpose we can use three tools to keep our code with the same standard. Those tools are EditorConfig, ESLint and Prettier.
EditorConfig
EditorConfig is a tool to help development teams work with the same pattern, doesn't matter if they are working with different IDE's as code editor.
Can you imagine if a team is working with different IDE's as VSCode, Atom, Sublime or other one? Probably they are working with different text configuration as well, so in the end of the day, we will get every sort of inconsistency in our code when we are trying to merge our code and also, when we are trying to build it.
EditorConfig can help us by given a set of configurations as the type of indentation, which charset we need to use, the end of line and so on.
If would you like to go deep in EditorConfig check it out at editorconfig.org.
ESLint
I can say ESlint maybe is one of the most important tool to automate code convention. We can use it for projects using NodeJS, ReactJS, React Native and more.
For example, ";" is optional for Javascript at the end of line and that is not a problem to run the code. But when we are creating an object, we can use "," at the last item of the object but it is optional.
With ESLint we can keep just one pattern for our team.
You can find out more at eslint.org.
Prettier
Finally, we have Prettier! That tool is used to customize our code format. It means Prettier will remove all original styling code and ensures that all outputted code conforms to a consistent style.
Prettier enforces a consistent code style across our entire codebase by parsing it away and re-printing the parser with its own rules that take the maximum line length into account, wrapping code when necessary.
If you want to get more information about it, check it out at prettier.io.
In the next post, I will show how to configure EditorConfig for VSCode and start to keep our code under control.
That's it, folks!
Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.
Top comments (4)
Prettier is awesome, but I have noticed that on different IDEs it might format code differently which still is fine but could cause some weird changes in the changes log when doing PR. Still an awesome tool that automatise the tricky code formating.
P.S. Awesome article
Thanks for your comment! Do you know which IDEs it might format that code differently?
Most notably I have seen that there can be a difference in between VScode and Webstorm
it's possible that they may be using different versions of prettier, which can cause formatting differences. make sure that the project has a locally installed version of prettier pinned to a particular version.
prettier.io/docs/en/install.html#s...
prettier.io/docs/en/editors.html