03 JSHint Integration

created: "2024" tags: [software-engineering] - "#CICD" - github-actions - "#JSHint" org: - CMU goal: Integrate JSHint into CI/CD Pipeline

Integration of JSHint¶

Integrating JSHint into our development process involves setting it up locally for developers and configuring it within the CI/CD pipeline for automated syntax checks on pull requests. This end-to-end integration ensures syntax consistency and catches errors early, streamlining code quality checks from development through to deployment.

Step 1: Install JSHint¶

Local Installation: To start, install JSHint as a development dependency within your project. This allows developers to use JSHint locally before committing code.
```
npm install jshint --save-dev
```
Global Installation (Optional): Developers may also choose to install JSHint globally on their machines for quick syntax checking across multiple projects.
```
npm install -g jshint
```

Step 2: Configure JSHint¶

Create a Configuration File: In the root directory of your project, create a .jshintrc file. This file will hold the project-specific settings that JSHint will follow during analysis.
```
touch .jshintrc
```

Customize the Configuration: Inside .jshintrc, configure the rules to match your project’s needs. For example:

{
  "esversion": 9,             // Sets ECMAScript version 9 compatibility
  "node": true,               // Enables Node.js environment support
  "undef": true,              // Flags usage of undeclared variables
  "unused": true,             // Flags variables that are declared but not used
  "globals": {                // Defines project-specific global variables
    "describe": true,
    "it": true,
    "beforeEach": true,
    "jQuery": true,
    "fetch": true
  }
}

This configuration ensures JSHint aligns with your coding standards and reduces false positives on common globals.

Step 3: Add JSHint Script to `package.json`¶

To simplify running JSHint locally, add a script to your package.json file:

"scripts": {
  "lint": "jshint ."
}

Now, developers can run JSHint on their codebase by typing npm run lint in the command line. This script checks the project’s files for syntax errors before committing code.

Step 4: Integrate JSHint into CI/CD Pipeline¶

Set Up GitHub Actions: In your project’s GitHub repository, navigate to .github/workflows and create a new YAML file (e.g., jshint.yml) for GitHub Actions.

Configure JSHint Workflow: Set up the workflow to run on pull requests, automatically checking code quality before merging:

name: JSHint Lint Check

on:
  pull_request:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run JSHint
        run: npm run lint

This configuration ensures that JSHint automatically runs each time a pull request is made to the main branch. If JSHint flags any syntax issues, the action will fail, prompting developers to address the issues before the code can be merged.