Matchbox

Currently, when development teams have many projects, it is very tedious to create a configuration for each project to maintain a clear and understandable code. This module helps to create the configuration of Prettier, ESLint, and Git Hooks, with the packages of @condor-labs/prettier-config and @condor-labs/eslint-config to solve the problems without the need for the developer to make manual configurations.

NOTE: Install and configure Matchbox using Node version 15.14.0. After this, you can use the Node version your project needs to run.

How to use it

To use the library you just need to follow the following steps:

• Run the script with npx in the repository root

npx @condor-labs/matchbox@latest

• Select the option to install from the main menu.

1. Install everything

• If, when running the script you get the message "Not a git repository", indicate whether you want to continue with the installation.

Important! If you continue with the installation, the husky package will not be installed, and you won't have the pre-commit git hook set up.

Are you sure you want to continue? (y/n) [y]:

• Indicate whether your project contains a frontend app

Does your project is or includes a Frontend? (y/n) [y]:

• If you typed y in the previous step, indicate whether your frontend app is based on react

Does it include React? (y/n) [y]:

• Indicate whether your project contains a backend app

Does your project is or includes a Backend? (y/n) [y]:

• Select the type of project JavaScript or TypeScript

JavaScript or TypeScript? (js/ts) [js]:

• Select the version of eslint to be installed. If you have eslint already installed in your project, or you want to install a specific version, type the exact version you're using or the version you need. Otherwise, you can go with the default one.

TIP: Run npm list --depth=1 to see the dependencies of your dependencies (like react-scripts for Create React App and gatsby for Gatsby JS). Like for these two examples, the eslint version might be buried a bit deeper in your dependency tree.

Eslint version (default 7.23.0)

• List folders and files, separated by a space, that you wish eslint and prettier to ignore. Notice that node_modules is included by default.

Omit directories or files (node_modules included by default) (separate with space): node_modules dist *.svg

• At the end of the installation the script run lint-global, which will format and analyze errors and warnings in all project files.

Important! When applying these changes in your project, keep in mind that this is a 2-step process:

1. Make a Pull Request with the changes made by Prettier

When you install matchbox, it runs prettier automatically on all the files but only reports on warnings and errors found by ESLint

2. After the first Pull Request is merged, create a second PR with the ESLint fixes, both automatic and manual.

For this, you can run npm run lint to run ESLint again and automatically fix some warnings. The rest need to be fixed manually.

Note: To analyze and correct errors with ESLint run the following script npm run lint

Description of the main script

The script makes the following changes to our project

• Removes all ESLint and Prettier settings it finds.
• It will install the following dependencies: @condor-labs/prettier-config, husky and the specified eslint version.
• If the user selects an eslint version lower or equal to v6, version 1.0.0-v6 of @condor-labs/eslint-config will be installed. Otherwise, the latest stable version will be installed.
• It will add the Prettier's configuration of @condor-labs/prettier-config and will also add the ESLint's configuration of @condor-labs/eslint-config.
• It will create .prettierignore and .eslintignore to ignore directories or files.
• It will create the configuration in .husky and add lint-staged to file package.json for the execution of pre-commit
• Add Prettier and ESLint execution script to package.json
• A small configuration is added in .vscode/settings.json to be able to use when saving changes.
• It will create a CODEOWNERS file, or update it if it already exists. The file will serve as a guard against unauthorized changes to critical Matchbox files.

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Important! If, after running npm start or npm run build, you get package dependency errors, we recommend that you delete the package-lock.json file and run npm install.

New: Installing / configuring Husky

If you cloned a repo that has Matchbox installed, and you have problems with the git precommit hook, just choose 3 in the main menu.

• Select the option to install from the main menu.

3. Install/Reconfigure Husky

How to Uninstall

Warning: The 'uninstall' command deletes the package-lock.json. If you don't have the exact versions of your dependencies in the package.json file, in other words, if you have versions like this ^1.2.3, abstain from running this command.

• Run the script with npx

npx @condor-labs/matchbox@latest

• Select the option 2 to uninstall everything from the main menu.

2. Uninstall everything

Upgrading to new versions

To upgrade to the latest version of Matchbox, just run npx @condor-labs/matchbox and install it again.

Description Uninstall Script

• Removes the configuration files from ESLint y Prettier
• Removes configuration created in the package.json
• Deletes the package-lock.json file
• Uninstall dependencies eslint, @condor-labs/prettier-config, @condor-labs/eslint-config, husky
• Installs the regular dependencies.

How to Publish

Increasing package version

You will need to update the package.json file placed in the root folder.

Identify the property version and increase the right number for the version bump.

Login in NPM by console.

 npm login
 [Enter username]
 [Enter password]
 [Enter email]

If everything is ok, the console will show you something like this: Logged in as USERNAME on https://registry.npmjs.org/.

Uploading a new version

 npm publish --access public

Ref: https://docs.npmjs.com/getting-started/publishing-npm-packages

Note: you will need to have an NPM account. If you don't have one, create one here: https://www.npmjs.com/signup

Contributors

The original author and current lead maintainer of this module is the @condor-labs development team.

More about Condor Labs Here.

License

MIT