Skip to content

CLI toolbox for common scripts for JavaScript + TypeScript projects

License

Notifications You must be signed in to change notification settings

hoverinc/hover-javascript

Folders and files

NameName
Last commit message
Last commit date
Jan 19, 2023
Apr 1, 2022
Mar 7, 2023
Apr 12, 2022
Feb 2, 2022
Jul 18, 2021
Feb 28, 2023
Jun 12, 2021
Apr 12, 2022
Aug 5, 2020
Mar 27, 2020
Mar 7, 2023
Jul 17, 2021
Dec 9, 2022
Sep 3, 2017
Aug 7, 2019
Apr 7, 2018
Mar 27, 2020
Mar 7, 2023
Mar 29, 2020
Sep 3, 2017
Feb 27, 2023
Oct 11, 2020
Sep 12, 2019
Sep 4, 2017
Sep 30, 2019
Aug 5, 2019
Sep 7, 2022
Nov 22, 2017
Mar 7, 2023
Nov 22, 2017
Jun 10, 2022
Feb 28, 2023
Dec 9, 2022
Mar 7, 2023

Repository files navigation


Hover Web

hover-javascript

🧰 Toolbox of scripts and configurations for JavaScript and TypeScript projects

Build Status Code Coverage Version Maintenance Node Version
MIT License Code Style Conventional Commits


✨ 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

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 😀.