Linting and Formatting

Linting & Formatting

Consistent linting, formatting, and naming conventions ensure that all practicum codebases remain clean, readable, and predictable — regardless of which IDE or language you use.
This page outlines the required tools and rules used across student projects, with deeper details available in each section below.

---

Quick Navigation

• Prettier Rules
• ESLint Conventions
• Auto-Formatting Code
• File & Folder Naming Standards

---

Prettier Rules

(Anchor: linting-and-formatting#prettier-rules)

View Prettier Rules

Prettier is our primary code formatter for JavaScript, TypeScript, JSON, Markdown, CSS, and more.
It ensures that code remains consistent across all team members, regardless of IDE or OS.

Required Prettier Configuration

Most practicum repos include a pre-configured .prettierrc file.
Example configuration:

<json> { "singleQuote": true, "semi": false, "tabWidth": 2, "trailingComma": "es5", "printWidth": 80 } <>

Best Practices

• Enable Format on Save in your IDE
• Do not change formatting rules per file
• Let Prettier handle spacing, semicolons, and quotes
• Avoid manual formatting — consistency > personal preference

Read More:

• Official Prettier Documentation

---

ESLint Conventions

(Anchor: linting-and-formatting#eslint-conventions)

View ESLint Conventions

ESLint catches bugs, enforces coding style, and ensures consistent behavior across JavaScript/TypeScript projects.

What ESLint Enforces

• Unused variables
• Incorrect imports
• Invalid TypeScript types
• Async/await issues
• Undefined variables
• Common React/Expo pitfalls

Example ESLint Config

<json> { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "rules": { "no-unused-vars": "warn", "no-console": "off", "@typescript-eslint/no-explicit-any": "warn" } } <>

General ESLint Practices

• Fix all lint errors before submitting a PR
• Avoid suppressing rules unless approved
• Use // TODO: with an issue reference
• Keep TypeScript typings strong (avoid any)

Read More:

• ESLint Documentation

---

Auto-Formatting Code

(Anchor: linting-and-formatting#auto-formatting-code)

View Auto-Formatting Instructions

Auto-formatting ensures consistency and saves time by fixing indentation, spacing, quotes, and more automatically.

VS Code

Enable Format on Save:

• Go to Settings → search “Format on Save”
• Enable checkbox
• Verify Prettier is selected as the default formatter

Set Default Formatter

<json> { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true } <>

---

WebStorm

• Go to Preferences → Tools → Actions on Save
• Enable Reformat Code
• Enable Run Prettier
• Ensure Prettier path is detected

---

Android Studio

• Go to Settings → Tools → Actions on Save
• Enable:
  • Reformat Code
  • Optimize Imports

Android Studio does not use Prettier for Kotlin/Java, but auto-formatting still improves consistency.

---

File & Folder Naming Standards

(Anchor: linting-and-formatting#file--folder-naming-standards)

View Naming Standards

Naming conventions ensure that codebases remain predictable and easy to navigate.

General Naming Rules

• Use lowercase-hyphens for folders

  • components/
  • login-screen/
  • api-services/

• Use camelCase for JavaScript/TypeScript files

  • userProfile.ts
  • authService.js

• Use PascalCase for React/Expo components

  • HomeScreen.tsx
  • LoginForm.tsx

• Use snake_case for Python files

  • data_loader.py
  • user_model.py

• Use snake_case for SQL tables and columns

  • user_accounts
  • created_at

Avoid:

• Spaces in filenames
• Mixed naming styles
• Uppercase directory names
• Extremely long file names

Folder Structure Patterns

• Group by feature, not file type (for most JS/TS projects):
  <> src/ login/ LoginScreen.tsx loginStyles.ts authService.ts dashboard/ DashboardScreen.tsx dashboardStyles.ts <>

• For Python, group modules by function or purpose

• For SQL, group schema files by domain or migration number

---