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

Prettier

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

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

Jest

Or, for Jest in jest.config.js:

Note: if ts-jest is installed, it will automatically be used as the preset

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

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

License

Maintenance

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

MIT