Skip to content

Latest commit

 

History

History
128 lines (83 loc) · 4.7 KB

DEVELOPMENT.md

File metadata and controls

128 lines (83 loc) · 4.7 KB
Raw

Development

After forking the repo from GitHub and installing pnpm:

git clone https://github.com/<your-name-here>/refined-saved-replies
cd refined-saved-replies
pnpm install

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

Building for Development

Run ESBuild locally to build source files:

pnpm dev

Add --watch to run the builder in a watch mode that continuously re-builds as you save files:

pnpm dev --watch

Local Development with Chrome

Follow Google Chrome's Load an unpacked extension guide to load this repository's directory as an extension locally.

♻️ Remember to reload the extension in chrome://extensions whenever you make changes locally!

Local Development with Firefox

Follow Firefox's Temporary installation in Firefox guide to load this repository's directory as an extension locally.

You'll then need to authorize the extension to run on https://github.com:

  1. Find and select the Extensions icon in the top right of Firefox
  2. Select the "Manage Extension" gear icon next to Refined Saved Replies
  3. Select the "Always Allow on github.com" option

♻️ Remember to reload the extension in about:debugging#/runtime/this-firefox whenever you make changes locally!

Building for Production

Run web-ext to build a production-ready .zip under ./web-ext-artifacts/:

pnpm build

Then upload that ./web-ext-artifacts/refined_saved_replies-*.zip file to:

Formatting

Prettier is used to format code. It should be applied automatically when you save files in VS Code or make a Git commit.

To manually reformat all files, you can run:

pnpm format --write

Linting

This package includes several forms of linting to enforce consistent code quality and styling. Each should be shown in VS Code, and can be run manually on the command-line:

  • pnpm lint (ESLint with typescript-eslint): Lints JavaScript and TypeScript source files
  • pnpm lint:knip (knip): Detects unused files, dependencies, and code exports
  • pnpm lint:md (Markdownlint): Checks Markdown source files
  • pnpm lint:package-json (npm-package-json-lint): Lints the package.json file
  • pnpm lint:packages (pnpm dedupe --check): Checks for unnecessarily duplicated packages in the pnpm-lock.yml file
  • pnpm lint:spelling (cspell): Spell checks across all source files
  • pnpm lint:web-ext (web-ext): Lints browser extension metadata after pnpm dev creates local files

Read the individual documentation for each linter to understand how it can be configured and used best.

For example, ESLint can be run with --fix to auto-fix some lint rule complaints:

pnpm run lint --fix

Testing

Vitest is used for tests. You can run it locally on the command-line:

pnpm run test

Add the --coverage flag to compute test coverage and place reports in the coverage/ directory:

pnpm run test --coverage

Note that console-fail-test is enabled for all test runs. Calls to console.log, console.warn, and other console methods will cause a test to fail.

Debugging Tests

This repository includes a VS Code launch configuration for debugging unit tests. To launch it, open a test file, then run Debug Current Test File from the VS Code Debug panel (or press F5).

Type Checking

You should be able to see suggestions from TypeScript in your editor for all open files.

However, it can be useful to run the TypeScript command-line (tsc) to type check all files in src/:

pnpm tsc

Add --watch to keep the type checker running in a watch mode that updates the display as you save files:

pnpm tsc --watch