JavaScript Tooling
npx machina-cli add skill hoangnguyen0403/agent-skills-standard/tooling --openclawFiles (1)
SKILL.md
1.3 KB
JavaScript Tooling
Priority: P1 (OPERATIONAL)
Essential tooling for JavaScript development.
Implementation Guidelines
- Linting: ESLint (Rec + Prettier). Fix on save.
- Formatting: Prettier. Run on save/commit.
- Testing: Jest/Vitest. Co-locate tests. >80% cov.
- Build: Vite (Apps), Rollup (Libs).
- Pkg Manager: Sync versions (
npm/yarn/pnpm).
Anti-Patterns
- No Formatting Wars: Prettier rules.
- No Untested Code: TDD/Post-code tests.
- No Dirty Commits: Lint before push.
Configuration
// .eslintrc.js
module.exports = {
extends: ['eslint:recommended', 'prettier'],
rules: { 'no-console': 'warn', 'prefer-const': 'error' },
};
// .prettierrc
{ "semi": true, "singleQuote": true, "printWidth": 80 }
// jest.config.js
export default {
coverageThreshold: { global: { lines: 80 } },
};
Reference & Examples
For testing patterns and CI/CD: See references/REFERENCE.md.
Related Topics
best-practices | language
Source
git clone https://github.com/hoangnguyen0403/agent-skills-standard/blob/develop/.github/skills/javascript/tooling/SKILL.mdView on GitHub Overview
JavaScript Tooling provides essential tooling for JS development, combining ESLint with Prettier for linting and formatting, plus Jest or Vitest for testing. It also covers builds with Vite for apps and Rollup for libraries, and keeps package manager versions in sync across the project.
How This Skill Works
The setup uses ESLint (with Prettier) and supports fix-on-save; Prettier formats on save and on commit. Testing uses Jest or Vitest with colocated test files and a global coverage threshold (>80%). Build targets are chosen by project type (Vite for apps, Rollup for libraries) while versions are synchronized across npm/yarn/pnpm.
When to Use It
- Starting a new JavaScript project and want consistent linting, formatting, and tests
- Collaborating in a team that requires standardized tooling across the codebase
- Setting up CI to enforce a minimum test coverage threshold (>80%)
- Building either an app (Vite) or a library (Rollup) with consistent tooling
- Migrating legacy projects to modern ESLint/Prettier/Jest configurations
Quick Start
- Step 1: Install and configure ESLint (with Prettier), Prettier, and Jest/Vitest for your project
- Step 2: Add configuration files (.eslintrc.js, .prettierrc, jest.config.js) as shown in the guidelines
- Step 3: Enable fix-on-save, set up a pre-commit or pre-push hook, and configure CI to enforce >80% test coverage
Best Practices
- Enable fix-on-save for ESLint and Prettier to keep code clean automatically
- Co-locate tests with source files and target >80% global coverage
- Lock and sync package manager versions across the repository (npm/yarn/pnpm)
- Avoid formatting wars by enforcing a single Prettier config and consistent rules
- Run lint before commit and ensure CI validates tests and builds
Example Use Cases
- A React SPA using Vite with ESLint + Prettier and colocated Jest tests
- A utility library built with Rollup and unit tests achieving >80% coverage
- A monorepo that synchronizes npm/yarn/pnpm versions across packages
- Pre-commit hooks enforce lint/format checks before commits
- CI pipeline that runs tests and enforces a minimum coverage threshold
Frequently Asked Questions
Add this skill to your agents
