@inthepocket/itp-react-scripts

itp-react-scripts 🛠📦

CLI toolbox for common scripts for ours projects

The problem

Make it easier for our agency to maintain so many projects.

This solution

This is a CLI that abstracts away all configuration for our open source projects for linting, testing, building, and more.

Table of Contents

• Installation
• Usage
  • Add EsLint config to your project
  • Precommit
  • Overriding Config
• Inspiration
• Other Solutions
• Contributors
• LICENSE

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev @inthepocket/itp-react-scripts

Usage

This is a CLI and exposes a bin called itp-react-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 itp-react-scripts.

Add EsLint config to your project

Add npm run lint: "itp-react-scripts lint to your package.json scripts to use it

Note: caching eslint is enabled by default by itp-react-scripts, if you want to disable it, add ---no-cache

Note: To make VSCode recognise eslint: create .eslintrc in your project root with the contents of:

{"extends": "./node_modules/@inthepocket/itp-react-scripts/dist/config/eslintrc.js"}

Note: for now, you'll have to include an .eslintignore in your project until this eslint issue is resolved.

FYI: want to see how your final eslint config looks like? Pipe the result to a log file to take a look. npm run lint --print-config | > someTemporaryLogFile.log

Precommit

Lintstagedrc

Default

The default lintstagedrc file can be found here. It does:

• Updates doctoc in the README.md
• Updates the contributors in the project (if available)
• autoformat the project
• runs the itp-react-scripts linter
• runs the tests

Overwrite

You can overwrite the lintstagedrc by adding config to your own project, the default lint-staged way

Overriding Config

Unlike react-scripts, itp-react-scripts allows you to specify your own configuration for things and have that plug directly into the way things work with itp-react-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 itp-react-scripts will use that instead of it's own internal config. In addition, itp-react-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 with the contents of:

{"extends": "./node_modules/@inthepocket/itp-react-scripts/eslint.js"}

Note: for now, you'll have to include an .eslintignore in your project until this eslint issue is resolved.

Or, for babel, a .babelrc with:

{"presets": ["@inthepocket/itp-react-scripts/babel"]}

Or, for jest:

const { jest: jestConfig } = require('itp-react-scripts/config');
module.exports = Object.assign(jestConfig, {
  // your overrides here

  // for test written in Typescript, add:
  transform: {
    '\\.(ts|tsx)$': '<rootDir>/node_modules/ts-jest/preprocessor.js',
  },
});

Note: itp-react-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 think this is actually a great way to do this.

Inspiration

This library is a fork of kcd-scripts by Kent C. Dodds. Many thanks! 🙏 His inspiration was react-scripts.

Other Solutions

I'm not aware of any, if you are please make a pull request and add it here! Again, this is a very specific-to-me solution.

Contributors

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 📖 🚇 ⚠️	Suhas Karanth 💻 🐛 ⚠️	Matt Parrish 💻 ⚠️	Mateus 💻 ⚠️	Macklin Underdown 💻 ⚠️	stereobooster 💻 ⚠️	Dony Sukardi 🐛 💻
Alexander Nanberg 💻	Easybird 💻 📖 🚇	Thibault Maekelbergh 💻 📖 🤔 👀	Lode Vanhove 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT