Core tool
ESLint and Prettier
Platform under construction
Linting & Formatting
Linting finds risky code patterns; formatting keeps code style consistent.
const total = items.reduce((sum, item) => sum + item.price, 0);
Testing, Tooling & Production
Linting & Formatting makes JavaScript safer to change.
Linting finds risky code patterns; formatting keeps code style consistent.
Professional JavaScript is not only the code that runs in the browser. It is also the checks, tooling and release habits around that code.
Good tooling gives you confidence to refactor, ship and debug without turning every change into guesswork.
Confidence
Tests and tooling reduce fear when changing code.
Maintainability
Consistent structure helps teams and future-you.
Release discipline
Production checks catch issues before users do.
Examples
Tooling turns JavaScript into reliable product work.
Use tooling as a safety net
const total = items.reduce((sum, item) => sum + item.price, 0);
Depend on memory and manual clicking
var total=0;items.map(item=>total+=item.price)
Code patterns
Reusable examples for quick reference.
Use these examples as a practical bridge from lesson code to maintainable production code.
Professional pattern
A cleaner example of the topic.
const total = items.reduce((sum, item) => sum + item.price, 0);
Fragile pattern
A habit that does not scale well.
var total=0;items.map(item=>total+=item.price)
Use user-facing selectors
Tests should read like user behavior when possible.
page.getByRole("button", { name: "Save" });
page.getByRole("status");
Automate the boring checks
Repeatable scripts make releases calmer.
"scripts": {
"check": "npm run lint && npm run test && npm run build"
}
Rules that matter
Reliable code needs repeatable checks.
The browser is only one part of JavaScript work. The workflow around it decides whether the code remains safe to change.
Test behavior, not implementation details
A test should survive harmless refactors.
Keep fast tests fast
Unit tests should give quick feedback.
Use E2E for critical paths
Browser tests are valuable but heavier.
Automate formatting
Style debates should not block real work.
Build before deploying
Production bundles should be generated and verified.
Preview production output
The build can differ from the dev server.
Production thinking
Ship with a process, not hope.
Why does this matter?
Testing and tooling protect time. They let you improve code without constantly wondering what broke somewhere else.
Accessibility
Testing with roles and labels naturally pushes code toward accessible markup and user-centered behavior.
Production note
Production JavaScript should pass linting, tests, build checks, accessibility checks and basic performance review.
SEO note
Stable production builds and tested navigation help search engines and users reach content consistently.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change one expected value and make the check fail.
- Explain which layer this test or tool protects.
- Write one extra check you would add in a real project.
Practice assignment
Do this before moving to the next topic.
- Identify the smallest behavior worth checking.
- Write a readable test or checklist item.
- Run the check before changing the next feature.
Try it yourself
Experiment with Linting & Formatting
Self-check
Before you continue, prove that you understand Linting & Formatting.
Answer these before moving to the next testing and production lesson.
- What confidence does Linting & Formatting provide?
- What should this tool not be used for?
- How could this fail if the codebase grows?
- Which script or check belongs in CI?
- How does this help future maintenance?
Senior audit upgrade
Extra production context for Linting & Formatting.
Formatter versus linter
- Prettier formats code style.
- ESLint catches code-quality and correctness issues.
- Do not argue manually about spacing that a formatter can handle.
- Do not expect a formatter to find unsafe logic.