NPM Shareable Configs

This repository shareable contains configurations with fully automated package publishing to the NPM Registry.

📄 About

This is a mono-repository that contains a collection of separate, shareable npm packages that provide various configuration files for commonly used tools in modern web development.

→ Purpose

• This repository serves the following purposes:

  • Provides a centralized location for managing configuration files for commonly used tools in web development.
  • Allows for easy sharing and reuse of configurations across multiple projects.
  • Ensures consistency and adherence to best practices in your code.
  • Saves time by providing pre-configured packages that work well together.
  • Can improve the quality of your code and streamline your development workflow.
  • Suitable for both beginner and experienced web developers.

🚀 Featured Packages

Tool	Package	Version	Description
browserslist	browserslist-config		Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
commitlint	commitlint-config		Helps your team adhere to a commit convention.
eslint	eslint-config-bases		Statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.
htmlhint	htmlhint-config		Static code analysis tool you need for your HTML.
lint-staged	lint-staged-config		Run linters on git staged files.
markdownlint	markdownlint-config		A Node.js style checker and lint tool for Markdown/CommonMark files.
postcss	postcss-config		Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the
secretlint	secretlint-config		Pluggable linting tool to prevent committing credential
stylelint	stylelint-config		Linter that helps you avoid errors and enforce conventions in your styles
tsconfig	tsconfig-config		Typescript configuration for projects

💿 Installation

Looking for an already configured starter template? Check out our project: wayofdev/next-starter-tpl — Fully configured, ready-to-start template with everything already configured for you!

This section covers installation when configs contained in this repository are used in a monorepo type of project. Here's an example structure of a monorepo:

├── package.json (root)
├── apps
│   ├── docs                          # nextra app
│   │   ├── package.json              # @wayofdev/docs
│   │   └── ... (other app files)
│   └── web                           # nextjs app
│       ├── package.json              # @wayofdev/web
│       └── ... (other app files)
└── packages
    ├── ui                            # shared react ui components package
    │   ├── package.json              # @wayofdev/ui
    │   └── ... (other package files)
    └── common-i18n                   # common i18n package
        ├── package.json              # @wayofdev/common-i18n
        └── ... (other package files)

→ Root Level Configuration

To install the necessary tools and configurations for your monorepo, follow these steps:

1. Install the required tools as dev-dependencies inside the root of your monorepo:

   $ pnpm add -Dw \
     husky \
     is-ci \
     npm-run-all \
     rimraf \
     sort-package-json \
     turbo \
     prettier

2. Install changesets in the root of your monorepo to manage your versioning and changelogs with a focus on monorepos:

   $ pnpm add -Dw \
     @changesets/cli \
     @changesets/changelog-github

3. Install the necessary config packages with their dependencies that are needed at the root level of your monorepo. Here are some examples:

   commitlint:

   • Install the commitlint configuration package:

     $ pnpm add -Dw \
       @commitlint/cli \
       @wayofdev/commitlint-config

   • Follow the configuration instructions in the commitlint-config README.md.

   eslint:

   • Install the eslint configuration package:

     $ pnpm add -Dw \
     	eslint \
     	@wayofdev/eslint-config-bases

   • Follow the configuration instructions in the commitlint-config README.md.

   secretlint:

   • Install the secretlint configuration package:

     $ pnpm add -Dw \
       @secretlint \
       @wayofdev/secretlint-config

   • Follow the configuration instructions in the secretlint-config README.md.

   tsconfig:

   • Install the tsconfig configuration package:

     $ pnpm add -Dw \
       typescript \
       @wayofdev/tsconfig-config

   • Follow the configuration instructions in the tsconfig-config README.md.

   lint-staged:

   • Install the lint-staged configuration package:

     $ pnpm add -Dw \
       lint-staged \
       @wayofdev/lint-staged-config

   • Follow the configuration instructions in the lint-staged-config README.md.

   markdownlint:

   • Install the markdownlint configuration package:

     $ pnpm add -Dw \
       markdownlint \
       markdownlint-cli \
       @wayofdev/markdownlint-config

   • Follow the configuration instructions in the markdownlint-config README.md.

→ Per App/Package Configuration

In addition, this repository provides a guide for managing linting in a monorepo, which can be tricky. Most workspaces are likely to contain code that needs to be linted, making it difficult to determine the most efficient way to do so.

To address this, we propose a method that plays to Turborepo's strengths: running lint tasks inside the workspaces, not from root, and sharing as much config as possible between workspaces.

By following this guide, you can ensure that your code is consistently and thoroughly linted, while also leveraging the benefits of a monorepo. This guide is suitable for both beginner and experienced web developers.

1. Install @wayofdev/eslint-config-bases to all apps and packages in monorepo. Following tree structure, from Installation section

   eslint:

   $ pnpm \
     --filter="@wayofdev/web" \
     --filter="@wayofdev/docs" \
     --filter="@wayofdev/ui" \
     --filter="@wayofdev/common-i18n" \
     add -D eslint @wayofdev/eslint-config-bases

   Follow the configuration instructions in the eslint-config README.md.

