TL;DR
ESLint finds bugs and security issues in JavaScript/TypeScript code. Prettier only formats code and has no security features. They serve different purposes and should be used together. ESLint with security plugins catches vulnerabilities; Prettier ensures consistent formatting. Use both in your CI pipeline for vibe-coded apps.
ESLint and Prettier are often discussed together but serve fundamentally different purposes. ESLint is a linter that finds bugs and enforces code patterns. Prettier is a formatter that enforces consistent styling. For security, ESLint is the relevant tool. Here's how they compare and work together.
Comparison Overview
| Feature | ESLint | Prettier |
|---|---|---|
| Primary Purpose | Bug/pattern detection | Code formatting |
| Security Rules | Yes (with plugins) | No |
| Auto-fix | Some rules | All formatting |
| Custom Rules | Extensive | Very limited |
| Performance Impact | Moderate | Fast |
| CI Integration | Essential | Recommended |
ESLint Security Features
Security-Focused Plugins
ESLint's real security value comes from plugins that detect vulnerabilities:
- eslint-plugin-security: Detects common Node.js security issues
- eslint-plugin-no-unsanitized: Prevents XSS via innerHTML and similar
- eslint-plugin-security-node: Additional Node.js security rules
- @typescript-eslint: Type-aware rules that catch potential issues
Security Rules Examples
ESLint security plugins catch issues like:
Prettier's Role
What Prettier Does
Prettier formats code for consistent style: indentation, line length, quotes, semicolons. It has no concept of security or bugs. It won't catch vulnerabilities or enforce secure patterns. Its benefit is eliminating style debates and ensuring consistent, readable code.
Why Formatting Matters
While Prettier doesn't directly improve security, consistent formatting makes code review easier. Reviewers can focus on logic and security issues rather than style inconsistencies. This indirectly improves security by making reviews more effective.
ESLint's Security Value: Essential for catching security issues during development. Configure with security plugins and run in CI to catch vulnerabilities before they reach production. ESLint can enforce secure patterns that prevent entire classes of bugs.
Prettier's Value: Makes code consistently formatted, improving readability and code review effectiveness. No direct security value, but supports better reviews. Use alongside ESLint, not as a replacement for security tooling.
Using Both Together
Recommended Setup
Use both ESLint and Prettier together. ESLint handles logic and security; Prettier handles formatting. Use eslint-config-prettier to disable ESLint's formatting rules that conflict with Prettier.
- Install both as dev dependencies
- Configure ESLint with security plugins
- Use eslint-config-prettier to avoid conflicts
- Run both in CI pipeline
- Enable editor integration for both
Security Best Practices
- Enable eslint-plugin-security for Node.js projects
- Use no-unsanitized plugin for browser code
- Configure rules as errors, not warnings
- Block merges on ESLint failures in CI
- Keep ESLint and plugins updated
- Review and customize rules for your codebase
Can Prettier catch security issues?
No. Prettier only formats code; it doesn't analyze it for bugs or security issues. You need ESLint with security plugins to catch vulnerabilities. Don't rely on Prettier for anything security-related.
Should I run both in CI?
Yes. ESLint catches bugs and security issues; Prettier ensures consistent formatting. Both should run in CI and block merges on failures. This ensures code quality and security standards are maintained.
What about Biome?
Biome (formerly Rome) is a newer tool that combines linting and formatting. It's faster but has fewer rules than ESLint. For security-focused projects, ESLint's mature plugin ecosystem still provides better coverage.
Beyond Linting
CheckYourVibe provides deeper security analysis than ESLint alone can offer.
Try CheckYourVibe Free