[UI] Setup Prettier

[nebula-aac]

In Meshery UI, we do not use prettier, which means our code looks different throughout each files.

Even though we have Next.js lint for its linting capabilities, the linting job is not doing all what it is supposed to do with the current rules on certain formatting. However, for a true formatter, we're not using prettier, and it would be great to set one up here in Meshery UI and also setup pre-commit hook for this.

Here is what being used in Meshery Cloud, but it can be improved.

Please note that making this change will create a large PR. So it would be necessary to check through all the files that will be formatted, and probably won't need to be formatted.

The referenced file is at https://github.com/layer5io/meshery-cloud/blob/master/ui/.prettierrc.yml

arrowParens: avoid
tabWidth: 2
trailingComma: none
printWidth: 90

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[dhiraj0911]

Hey @nebula-aac, I'd like to work on this issue, can you assign this to me?

[Yana-Gupta]

@nebula-aac I would like to work on this issue. Would you assign me.

[ShatilKhan]

Hi @nebula-aac , I would like to understand this issue a bit more. What kind of changes are we looking for?
I have some front-end experience , if possible do assign this issue to me .

[aabidsofi19]

+1 @nebula-aac

[arpitghura]

Hey, I would like to work on this issue. Can you please assign it to me? @nebula-aac