SESSION 010 — Environment Polish

01

Configure ESLint

▶

Examine the existing .eslintrc.json — what rules are enabled?

Run ESLint against a source file and read the output:

npx eslint src/scripts/app.js

Fix 3 ESLint warnings in the codebase. For each fix, understand what the rule catches:

Rule	What It Catches
no-unused-vars	Variables declared but never used (dead code)
eqeqeq	== instead of === (type coercion trap)
no-console	console.log left in production code
no-undef	Using a variable that doesn't exist

ESLint catches bugs BEFORE you run the code. It's static analysis — reading your code without executing it. Like a spell-checker that also checks grammar.

02

Configure Prettier

▶

Examine .prettierrc — what's the style? (tabs/spaces, quotes, semicolons)

Format a messy file from the terminal:

npx prettier --write src/scripts/app.js

Enable "Format on Save" in VS Code:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Now every save auto-formats. Write some intentionally messy code, save, watch it snap into place.

03

Set Up Shell Aliases

▶

Edit your shell configuration file:

# macOS (Zsh)
code ~/.zshrc

# Linux (Bash)
code ~/.bashrc

Add these aliases:

# Git shortcuts
alias gs="git status"
alias gc="git commit -m"
alias gp="git push"
alias gl="git log --oneline --graph"

# Navigation
alias ll="ls -la"
alias px="cd ~/pixelcraft && npm run dev"

Reload the config:

source ~/.bashrc # or source ~/.zshrc

Test every alias. gs should now do what git status used to take.

04

Understand Environment Variables

▶

Explore the environment variables your system already has:

echo $HOME          # Your home directory
echo $PATH          # Where the system looks for commands
echo $USER          # Your username

$PATH is critical — it's a colon-separated list of directories the OS searches when you type a command. If a tool "isn't found," it's usually a PATH problem.

05

Create a .env File

▶

Create a .env file for PixelCraft:

API_KEY=sk-test-12345
DB_URL=mongodb://localhost:27017/pixelcraft
NODE_ENV=development

Immediately add .env to .gitignore:

echo ".env" >> .gitignore
git status     # .env must NOT appear as untracked

File	Committed?	Purpose
.env	❌ NEVER	Real secrets, local only
.env.example	✅ YES	Template showing required vars (no real values)

Committing an API key to a public repo is one of the most common (and expensive) mistakes in software. Companies have lost millions. The .env + .gitignore pattern prevents this.

06

Git Hooks with Husky + lint-staged

▶

The idea: automatically lint and format code before every commit.

Install Husky and lint-staged:

npm install --save-dev husky lint-staged
npx husky init

Configure lint-staged in package.json:

"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"],
  "*.css": ["prettier --write"],
  "*.html": ["prettier --write"]
}

Set up the pre-commit hook:

echo "npx lint-staged" > .husky/pre-commit

Now try committing badly formatted code:

# Write intentionally messy code
echo "const   x=1;var y =   2" > test.js
git add test.js
git commit -m "Test the hook"
# → Hook runs ESLint + Prettier → auto-fixes before commit lands!

With this setup, it's physically impossible to commit unformatted code. The hook catches it every time. This is how professional teams maintain code quality at scale.

ENVIRONMENT POLISH