Code Quality Tools
Learn to use code quality tools for maintaining clean, consistent JavaScript code. This is a foundational concept in programming and web interactivity that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world JavaScript experience. Take your time with each section and practice the examples
ESLint Configuration
ESLint helps identify and fix problems in JavaScript code, ensuring consistency and catching potential errors.. This is an essential concept that every JavaScript developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
ESLint Setup
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'@typescript-eslint/recommended'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'prefer-const': 'error',
'no-var': 'error'
}
};Prettier Integration
// .prettierrc
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}Husky Pre-commit Hooks
// package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": ["eslint --fix", "prettier --write"]
}
}Code Coverage
// jest.config.js
module.exports = {
collectCoverage: true,
coverageDirectory: 'coverage',
coverageReporters: ['text', 'lcov', 'html'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80
}
}
};Mini-Project: Quality Pipeline
// quality-check.js
const { execSync } = require('child_process');
class QualityChecker {
static runLinting() {
try {
execSync('npx eslint src/ --ext .js,.jsx', { stdio: 'inherit' });
console.log('✅ Linting passed');
return true;
} catch (error) {
console.error('❌ Linting failed');
return false;
}
}
static runTests() {
try {
execSync('npm test -- --coverage', { stdio: 'inherit' });
console.log('✅ Tests passed');
return true;
} catch (error) {
console.error('❌ Tests failed');
return false;
}
}
static formatCode() {
try {
execSync('npx prettier --write src/', { stdio: 'inherit' });
console.log('✅ Code formatted');
return true;
} catch (error) {
console.error('❌ Formatting failed');
return false;
}
}
static runAll() {
const results = {
formatting: this.formatCode(),
linting: this.runLinting(),
testing: this.runTests()
};
const allPassed = Object.values(results).every(Boolean);
console.log(allPassed ? '🎉 All quality checks passed!' : '💥 Some quality checks failed!');
return allPassed;
}
}