@hover/javascript

    6.53.0 • Public • Published

    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:

    ℹ️ If ts-jest is installed, it will automatically be used as the preset

    const config = require('@hover/javascript/jest')
    
    module.exports = {
      ...config,
      coverageThreshold: null,
    }

    Semantic Release

    Or, for Semantic Release (used in ci-after-success script) in release.config.js:

    module.exports = {
      extends: require.resolve('@hover/javascript/release'),
    }

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

    Keywords

    none

    Install

    npm i @hover/javascript

    DownloadsWeekly Downloads

    326

    Version

    6.53.0

    License

    MIT

    Unpacked Size

    144 kB

    Total Files

    104

    Last publish

    Collaborators

    • hover-it-admin
    • kerryaustin
    • jrolfs
    • dusterdb88
    • elfrank
    • dezman
    • zan.rosenthal.hover
    • nickcobbett
    • sherry-hover
    • santiiiii
    • rickerdu
    • bkang_hover
    • modosc
    • mrivlin.hover