How to Enforce Consistent Code Styles Using ESLint and Prettier
Designed for Senior frontend engineers newly tasked with maintaining cross-team codebases in fast-scaling SaaS startups to spark real collaboration and high-energy learning.
A 90-minute hybrid workshop (in-person + Zoom) for senior engineers struggling with merge conflicts, inconsistent formatting, and code reviews bogged down in style debates. The session takes place in a collaborative workspace, with participants seeking actionable solutions to enforce code consistency across rapidly growing teams.
Code Style Detective
Kick off with a visual challenge: show participants a mash-up of three code snippets from different team members—each with subtle style differences. Ask, 'What patterns jump out? Why might these inconsistencies matter?' Participants annotate differences in real time using Zoom's annotation tool or sticky notes in person.
Tap to view the full activity.
Why this works
Curiosity triggers engagement by inviting learners to notice real patterns before introducing tools. It establishes relevance and primes participants to explore solutions actively.
ESLint & Prettier Mythbusters
Reveal common misconceptions: present three statements on slides ('Prettier can replace ESLint entirely', 'ESLint fixes all formatting issues', 'Combining both leads to impossible conflicts'). Ask participants to vote (thumbs up/down or poll), then debrief with live demos debunking each myth.
Tap to view the full activity.
Why this works
Surfacing misconceptions helps learners confront faulty mental models, clearing the ground for accurate understanding.
Quick-Fix Pairing
Low-pressure breakout: participants pair up (in Zoom breakout or side-by-side) and run ‘eslint --fix’ and ‘prettier --write’ on a sample repo. No wrong answers—each pair compares outputs and notes differences. Facilitator circulates to answer questions and encourage exploration.
Tap to view the full activity.
Why this works
Low-stakes experimentation builds confidence, especially when learners see immediate results and have peer support.
Merge Mayhem Mini-Game
High-energy activation: simulate a heated code review by splitting the room into two teams. Each team is assigned a different code style (tabs vs spaces, single vs double quotes). Teams merge their code and resolve conflicts live. Facilitator narrates, highlighting how ESLint/Prettier could automate this.
Tap to view the full activity.
Why this works
Simulated conflict makes the problem visceral, energizing the room and motivating participants to seek robust solutions.
CI Pipeline Dilemma
Present a real-world dilemma: a team’s CI pipeline starts failing due to style errors, blocking deployments. Challenge participants to brainstorm solutions using ESLint/Prettier integrations, and discuss trade-offs (e.g., strictness vs developer velocity).
Tap to view the full activity.
Why this works
Real-world hooks ground theory in practical stakes, prompting deeper strategic thinking and ownership.
Personal Style Pledge
Invite participants to reflect: ‘What code style habit causes you the most pain in team reviews?’ Each writes their response (sticky note or chat), then crafts a small pledge for improvement (e.g., ‘I’ll always run Prettier before pushing’). Volunteers share pledges to close the session.
Tap to view the full activity.
Why this works
Active reflection cements learning by connecting concepts to personal experience and creating commitment.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.