Module 6: Tooling

Green Boost (GB) tooling includes: PNPM, ESLint, TypeScript Compiler, NPM Audit, Prettier, and Husky. GB projects created with gboost create are setup as a monorepo.

Learn

• Monorepo: scan Monorepos Explained (opens in a new tab)
  • Focus on what monorepos are and why you should use them. This explainer resource is from a 3rd party vendor but still includes valuable information. GB doesn’t use full blown monorepo tooling currently. Still considering whether additional complexity is worth it. Specifically, considering Turborepo (opens in a new tab) for faster Lambda builds.
• Package Manager: lightly scan the PNPM docs (opens in a new tab)
  • Focus on motivation (opens in a new tab) and workspaces (opens in a new tab)
• Static Code Analysis: lightly scan the ESLint docs (opens in a new tab)
  • Focus on core concepts (opens in a new tab)
• Type Checking: lightly scan the tsc (TypeScript Compiler) docs (opens in a new tab)
• 3rd Party Vulnerability Scanning: read docs here (opens in a new tab)
• Code Formatting: lightly scan the Prettier docs (opens in a new tab)
  • You'll notice GB templates have no prettier configuration as they use the default prettier settings. If desired, this can be easily customized as shown in the docs.
• Pre-commit Hooks: lightly scan the Husky docs (opens in a new tab)

Apply

M6.1 - PNPM Workspaces

• Review the pnpm-workspace.yaml file in root of GB repo. Understand how workspaces reference each other’s packages

M6.2 - PNPM Scripts

• Run pnpm lint and pnpm typecheck and pnpm test in the root of the repository. Notice how PNPM is running those commands in every workspace that has those commands within their package.json#scripts

M6.3 - Static Code Analysis with ESLint

• Intentionally create a code-smell (see all rules here (opens in a new tab)) and verify ESLint is runs and shows red squiggles in your editor. If you're using VS Code, you will need to install the ES Lint Extension to see linting. Also recommend the Error Lens extension if you like seeing the error in line with your code.
• Review ESLint configuration. Add a custom ESLint rule. Understand how ESLint works with Prettier to enforce code formatting.

M6.4 - NPM Audit

• pnpm audit is an alias for npm audit
• Run pnpm audit. Any CVEs?
• If you found any CVEs of sub-dependencies - dependencies that you didn't specify the version for. How can you update them? Checkout PNPM's overrides configuration option. Now override the offending package's version with the overrides configuration option and verify pnpm audit succeeds.

M6.5 - Pre-commit Hooks

• Make an update in a TypeScript file in each each top level folder. The change can be as trivial as adding a comment.
• Now stage and commit those changes.
• Notice how Husky's pre-commit hook defined in .husky/pre-commit runs invoking pnpm lint-staged which in turn runs the .lintstagedrc.js file in each top level folder.