Skip to content

Latest commit

 

History

History
444 lines (312 loc) · 21 KB

README.md

File metadata and controls

444 lines (312 loc) · 21 KB

Logo for light mode Logo for dark mode


Build Status Software License

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 npm Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
commitlint commitlint-config npm Helps your team adhere to a commit convention.
eslint eslint-config-bases npm 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 npm Static code analysis tool you need for your HTML.
lint-staged lint-staged-config npm Run linters on git staged files.
markdownlint markdownlint-config npm A Node.js style checker and lint tool for Markdown/CommonMark files.
postcss postcss-config npm Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the
secretlint secretlint-config npm Pluggable linting tool to prevent committing credential
stylelint stylelint-config npm Linter that helps you avoid errors and enforce conventions in your styles
tsconfig tsconfig-config npm 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

Licence

FOSSA Status


🧱 Useful Resources


🙆🏼‍♂️ Author Information

This repository was created in 2022 by lotyp / wayofdev.


🫡 Contributors

Contributors

Contributors

🤑 Sponsors

Reproto Logo
Reproto

🎖️ Financial Support
VarsityBase Logo
VarsityBase

🎖️ Financial Support
Vercel Logo
Vercel

☁️ Infrastructure Support
Sentry Logo
Sentry

☁️ Infrastructure Support
ZenHub Logo
ZenHub

☁️ Infrastructure Support