React starter

starter.js

//prettier
// create a .prettierrc file in project root folder
// in VScode - user.settings prettier.requireConfig: true and editor.formatOnSave: true

// prettier format
{
  "format": "prettier --write \"src/**/*.{js,jsx,css,json}\""
}

// run this on CI server, to check difference in code format.
// prettier format-checker
{
  "format:check": "prettier --list-different \"src/**/*.{js,jsx,css,json}\""
}

// eslint
// create .eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "prettier",
    "prettier/react"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "globals": {
    "window": true
  }
}

// install all the tools
`npm install -D eslint eslint-config-prettier eslint-plugin-prettier`

// add a lint script in package.json
{
  "lint": "eslint --fix \"**/*.{js,jsx}\""
}


// install husky as the git hook tool, for precommit check.

// install extension called eslint 

// React testing
`npm install -D jest react-test-renderer`;

// create a directory
`__test__`

// for environment config for jest
// open .eslintrc.json
// add jest: true to env
{
  "env": {
    "jest": true
  }
}

// adding cli scripts
{
  "test": "jest --silent",
  "test:udpdate": "jest --silent -u"
}

// jest in watch mode
{
  "test:watch": "jest --silent --watch"
}

// code coverage
{
  "test:coverage": "jest --silent --coverage"
}