react-scaffold

React Scaffolding Instructions

Scaffold the react project using vite

npm create vite@latest

• Name your project
• Choose react
• Choose Typescript (the default)

Open the project in VS Code.

cd <project-name>
code .

Open a terminal

# install dependencies
npm i

Configure Engine versions

Add the the current LTS versions of Node and npm to the package.json file. Use the current LTS version instead of the settings below.

"engines": {
  "npm": ">=10.0.0",
  "node": ">=20.0.0"
},

Configure ESLint for Production

• Install eslint-plugin-react

npm i --save-dev eslint-plugin-react

• Add the following lines to the extends list in the .eslint.cjs file

// other extends
'plugin:react/recommended',
'plugin:react/jsx-runtime'

• Add the following settings section to the .eslint.cjs file

  settings: {
    react: {
      version: 'detect',
    },
  },

Prettier

npm i --save-dev prettier

# Configure
echo "{ \"singleQuote\": true }" > .prettierrc

Add ignore file

touch .prettierignore

Add the following lines

# Ignore artifacts
dist
coverage

eslint-config-prettier

• eslintrc: Add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

// other extends
"prettier"

Format all files

npx prettier . --write

husky

npm install --save-dev husky

# Configure
npx husky init

commitLint

npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure
echo "{ extends: ['@commitlint/config-conventional'] }" > .commitlintrc

# Add commit message linting to commit-msg hook
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

lint-staged

npm install --save-dev lint-staged

# Configure
echo "{'src/**/*.{ts,tsx}': ['npm run lint']}" > .lintstagedrc

Add husky hook to .husky/pre-commit

#!/usr/bin/env sh
. "$(dirname "$0")/_/husky.sh"

npx --no -- lint-staged --quiet

TypeScript / Vite

Configure relative paths

tsconfig.json - add the following lines to the "compilerOptions" section

    /* Paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

vite.config

• Import path (top of the file)

import path from 'path;

• Add the following lines to defineConfig

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

vscode settings

• Execute Preferences: Open Workspace Settings (JSON) from the vs code command palette

settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",
"typescript.preferences.importModuleSpecifier": "non-relative",
"editor.formatOnSave": true

Extension Recommendations

Create the extensions.json

touch .vscode/extensions.json

Then paste the following lines in the extensions.json file.

{
  "recommendations": [
    "mikestead.dotenv",
    "dsznajder.es7-react-js-snippets",
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens",
    "esbenp.prettier-vscode",
    "christian-kohler.path-intellisense"
  ]
}

git

Add the project to git specifying main as the master branch

git init -b main

Delete following lines from the generated .gitignore

.vscode/*
!.vscode/extensions.json