Table of Contents

• Introduction
• Templates
  • Available Templates
  • Templates Features
• Installation
  • Installation Prerequisites
  • Install Dependencies
• Testing Scripts
• IDE Settings - Required setup
  • Editor Settings (optional/recommended)
  • Editor Extensions - Important
  • Code Style
  • Linting & Formatting - Required
  • Example Settings - VS Code

Introduction

This repository provides starter templates for TypeScript-based projects, allowing you to quickly set up code quality tools such as ESLint, Stylelint, Prettier, and TypeScript type checking. These templates help ensure consistent code style and enforce best practices across your codebase. Each template includes configuration files that you can customize to fit your project's needs.

Additionally, every template comes with a sample .gitlab-ci.yml file for GitLab pipelines, which you can adjust for your own CI/CD requirements or use as inspiration. Since VS Code is the primary IDE used nowadays, each template also includes a .vscode setup. Feel free to delete it if you already have your own settings, or merge in any configurations you find useful.

Who is this for?
Developers who want a pre-configured setup for linting, formatting, and types check in TypeScript based projects.

How to use:

1. Clone the repository or download a desired template folder.
2. Review the configuration files and package.json, then adjust or merge them as needed for your setup.

Contributions are welcome! Please open issues or pull requests for new templates, bug fixes, or improvements.

Templates

Available Templates

• typescript: NodeJS backend or library/module development.
• typescript-nextjs: Frontend setup with NextJS.
• typescript-nextjs-mantine-ui: NextJS frontend with Mantine UI library.
• typescript-react-cra: Frontend setup for Create React App.

Template Features

Template	ESLint	Stylelint	Prettier	Types Check	CI/CD Example	UI Framework
typescript	✔	✖	✔	✔	✔	✖
typescript-nextjs	✔	✔	✔	✔	✔	✖
typescript-nextjs-mantine-ui	✔	✔	✔	✔	✔	Mantine UI
typescript-react-cra	✔	✔	✔	✔	✔	✖

Installation

Installation Prerequisites

• NodeJS version 22 or later recommended.
• macOS, Windows (including WSL), and Linux are supported.
• Git version 2 or later.
• npm package manager

Install Dependencies

• npm i or npm install

Tools Scripts

Command	Description
npm run typecheck	Checks TypeScript types
npm run lint	Runs ESLint
npm run lint:stylelint	Runs Stylelint
npm run lint:stylelint:fix	Fixes Stylelint issues
npm run prettier:check	Checks files with Prettier
npm run test	Runs lint, lint:stylelint, prettier:check, and typecheck scripts together
npm run prettier:write	Formats all files with Prettier
npm run format	Formats all files with Prettier

IDE Settings

Editor Settings - (optional/recommended)

• Tab size: 2 spaces
• Format on save: enabled
• Format on type: disabled
• Format on paste: enabled
• Auto-save: disabled
• Detect indentation: disabled
• Code actions on save:
  • Organize imports
  • Fix all issues
  • Fix all Stylelint issues
  • Fix all ESLint issues

Editor Extensions - Important

If you use VS Code or Cursor click on the links to download the extensions. If you use a different IDE you have to find them yourself in the respective marketplace and configure them.

Extension name	VS Code	Cursor
Stylelint	VS Code	Cursor
ESLint	VS Code	Cursor
Prettier	VS Code	Cursor
Prettier ESLint	VS Code	Cursor
SCSS IntelliSense	VS Code	Cursor
LintLens - ESLint rules made easier	VS Code	Cursor
CSS Navigation	VS Code	Cursor

Code Style

• Default formatter: Prettier
• Import module specifier (TS and JS): non-relative
• Quote style: single quotes

Linting & Formatting - Required

• ESLint enabled for:
  • JavaScript
  • TypeScript
  • React (JS/TS)
  • SCSS
  • CSS
• Stylelint enabled for:
  • CSS
  • SCSS
• Built-in CSS/SCSS/LESS validation: disabled

Example Settings - VS Code

If you are using VS Code, you can create a Settings file in the root of this project folder .vscode/settings.json with the following settings or add them to an existing one:

{
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll": "explicit",
    "source.fixAll.stylelint": "explicit",
    "source.fixAll.eslint": "explicit",
    "stylelint.enable": "explicit",
    "stylelint.validate": "explicit",
    "stylelint.autoFixOnSave": "explicit"
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "eslint.validate": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "scss",
    "css"
  ],
  "stylelint.enable": true,
  "stylelint.validate": ["css", "scss"],
  "stylelint.packageManager": "npm",
  "editor.formatOnType": false,
  "editor.formatOnPaste": true,
  "editor.formatOnSaveMode": "file",
  "files.autoSave": "off",
  "vs-code-prettier-eslint.prettierLast": false,
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.quoteStyle": "single",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}