@pcattori/react-toolkit

Personal toolkit for React apps.

Toolkit includes:

• prettier
• eslint
• typescript
• babel
• webpack

...along with default configuration, extensions, and plugins for each.

For more on toolkits, see:

• The Melting Pot of Javascript - Dan Abramov
• Concerning Toolkits - Kent C. Dodds

Install

Install @pcattori/react-toolkit as a dev dependency:

npm install -D @pcattori/react-toolkit

prettier

.prettierrc.js:

var defaults = require('@pcattori/react-toolkit').prettier()
module.exports = {
  ...defaults,
  // overrides go here
}

eslint

.eslintrc.js:

var defaults = require('@pcattori/react-toolkit').eslint()
module.exports = {
  ...defaults,
  // overrides go here
}

typescript

tsconfig.json:

{
  "extends": "./node_modules/@pcattori/react-toolkit/src/tsconfig.json",
  "include": ["./src/**/*"]
}

babel

.babelrc.js:

var defaults = require('@pcattori/react-toolkit').babel()
module.exports = {
  ...defaults,
  // overrides go here
}

For more, including how to provide overrides, see the tsconfig documentation.

webpack

webpack.config.js:

var defaults = require('@pcattori/react-toolkit').webpack()
module.exports = {
  ...defaults,
  // overrides go here
}

NPM scripts

Add any of the following to your package.json:

{
  "scripts": {
    "format": "prettier --check .",
    "format:fix": "prettier --write .",
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "typecheck": "tsc --noEmit",
    "build": "webpack --mode='production'",
    "start:dev": "webpack serve --mode='development' --host 0.0.0.0"
  }
}