Automate Code Review for a TypeScript React project - Part 2

This solution will enforce standardization and good code quality for your entire project without any scope for compromise for anyone. It will also serve as the prefect Dev IDE setup where a developer doesn’t have to learn anything new to follow the rule set, the IDE automatically fixes everything for him.

• Scope
• Setup
  • IDE
  • Spell Checker
  • Prettier
  • ESLint
  • stylelint
  • Code Coverage
  • Enforcing Rules
    • Pre-commit
    • Pull Request
    • Gated Build

Scope

We will be focussing on the following topics for enforcing standards

1. IDE Tooling and Settings
2. Code Aesthetics
3. Code Quality
4. Code Coverage
5. PR Template

Setup

stylelint

stylelint is a linter that helps you avoid errors and enforce conventions in your styles.

• Install the this extension

• Install these packages for CLI Tools

  npm install --save-dev stylelint stylelint-config-standard stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-sass-guidelines stylelint-order
  
  ## OR
  
  yarn add --dev stylelint stylelint-config-standard stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-sass-guidelines stylelint-order
  

• Create .stylelintrc.json at the root of the project and add the following configuration

  {
    "extends": ["stylelint-config-standard", "stylelint-config-sass-guidelines", "stylelint-config-recommended-scss"],
    "plugins": ["stylelint-order"],
    "rules": {
      "selector-max-id": 1,
      "number-leading-zero": null,
      "order/properties-alphabetical-order": true,
      "max-nesting-depth": 3,
      "selector-pseudo-class-no-unknown": [
        true,
        {
          "ignorePseudoClasses": ["global"]
        }
      ],
      "selector-pseudo-element-no-unknown": [
        true,
        {
          "ignorePseudoElements": ["global"]
        }
      ],
      "selector-class-pattern": [
        "^[a-z0-9]+(-?-[a-zA-Z0-9]+)*",
        {
          "message": "Class names should begin with lowercase, and can be separated by hyphens"
        }
      ],
      "order/order": ["custom-properties", "declarations"]
    }
  }
  

Code Coverage

This setup has already been covered in another article on how to Publish Code Coverage Results.

In the Jest Configuration file add the following section to enforce a high level of code coverage:

{
  "coverageThreshold": {
    "global": {
      "branches": 90,
      "functions": 90,
      "lines": 90,
      "statements": 90
    }
  }
}

Enforcing Rules

All the configurations and settings done till now will only work as a recommendation from the IDE, but in order to completely standardize we need to make the settings IDE independent. To do this we will use the CLI tools installed above.

Pre-commit

This step is run every time a commit is made. We will attach a hook to this event and run all the quality tools on the staged files. To do this we’ll leverage on husky and lint-staged packages.

npm install --save-dev husky lint-staged

## OR

yarn add --dev husky lint-staged

Add the following scripts to the project’s package.json

{
  "scripts": {
    "eslint": "eslint --ext ts,tsx",
    "lint": "npm run eslint -- src && npm run stylelint",
    "lint:fix": "npm run eslint -- --fix src && npm run stylelint:fix",
    "stylelint": "stylelint \"src/**/*.scss\" --color",
    "stylelint:fix": "stylelint \"src/**/*.scss\" --fix --color",
  }
}

These commands assume your code is in a folder called src at the root of the project and you are using SCSS style files.

Create the following two files at the root of the project:

• .huskyrc

  {
    "hooks": {
      "pre-commit": "npm run build && npx lint-staged"
    }
  }
  

• .lintstagedrc

  {
    "*.{ts,tsx,js,jsx}": ["prettier --write", "eslint --fix"],
    "*.scss": ["prettier --write", "stylelint --fix"],
    "*.json": ["prettier --write"],
    "*.md": ["prettier --write"]
  }
  

Pull Request

Based on your Git provider (GitHub, Azure DevOps, BitBucket, GitLab, etc.) create it respective configuration folder at the root and then create a file named pull_request_template.md within it.

e.g.

.github > pull_request_template.md

Within this file add a form/ template which will be automatically added to each and every PR raised.

# Changes

---

{Description}

## Screenshots

---

### IE 11

### Edge/ Chrome

## Checklist

---

- [ ] Global Code Coverage not reduced by more than 1%
- [ ] Any stale features in the same area of code as this PR have been factored out

Gated Build

More details on how to configure other settings can be found in Part 1 of this guide.