Table of Contents generated with DocToc

• Prettier
  • Install
  • package.json script
  • .prettierrc
  • Webstorm IDE setup
• ESLint
  • Install
  • package.json script
  • .eslintrc.json
  • ESLint + React
  • Webstorm IDE setup
• Parcel
  • Install
  • package.json script
• Babel
  • Install
  • .babelrc
  • Update to .eslinstrc.json

Prettier

A code styling / pretty printing utility.

Install

• Global install on dev machine

    npm install --global prettier
  

• Local project install

    npm install --save-dev prettier
  

package.json script

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

.prettierrc

{}

Webstorm IDE setup

• Install prettier plugin
• Setup File Watcher
  • Set scope to Open Files instead of Project Files
    https://prettier.io/docs/en/webstorm.html

ESLint

A static code analysis / linting tool.

Install

• Local project install

    npm install --save-dev eslint eslint-config-prettier
  

package.json script

"scripts": {
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
},

.eslintrc.json

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

ESLint + React

• Getting ESLint to recognise React

    npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
  

• Updated .eslintrc.json

    {
      "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended",
        "prettier",
        "prettier/react"
      ],
      "rules": {
        "react/prop-types": 0,
        "no-console": 1,
        "react-hooks/rules-of-hooks": 2,
        "react-hooks/exhaustive-deps": 1
      },
      "plugins": ["react", "import", "jsx-a11y", "react-hooks"],
      "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      "env": {
        "es6": true,
        "browser": true,
        "node": true
      },
      "settings": {
        "react": {
          "version": "detect"
        }
      }
    }
  

Webstorm IDE setup

Reference: https://www.jetbrains.com/help/webstorm/eslint.html

Parcel

Bundler for JavaScript projects.

• Zero-config
• Includes babel for transpilation
• Supports hot module replacement to speed up development

Install

• Local project install

    npm install --save-dev parcel-bundler
  

package.json script

"scripts": {
  "dev": "parcel src/index.html",
  "production-build": "parcel build --public-url ./dist/ src/index.html",
}

Babel

Javascript transpiler
(use if not using parcel for handling babel with parcel’s default config)

Install

npm install -D babel-eslint @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/preset-react

.babelrc

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Update to .eslinstrc.json

{
  "parser": "babel-eslint",
}

TypeScript

Install

npm install -D typescript

Generate tsconfig.json

npx tsc --init. npx

package.json script

"scripts": {
  "typecheck": "tsc --noEmit"
}