Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wayofdev/npm-shareable-configs
Shareable configurations with fully automated package publishing to NPM Registry.
https://github.com/wayofdev/npm-shareable-configs
browserslist-config commitlint-config eslint-config htmlhint-config lint-staged-config markdownlint-config monorepo pnpm pnpm-workspace pnpm-workspaces postcss-config prettier-config secretlint-config stylelint-config tsconfig-config
Last synced: 3 days ago
JSON representation
Shareable configurations with fully automated package publishing to NPM Registry.
- Host: GitHub
- URL: https://github.com/wayofdev/npm-shareable-configs
- Owner: wayofdev
- License: mit
- Created: 2022-12-12T10:50:56.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T00:47:05.000Z (7 days ago)
- Last Synced: 2024-09-26T09:41:36.602Z (7 days ago)
- Topics: browserslist-config, commitlint-config, eslint-config, htmlhint-config, lint-staged-config, markdownlint-config, monorepo, pnpm, pnpm-workspace, pnpm-workspaces, postcss-config, prettier-config, secretlint-config, stylelint-config, tsconfig-config
- Language: JavaScript
- Homepage: https://wayof.dev
- Size: 2.65 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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](https://github.com/browserslist/browserslist) | [browserslist-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/browserslist-config/README.md) |  | Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env |
| [commitlint](https://commitlint.js.org/#/) | [commitlint-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/commitlint-config/README.md) |  | Helps your team adhere to a commit convention. |
| [eslint](https://eslint.org/) | [eslint-config-bases](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/eslint-config-bases/README.md) |  | 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](https://htmlhint.com/) | [htmlhint-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/htmlhint-config/README.md) |  | Static code analysis tool you need for your HTML. |
| [lint-staged](https://github.com/okonet/lint-staged) | [lint-staged-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/lint-staged-config/README.md) |  | Run linters on git staged files. |
| [markdownlint](https://github.com/DavidAnson/markdownlint) | [markdownlint-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/markdownlint-config/README.md) |  | A Node.js style checker and lint tool for Markdown/CommonMark files. |
| [postcss](https://postcss.org/) | [postcss-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/postcss-config/README.md) |  | Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the |
| [secretlint](https://github.com/secretlint/secretlint/) | [secretlint-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/secretlint-config/README.md) |  | Pluggable linting tool to prevent committing credential |
| [stylelint](https://stylelint.io/) | [stylelint-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/stylelint-config/README.md) |  | Linter that helps you avoid errors and enforce conventions in your styles |
| [tsconfig](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) | [tsconfig-config](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/tsconfig-config/README.md) |  | Typescript configuration for projects |
## 💿 Installation
Looking for an already configured starter template? Check out our project: **[wayofdev/next-starter-tpl](https://github.com/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:
```bash
├── 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:
```bash
$ pnpm add -Dw \
husky \
is-ci \
npm-run-all \
rimraf \
sort-package-json \
turbo \
prettier
```
2. Install [changesets](https://github.com/changesets/changesets) in the root of your monorepo to manage your versioning and changelogs with a focus on monorepos:
```bash
$ 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:
```bash
$ pnpm add -Dw \
@commitlint/cli \
@wayofdev/commitlint-config
```
- Follow the configuration instructions in the `commitlint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/commitlint-config/README.md).
**`eslint:`**
- Install the `eslint` configuration package:
```bash
$ pnpm add -Dw \
eslint \
@wayofdev/eslint-config-bases
```
- Follow the configuration instructions in the `commitlint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/eslint-config-bases/README.md).
**`secretlint:`**
- Install the `secretlint` configuration package:
```bash
$ pnpm add -Dw \
@secretlint \
@wayofdev/secretlint-config
```
- Follow the configuration instructions in the `secretlint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/secretlint-config/README.md).
**`tsconfig:`**
- Install the `tsconfig` configuration package:
```bash
$ pnpm add -Dw \
typescript \
@wayofdev/tsconfig-config
```
- Follow the configuration instructions in the `tsconfig-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/tsconfig-config/README.md).
**`lint-staged:`**
- Install the `lint-staged` configuration package:
```bash
$ pnpm add -Dw \
lint-staged \
@wayofdev/lint-staged-config
```
- Follow the configuration instructions in the `lint-staged-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/lint-staged-config/README.md).
**`markdownlint:`**
- Install the `markdownlint` configuration package:
```bash
$ pnpm add -Dw \
markdownlint \
markdownlint-cli \
@wayofdev/markdownlint-config
```
- Follow the configuration instructions in the `markdownlint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/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](https://chat.openai.com/chat/5163a197-1297-45d2-b0be-b7e14441e673#Installation) section
**`eslint:`**
```bash
$ 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](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/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:`**
```bash
$ pnpm \
--filter="@wayofdev/web" \
add -D postcss @wayofdev/postcss-config
```
Follow the configuration instructions in the `postcss-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/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:`**
```bash
$ pnpm \
--filter="@wayofdev/web" \
add -D stylelint @wayofdev/stylelint-config
```
Follow the configuration instructions in the `stylelint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/stylelint-config/README.md).
4. Install `@wayofdev/htmlhint-config` in apps or packages, where HTML is used.
**`htmlhint:`**
```bash
$ pnpm \
--filter="@wayofdev/web" \
add -D htmlhint @wayofdev/htmlhint-config
```
Follow the configuration instructions in the `htmlhint-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/htmlhint-config/README.md).
5. Install `@wayofdev/browserslist-config` in apps or packages, where you need to check projects against browser compatability.
**`browserslist:`**
```bash
$ pnpm \
--filter="@wayofdev/web" \
add -D browserslist @wayofdev/browserslist-config
```
Follow the configuration instructions in the `browserslist-config` [README.md](https://github.com/wayofdev/npm-shareable-configs/blob/master/packages/browserslist-config/README.md).
Check out [Turbo Guide](https://turbo.build/repo/docs/handbook/linting) 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:
```bash
touch commitlint.config.js
```
2. Paste the following code into the file:
```bash
$ tee -a commitlint.config.js < {
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:
```bash
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:
```bash
pnpm run prepare
```
3. Add a pre-commit hook that runs `lint-staged`:
```bash
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`:
```bash
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:
```bash
make test
```
## 🤝 License
[](./LICENSE)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fwayofdev%2Fnpm-shareable-configs?ref=badge_large)
## 🧱 Useful Resources
- This repository is based on:
- [waldronmatt/shareable-configs](https://github.com/waldronmatt/shareable-configs) by [Matthew Waldron](https://github.com/waldronmatt)
- [nextjs-monorepo-example](https://github.com/belgattitude/nextjs-monorepo-example) by [belgattitude](https://github.com/belgattitude)
- Other monorepo examples:
- [base-configs](https://github.com/demartini/base-configs) - A collection of base configs for code quality and linting tools.
- [threepio](https://github.com/the-holocron/threepio) - Shareable configurations that are used within the Galaxy.
- [medly](https://github.com/medly/configs) - Share common configurations across different projects.
- [code-quality-tools](https://github.com/strvcom/code-quality-tools) - Shareable configurations for various coding-style/best practices/lint tools.
- [frontend-configs](https://github.com/drivy/frontend-configs) - NPM-Published front-end shareable configurations.
## 🙆🏼♂️ Author Information
This repository was created in **2022** by [lotyp / wayofdev](https://github.com/wayofdev).
## 🫡 Contributors
## 🤑 Sponsors
Reproto
🎖️ Financial Support
VarsityBase
🎖️ Financial Support
Vercel
☁️ Infrastructure Support
Sentry
☁️ Infrastructure Support
ZenHub
☁️ Infrastructure Support