- 📦 One package to encapsulate most tooling dependencies
- ⚙️ Common (extensible) configurations to eliminate boilerplate
- 📏 Conventions that help enforce consistency
- 🥽 Best practices to help avoid 🦶🏻🔫
This module is distributed via npm which is bundled with
node and should be installed as one of your project's
devDependencies
:
yarn add -D @hover/javascript
This is a CLI and exposes a bin called hover-scripts
. You'll find all
available scripts in src/scripts
.
This project actually dogfoods itself. If you look in the package.json
, you'll
find scripts with node src {scriptName}
. This serves as an example of some of
the things you can do with hover-scripts
.
Unlike react-scripts, hover-scripts
allows you to
specify your own configuration for things and have that plug directly into the
way things work with hover-scripts
. There are various ways that it works, but
basically if you want to have your own config for something, just add the
configuration and hover-scripts
will use that instead of it's own internal
config. In addition, hover-scripts
exposes its configuration so you can use it
and override only the parts of the config you need to.
This can be a very helpful way to make editor integration work for tools like ESLint which require project-based ESLint configuration to be present to work.
Note:
hover-scripts
intentionally does not merge things for you when you start configuring things to make it less magical and more straightforward. Extending can take place on your terms.
So, if we were to do this for ESLint, you could create an .eslintrc.js
with
the contents of:
module.exports = {
extends: require.resolve('@hover/javascript/eslint'),
// Include this when using TypeScript
parserOptions: {
project: ['./tsconfig.json'],
},
}
✨ The strict preset is recommended for new projects!
A strict preset is also available that includes more agressive linting rules that enforce the order and grouping of imports.
module.exports = {
extends: [
require.resolve('@hover/javascript/eslint'),
require.resolve('@hover/javascript/eslint/strict'),
],
// Include this when using TypeScript
parserOptions: {
project: ['./tsconfig.json'],
},
}
ℹ️ The standard preset attempts to detect a React dependency and enable this preset automatically so this is usually only necessary in edge cases where React is not detected (such as a monorepo)
A React preset is available that includes additional React-specific rules as well as the eslint-plugin-react-hooks plugin.
module.exports = {
extends: require.resolve('@hover/javascript/eslint/react'),
}
Or, for Prettier, a .prettierrc.js
with:
module.exports = require('@hover/javascript/prettier')
Or, for Jest in jest.config.js
:
⚠️ Starting with 7.0, the default Jesttransform
is @swc-node/jest. If you want to continue using ts-jest, simpy installts-jest
in your project and it will automatically be used as thetransform
instead.
const config = require('@hover/javascript/jest')
module.exports = {
...config,
coverageThreshold: null,
}
🔖 Set the
version
field in yourpackage.json
to0.0.0-semantically-released
to enable Semantic Release in theci-after-success
script
Or, for Semantic Release (used in ci-after-success
script) in
release.config.js
:
module.exports = {
extends: require.resolve('@hover/javascript/release'),
}
ℹ️ The
hoverBabel
special requires NODE_PATH to be defined to resolve the babel config file
Or, for depcheck in .depcheckrc.json'
:
{
"specials": [
"babel",
"bin",
"jest",
[
"hoverBabel",
{
"config": "babel.config.js",
"env": "development"
}
]
],
"ignoreMatches": ["types/*"]
}
Or, for lint-staged (used in pre-commit
script) in lint-staged.config.js
:
module.exports = {
...require.resolve('@hover/javascript/lint-staged'),
'*.+(js|jsx|ts|tsx)': ['yarn some-custom-command'],
}
If all you want to do is run a custom test command, you can pass --testCommand
to hover-scripts pre-commit
. The built-in lint-staged configuration will be
used with your custom command.
{
"name": "my-package",
"husky": {
"hooks": {
"pre-commit": "hover-scripts pre-commit --testCommand 'yarn test:custom' --findRelatedTests"
}
}
}
This package includes a couple scripts designed to be run as part of your project's source control workflow. The most common workflow is using Husky to manage Git hooks, but they should work with other solutions as well.
ℹ️ See Husky Documentation for more information
-
Install Husky
yarn add -D husky
-
Add
prepare
scriptnpm set-script prepare "husky install"
-
Create hooks
i. 📂 .husky/pre-commit
yarn husky add .husky/pre-commit "yarn hover-scripts pre-commit"
ii. 📂 .husky/commit-msg
yarn husky add .husky/commit-msg "yarn hover-scripts commit-msg"
MIT
This project is actively maintained by engineers at @hoverinc 😀.