Best Practices
April 1, 2020 ยท View on GitHub
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
{% code title="lerna.json" %}
{
"npmClient": "yarn",
"useWorkspaces": "true"
}
{% endcode %}
Install
yarn install
Update package.json
{% code title="package.json" %}
{
"scripts": {
"lint": "yarn run lerna run lint"
},
"workspaces": ["packages/*"]
}
{% endcode %}
package.json when creating a new package:
{% code title="packages/new-package/package.json" %}
{
"name": "new-package",
"private": true,
"version": "0.0.0"
}
{% endcode %}
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.
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:
ts-node -r dotenv/config scripts/test.sh
Or
import { config: dotenv } from "dotenv"
dotenv();
fs-extra
fs-extraadds file system methods that aren't included in the nativefsmodule and adds promise support to thefsmethods. It also usesgraceful-fsto preventEMFILEerrors. It should be a drop in replacement forfs.
- https://www.npmjs.com/package/fs-extra
- Used by
create-react-app
yarn add fs-extra