I've done on setting up a boilerplate project with 4 statistic analysis tools for React framework(using create-react-app), you can find it out here.

In case you wonder why we need these tools, you can imagine these tools are kind of like a person checking your code to see if there's an error every time you are viewing a file, saving a file, and even when you're submitting your codes, and they are totally free, it just needs some setup.

The tools included in the project are:

1. Eslint (mainly used to check code errors)
2. Prettier (a code formatter with little configuration rules )
3. Stylelint (checking on style issues)
4. Typescript (type check, really helpful for a project with more than a few developers)

These four are pretty popular right now, the one that might need an explanation is Stylelint, it's kind of like an Eslint working on Styles files, such as CSS, and SCSS. it can spot errors such as 'duplicated selectors and overridden properties, but also enforce specific code styles on your project. with these four statistic analysis tools combined together, we can format and check js, ts, jsx, tsx, css, scss, html, md, json files, those you'll encounter doing Front-end development.

Beyond that, it utilizes the lint-stage, husky library to automatically do static analysis with the tools mentioned above before one can submit their commit.

Integrate these tools in your VSCode(optional)

add this snippet to your setting.json in your VSCode to enable code check on viewing and saving files:

{
  ...
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "stylelint.validate": ["css", "less", "postcss", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
  ...
}

p.s. the check using Typescript will check all files in the project instead of those changes files in your commit. Because when making changes in one file might violate a type check on other files if the same types are being used on other files too.