In the recent years a big part of my job was to increase a level of code and set new standards. This was done by implementing linting, creating unit tests and implementing those in gitlab pipelines. In the content below there is an overview of the different kind of tools i implemented to achieve this goal.

By implementing prettier with a global config, all projects will have the same formatting rules. This will result in better formatted and structured code, which forces for example the same tabsizes, indenting, line-wrapping and usage of quotes.

Eslint is implemented to check the quality of typescript/javascript in all files in the project. In the eslint config there also is an implementation of the @typescript-eslint package, to also check the quality of typescript.

StyleLint is implemented to check and fix the quality of all scss files. The config follows the recommended scss rules and also standardises the order of the selectors and properties.

I implemented testing packages to be able to write unit tests for scripts and components. This was Jest at first, but after a migration to vite the tests were written with Vitest. In the npm scripts there are 3 scripts:

• npm run test
  This runs vitest with the --ui suffix that opens the vitest ui plugin in the browser with hot reload
• npm run test:unit
  This runs vitest once, can be used in the pipelines
• npm run test:coverage
  This outputs the how much coverage the tests have over the source code

The code quality solutions above needed to be implemented in the pipelines as well. In gitlab, these unit tests and linting tasks run in the pipeline when pushing to the codebase. And if one of the tasks fail, the developer is unable to merge his changes to the codebase.