When starting a new project

• Use Lerna​

• Use typescript

• Use eslint

• Use prettier

• Use jest

• Use husky

  • Used to lint files

See https://github.com/aizatto/javascript-repository-template/blob/master/repositories.json​

Lerna

​https://github.com/lerna/lerna​

npx lerna init
npx lerna bootstrap --npm-client=yarn --use-workspaces

Update lerna.json

lerna.json
{
  "npmClient": "yarn",
  "useWorkspaces": "true"
}

Install

yarn install

Update package.json

package.json
{
  "scripts": {
    "lint": "yarn run lerna run lint"
  },
  "workspaces": ["packages/*"]
}

package.json when creating a new package:

packages/new-package/package.json
{
  "name": "new-package",
  "private": true,
  "version": "0.0.0"
}

Package Management

Each package manages it's own typescript and eslint.

For example, at the root directory.

yarn lerna run lint

Use JSON5 over JSON

The JSON5 Data Interchange Format (JSON5) is a superset of JSON that aims to alleviate some of the limitations of JSON by expanding its syntax to include some productions from ECMAScript 5.1.

• ​https://json5.org/​

• ​https://github.com/json5/json5​

• ​https://www.npmjs.com/package/json5​

yarn add json5

JSON5 Short Example:

{
  // comments
  unquoted: 'and you can quote me on that',
  singleQuotes: 'I can use "double quotes" here',
  lineBreaks: "Look, Mom! \
No \\n's!",
  newLine: "1\n\
2\n\
3",
  hexadecimal: 0xdecaf,
  leadingDecimalPoint: .8675309, andTrailing: 8675309.,
  positiveSign: +1,
  trailingComma: 'in objects', andIn: ['arrays',],
  "backwardsCompatible": "with JSON",
}

Package Recommendations

commander: command-line arguments

• ​https://www.npmjs.com/package/commander​

• Used by create-react-app

yarn add commander

dotenv

• ​https://github.com/motdotla/dotenv​

• Used by create-react-app

yarn add dotenv

As early as possible:

JavaScript:

require('dotenv').config()

TypeScript:

import { config: dotenv } from "dotenv"
dotenv();

fs-extra

fs-extra adds file system methods that aren't included in the native fs module and adds promise support to the fs methods. It also uses graceful-fs to prevent EMFILEerrors. It should be a drop in replacement for fs.

• ​https://www.npmjs.com/package/fs-extra​

• Used by create-react-app

yarn add fs-extra