hover-javascript

🧰 Toolbox of scripts and configurations for JavaScript and TypeScript projects

✨ Features

• 📦 One package to encapsulate most tooling dependencies
• ⚙️ Common (extensible) configurations to eliminate boilerplate
• 📏 Conventions that help enforce consistency
• 🥽 Best practices to help avoid 🦶🏻🔫

Contents

• Installation
• Usage
  • Overriding Config
    • ESLint
    • Prettier
    • Jest
    • Semantic Release
    • Depcheck
    • Lint Staged
  • Source Control Hooks
    • Husky Example
• License
• Maintenance

Installation

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

Usage

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.

Overriding Config

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.

ESLint

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'],
  },
}

Strict Preset

✨ 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'],
  },
}

React Preset

ℹ️ 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'),
}

Prettier

Or, for Prettier, a .prettierrc.js with:

module.exports = require('@hover/javascript/prettier')

Jest

Or, for Jest in jest.config.js:

⚠️ Starting with 7.0, the default Jest transform is @swc-node/jest. If you want to continue using ts-jest, simpy install ts-jest in your project and it will automatically be used as the transform instead.

const config = require('@hover/javascript/jest')

module.exports = {
  ...config,
  coverageThreshold: null,
}

Semantic Release

🔖 Set the version field in your package.json to 0.0.0-semantically-released to enable Semantic Release in the ci-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'),
}

Depcheck

ℹ️ 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/*"]
}

Lint Staged

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'],
}

Custom Test 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"
    }
  }
}

Source Control Hooks

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.

Husky Example

ℹ️ See Husky Documentation for more information

1. Install Husky

   yarn add -D husky

2. Add prepare script

   npm set-script prepare "husky install"

3. 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"

License

MIT

Maintenance

This project is actively maintained by engineers at @hoverinc 😀.