Setting up linting and testing for a full-stack project

Time is one of our most valuable commodities. We shouldn't squander it on tasks that can be easily automated. Quality checks for a project are a prime example.

Spell checking

We would never make spelling mistakes, but for the sake of our colleagues we should ensure that spelling mistakes are always caught.

First step is to install cspell and the dictionaries you would want.

npm i -D cspell @cspell/dict-html

And now we should create a cspell configuration called cspell.json.

{
    "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
    "version": "0.2",
    "language": "en",
    "dictionaries": ["corp-terms", "fonts", "typescript", "fullstack", "html"],
    "import": ["./node_modules/@cspell/dict-html/cspell-ext.json"],
    "words": ["biomejs"],
    "useGitignore": true,
    "ignorePaths": [".vscode", "./tsconfig.json"]
}

Now we can add a script in the package.json:

{
    "scripts": {
        "lint": "cspell ."
    }
}

We can now run:

npm run lint

If we get an error for something that is correct in our context, we can either add that to the words list in the cspell.json or we can run the following command to find a dictionary that has the word:

npx cspell trace colspan

To make sure that mistakes are caught immediately in the IDE, whenever our colleague borrows our machine we can also add the cspell VS Code extension to the list of recommended extensions:

.vscode/extensions.json:

{
    "recommendations": ["streetsidesoftware.code-spell-checker"]
}

Where you don't want to spellcheck things like translations, you can ignore them via the ignorePaths configuration.

ESLint

Install dependencies

npm i -D --force eslint@^9 @eslint/js typescript-eslint

Create eslint.config.mjs:

import eslint from '@eslint/js';
import tsEslint from 'typescript-eslint';

const config = tsEslint.config(
    eslint.configs.recommended,
    ...tsEslint.configs.recommended,
    ...tsEslint.configs.strict,
    {
        ignores: ['bin'],
    },
);

export default config;

Add the eslint command:

{
    "scripts": {
        "lint": "cspell . && eslint"
    }
}

WAT

Prettier

npm install -D prettier

Create a .prettierrc

{
    "trailingComma": "all",
    "tabWidth": 4,
    "semi": true,
    "printWidth": 120,
    "singleQuote": true,
    "arrowParens": "avoid"
}

Add to the lint script:

package.json

{
    "scripts": {
        "lint": "cspell . && eslint && prettier --check ."
    }
}

Add to VS Code recommendations:

.vscode/extensions.json:

{
    "recommendations": ["streetsidesoftware.code-spell-checker", "esbenp.prettier-vscode"]
}

Vitest

https://vitest.dev/guide/

npm install -D vitest

vitest.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite';

export default defineConfig({
    test: {
        // ...
    },
});