Skip to main content

One post tagged with "Project Setup"

View All Tags

Setting Up a Modern React Project with Linting, Formatting, Styling and Spell Checking

· 3 min read

When working on a React project, maintaining clean and consistent code is essential. This guide will walk you through setting up a React project with ESLint, Prettier, Stylelint, Husky, lint-staged, and cspell to automate code formatting, linting, and spell checking.

Step 1: Create a New React App​

npx create-react-app my-app --use-npm
cd my-app

This sets up a new React project.

Step 2: Initialize Git​

git init

Step 3: Install Dependencies​

Install necessary development dependencies:

yarn add -D eslint prettier stylelint husky lint-staged stylelint-config-standard cspell stylelint-config-standard

Step 4: Configure ESLint​

Initialize ESLint:

npx eslint --init

Modify .eslintrc.json:

{
  "extends": ["react-app", "eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Create .eslintignore:

# Third party
**/node_modules

# Build products
build/
static/
docs/

Add ESLint Scripts to package.json​

"scripts": {
    "lint:ts": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings 0",
    "lint:ts:fix": "eslint --fix \"./src/**/*.{ts,tsx}\" --max-warnings 0"
}

Step 5: Configure Prettier​

Create .prettierrc:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "printWidth": 100,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

Create .prettierignore:

.git
.github
.yarn
.husky
build
node_modules
static

Add Prettier Scripts to package.json​

"scripts": {
    "format": "prettier --write .",
    "format:diff": "prettier --list-different ."
}

Step 6: Configure Stylelint​

Create .stylelintrc:

{
    "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": null,
    "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }]
  }
}

Add Stylelint Scripts to package.json​

"scripts": {
   "lint:style": "stylelint \"**/*.css\"",
   "lint:style:fix": "yarn lint:style --fix"
}

Step 7: Configure cspell (Spell Checker)​

Initialize cspell:

npx cspell --init

Modify .cspell.json:

{
  "version": "0.2",
  "language": "en",
  "ignorePaths": ["node_modules", "build", "static", ".docusaurus", "i18n"],
  "dictionaryDefinitions": [
    {
      "name": "project-words",
      "path": "./project-words.txt",
      "noSuggest": true
    }
  ],
  "dictionaries": [
    "css",
    "html",
    "fonts",
    "typescript",
    "softwareTerms",
    "companies",
    "lorem-ipsum",
    "project-words"
  ]
}

Create a project-words.txt file to store custom words.

Add cspell Script to package.json​

"scripts": {
 "lint:spelling": "cspell \"docs/**/*.md\" \"blog/**/*.md\" \"src/**/*.js\" \"src/**/*.tsx\" \"docusaurus.config.js\" --no-progress --show-context --show-suggestions",
  "lint:spelling:fix": "yarn rimraf project-words.txt && echo \"# Project Words - DO NOT TOUCH - This is updated through CI\" >> project-words.txt && yarn -s lint:spelling --words-only --unique --no-exit-code --no-summary \"**\" | cross-env LC_ALL=en_US.UTF-8 sort --ignore-case >> project-words.txt"
}

lint:spelling:fix does

Step 8: Configure Husky for Pre-Commit Hooks​

Initialize Husky:

npx husky init

Add pre-commit hook:

echo "yarn run lint-staged" > .husky/pre-commit

Add pre-push hook:

echo "yarn run lint-staged" > .husky/pre-push

Step 9: Configure Lint-Staged​

Modify package.json:

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix --max-warnings=0",
      "prettier --write",
      "cspell --no-progress --show-context --show-suggestions"
    ],
    "src/**/*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "{docs,blog}/**/*.{md,mdx}": [
      "cspell --no-progress --show-context --show-suggestions"
    ]
  }

Step 10: Run the Setup​

yarn lint:ts
yarn format
yarn lint:style
yarn lint:spelling

Conclusion​

By following these steps, your React project is now set up with:

  • ESLint for code linting
  • Prettier for code formatting
  • Stylelint for CSS linting
  • cspell for spell checking
  • Husky & lint-staged for pre-commit checks

This ensures cleaner, more readable, and error-free code throughout your development process. 🚀