2. Install @wayofdev/postcss-config in apps or packages, where it needs to be used. We will install it to apps/web, as it contains NextJS application, and we want to add TailwindCSS support, which requires postcss:

   postcss:

   $ pnpm \
     --filter="@wayofdev/web" \
     add -D postcss @wayofdev/postcss-config

   Follow the configuration instructions in the postcss-config README.md.

3. Install @wayofdev/stylelint-config in apps or packages, where CSS and/or SCSS is used. We will install it to apps/web.

   stylelint:

   $ pnpm \
     --filter="@wayofdev/web" \
     add -D stylelint @wayofdev/stylelint-config

   Follow the configuration instructions in the stylelint-config README.md.

4. Install @wayofdev/htmlhint-config in apps or packages, where HTML is used.

   htmlhint:

   $ pnpm \
     --filter="@wayofdev/web" \
     add -D htmlhint @wayofdev/htmlhint-config

   Follow the configuration instructions in the htmlhint-config README.md.

5. Install @wayofdev/browserslist-config in apps or packages, where you need to check projects against browser compatability.

   browserslist:

   $ pnpm \
     --filter="@wayofdev/web" \
     add -D browserslist @wayofdev/browserslist-config

   Follow the configuration instructions in the browserslist-config README.md.

Check out Turbo Guide about linting in mono-repositories for more information.

⚙️ Configuration

→ Commitlint

Commitlint is a tool that ensures that your commit messages meet certain standards. To configure the commitlint.config.js file, follow these steps:

1. Create an empty commitlint.config.js file:

   touch commitlint.config.js

2. Paste the following code into the file:

   $ tee -a commitlint.config.js <<EOF
   module.exports = {
     extends: ["@wayofdev/commitlint-config"],
   }
   EOF

   This will extend the @wayofdev/commitlint-config package, which provides a set of commonly used commit message rules. You can customize these rules by modifying the commitlint.config.js file.

→ Lint-Staged

Lint-Staged is a tool that allows you to run linters on only the files that have been staged in Git. To configure Lint-Staged, follow these steps:

1. In the root directory of your project, create the file lint-staged.config.js:

   touch lint-staged.config.js

2. Add the following contents to lint-staged.config.js:

   // @ts-check
   
   const {
     concatFilesForPrettier,
     jsonRules,
     secretsRules,
     mdRules,
     yamlRules,
   } = require('@wayofdev/lint-staged-config')
   
   const rules = {
     ...jsonRules,
     ...yamlRules,
     ...secretsRules,
     ...mdRules,
     '**/*.{js,jsx,cjs,mjs,ts,tsx,mts,cts}': filenames => {
       return [`prettier --write ${concatFilesForPrettier(filenames)}`]
     },
   }
   
   module.exports = rules

→ Husky

Husky is a tool that allows you to set up Git hooks, which are scripts that run automatically when certain Git commands are executed. To configure Husky, follow these steps:

1. Add pnpm scripts to your package.json file:

   pnpm pkg set scripts.prepare="is-ci || husky install"

   This will add a prepare script that will run the husky install command when you run pnpm install.

2. Run the prepare command once to configure Husky:

   pnpm run prepare

3. Add a pre-commit hook that runs lint-staged:

   pnpm husky add .husky/pre-commit "pnpm lint-staged --verbose --concurrent false"

   This will run lint-staged on the files that have been staged in Git before you make a commit.

4. Add a commit-msg hook that runs commitlint:

   pnpm husky add .husky/commit-msg 'pnpm commitlint --edit "${1}"'

   This will run commitlint on the commit message that you write before you make a commit.

By following these steps, you can ensure that your commits meet certain standards and that your code is properly formatted before you make a commit.

🧪 Testing

You can check Makefile or package.json to get full list of commands for local testing. For testing, you can use these commands to test:

make test

🤝 License

🧱 Useful Resources

• This repository is based on:

  • waldronmatt/shareable-configs by Matthew Waldron
  • nextjs-monorepo-example by belgattitude

• Other monorepo examples:

  • base-configs - A collection of base configs for code quality and linting tools.
  • threepio - Shareable configurations that are used within the Galaxy.
  • medly - Share common configurations across different projects.
  • code-quality-tools - Shareable configurations for various coding-style/best practices/lint tools.
  • frontend-configs - NPM-Published front-end shareable configurations.

🙆🏼‍♂️ Author Information

This repository was created in 2022 by lotyp / wayofdev.

🫡 Contributors

🤑 Sponsors

Reproto 🎖️ Financial Support	VarsityBase 🎖️ Financial Support	Vercel ☁️ Infrastructure Support	Sentry ☁️ Infrastructure Support	ZenHub ☁️ Infrastructure Support