Introduce Prettier to format files before git commit

[kalpeshsingh]

This is part of main issue #457

Motivation

When multiple people contribute then it gets out of hand when we don't enforce code formatting. We can use tools like Prettier to make formatting consistent in a codebase without manual effort.

Steps to achieve

Assuming you have prettier at global level.

• Add .prettierrc file for configuration (feel free to add your team's decided configuration)

{
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 2
}

• Add npm script

  "scripts": {
    ...
    "format": "prettier --write"
  },

• Update lint-staged configuration

Before

  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

After

 "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint"
    ],
    "*.{js,vue,json,css,md}": [
      "npm run format"
    ]
  }

Additional changes

• Upgraded lint-staged to ^10.3.0 (so we don't need to use "git add in lint-staged)
• Added prettier so developers don't need to install it at global level

🚧 Words of caution

• You need to run npm run format to fix existing formatting issues in all the files. I want to give this opportunity to one of the contributor as it will affect 132 files will require a sanity testing.

[kalpeshsingh]

Closing this as PR is merged.
Thank you @souvikbasu 🥳