myHotTake

Tag: TypeScript coding standards

  • How to Enforce Coding Standards in TypeScript Projects?

    Hey there! If you enjoy this story, feel free to give it a like or share it with others who might find it interesting.


    I’m leading a band of explorers on an adventure through the dense, jungle that is our TypeScript project. Each member of my team is an expert in their own right, but without a clear path and some rules to guide us, chaos can quickly ensue. To make sure we all stay on track and avoid getting lost in the thicket, I decide to enforce some ground rules—these are our coding standards.

    Think of these coding standards as a compass. Just like a compass helps us navigate through the jungle by pointing us in the right direction, coding standards guide us in writing consistent and reliable code. This compass ensures that even if we encounter unexpected challenges or complex coding problems, we all approach them using a common language and understanding.

    Now, to make sure everyone has a compass in hand, I use tools like ESLint and Prettier. These are like the rugged, trusty gadgets in our explorer kit; they check our work and ensure we’re following the path. ESLint is like our map reader, pointing out when we stray from the path with warnings and errors. Prettier, on the other hand, is like our tidy camp leader, making sure everything looks neat and organized, so we can quickly find what we need.

    I also set up a campfire meeting—our code reviews. Around this campfire, we gather to discuss our journey, share insights, and ensure everyone is aligned. It’s here that we reinforce our rules and help each other improve. This camaraderie makes our group stronger and our journey smoother.

    Finally, I establish a base camp—a Continuous Integration system. This base camp is our checkpoint, where code is automatically tested and validated before it’s allowed to proceed further. It acts as a safeguard, ensuring that any deviation from our standards is caught early, preventing us from venturing into dangerous territory.

    In this way, by using a compass, gadgets, campfire meetings, and a base camp, I ensure our TypeScript project stays on course, with everyone working together harmoniously, like a well-oiled expedition team. And that’s how I enforce coding standards on our adventurous journey through the TypeScript jungle.


    The Compass: Coding Standards

    The coding standards are like our compass, guiding us through the wilds of JavaScript. For example, we might have a rule that all functions should use arrow function syntax for consistency:

    // Bad: Regular function declaration
    function add(a, b) {
        return a + b;
    }
    
    // Good: Arrow function
    const add = (a, b) => a + b;

    The Gadgets: ESLint and Prettier

    ESLint acts as our map reader, pointing out deviations. Here’s an example of an ESLint rule that enforces the use of === instead of ==:

    // ESLint configuration
    {
      "rules": {
        "eqeqeq": "error"
      }
    }
    
    // Bad: Using ==
    if (a == b) {
      // ...
    }
    
    // Good: Using ===
    if (a === b) {
      // ...
    }

    Prettier, our tidy camp leader, ensures our code is formatted consistently. It might automatically reformat code like this:

    // Before Prettier
    const multiply=(a,b)=>{return a*b;}
    
    // After Prettier
    const multiply = (a, b) => {
      return a * b;
    };

    The Campfire: Code Reviews

    Our campfire meetings—code reviews—are where we reinforce our standards. During a review, I might suggest improvements like using destructuring for cleaner code:

    // Original code
    const user = getUser();
    const name = user.name;
    const age = user.age;
    
    // Improved with destructuring
    const { name, age } = getUser();

    The Base Camp: Continuous Integration

    Our base camp, or Continuous Integration (CI) system, automatically runs tests and linting checks. Here’s an example of a simple CI configuration using GitHub Actions:

    name: CI
    
    on: [push]
    
    jobs:
      build:
        runs-on: ubuntu-latest
    
        steps:
        - uses: actions/checkout@v2
        - name: Install dependencies
          run: npm install
        - name: Run ESLint
          run: npm run lint
        - name: Run tests
          run: npm test

    Key Takeaways

    1. Consistency is Key: Establishing coding standards ensures that all team members write code in a consistent manner, making it easier to read and maintain.
    2. Automate with Tools: Use tools like ESLint and Prettier to automate the enforcement of these standards, reducing manual errors and improving productivity.
    3. Collaborate and Learn: Code reviews are invaluable for sharing knowledge and improving code quality.
    4. Safeguard with CI: Implement a Continuous Integration system to automatically verify code changes, catching issues early in the development process.