itp-react-scripts 🛠📦
CLI toolbox for common scripts for ours projects
!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !versionversion-badgepackage !downloadsdownloads-badgenpmcharts !MIT Licenselicense-badgelicense
!PRs Welcomeprs-badgeprs !Code of Conductcoc-badgecoc
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star !Tweettwitter-badgetwitter
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
- Add EsLint config to your project - Precommit - Overriding Config
Installation
This module is distributed via npmnpm which is bundled with nodenode and should be installed as one of your project'sdevDependencies
:npm install --save-dev @inthepocket/itp-react-scripts
Usage
This is a CLI and exposes a bin calleditp-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
Addnpm run lint: "itp-react-scripts lint
to your package.json
scripts to use itNote: 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 wayOverriding Config
Unlikereact-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 wasreact-scripts
.Other Solutions
I'm not aware of any, if you are please make a pull requestprs and add it here! Again, this is a very specific-to-me solution.Contributors
Thanks goes to these people (emoji keyemojis):|
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-contributorsall-contributors specification. Contributions of any kind welcome!