hover-javascript

🧰 Toolbox of scripts and configurations for JavaScript and TypeScript projects

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

• Installation
• Usage
  • Overriding Config
    • ESLint
    • Prettier
    • Jest
• LICENSE

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.

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

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

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

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

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. I Kent think[s] this is actually a great way to do this.

For the record, so do I (Jamie)

MIT