[UI] feat: Setup prettier and moved lint-staged to its own file

[nebula-aac]

Notes for Reviewers

This PR fixes #8661

Here is the proposed prettier config, where some of the existing formatting rules in eslint can be migrated to allow Prettier format the files for you.

arrowParens: always
bracketSameLine: false
bracketSpacing: true
jsxSingleQuote: false
proseWrap: preserve
quoteProps: as-needed
semi: true
singleQuote: true
tabWidth: 2
trailingComma: all
printWidth: 100
useTabs: false

I'm testing other rules, and may have removed something that you feel that it should be in the current config.

Please note that in order for this rules to work, you need to use next lint instead of eslint to lint the files, because eslint and next lint works differently from each other.

The lint-staged has been moved to its own config file for clarity and also takes care linting and formatting with the scripts available.

Feedback is welcomed, and this PR is by no means the definite PR, this can be improved with the configs.

Signed commits

• Yes, I signed my commits.

[cypress]

Passing run #1271 ↗︎

0

6

4

0

0

Details:

Merge 8ffded1 into 6640f6f...
Project: Meshery	Commit: 07d473419b ℹ️
Status: Passed	Duration: 00:56 💡
Started: Sep 24, 2023 5:17 PM	Ended: Sep 24, 2023 5:18 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[Abhishek-kumar09]

The lint changes looks good. Since, I am not aware of the motivation behind due to lack of availability, I would comment less. But the new config looks good.

[Yashsharma1911]

@nebula-aac All looks good though I have a question should be doing same for meshery cloud as we are not using next Image there too, and getting bunch of lint error on that or we should not silence it?

[nebula-aac]

@Yashsharma1911 I have it turned off now because in using Image from Next, it requires the width and height to be used, and some of the images we have, we're doing without. It would be a good idea to turn it off in Meshery Cloud too.

[nebula-aac]

@Yashsharma1911 can you approve again? I updated the lint staged to fix the linting at commits

[Yashsharma1911]

Sure

[leecalcote]

tabWidth: 2 - nice.

[leecalcote]

Could we please have these notes added to one or more of the contributing docs on docs.meshery.io?

[leecalcote]

Updates needed in:

1. UI Docs https://docs.meshery.io/project/contributing/contributing-ui
2. Windows Docs - https://docs.meshery.io/project/contributing/meshery-windows

What instructions do we have or preconfigured settings can we share for popular IDEs like VSCode?

[nebula-aac]

Updates needed in:

1. UI Docs https://docs.meshery.io/project/contributing/contributing-ui
2. Windows Docs - https://docs.meshery.io/project/contributing/meshery-windows

What instructions do we have or preconfigured settings can we share for popular IDEs like VSCode?

I can create a separate PR for this.

At this time, VS Code will pick up whatever settings is in the prettier config, but depending on the existing setup, it may get confusing. So we may need additional configs to sure this works properly and lessen confusion. Probably by way of using VSCode settings.