TypeScript Tutorial: Building a Simple Web-Based Code Style Checker

Written by

learnmodernjavascript

in

In the world of software development, maintaining a consistent and readable codebase is crucial. This is where code style checkers come into play. They automatically analyze your code and identify violations of predefined style rules, helping you catch errors, improve readability, and ensure consistency across your project. In this tutorial, we’ll dive into building a simple web-based code style checker using TypeScript. We’ll explore the core concepts, implement the necessary features, and learn how to integrate it into your development workflow. This project will not only teach you the practical application of TypeScript but also provide valuable insights into code quality and automated style enforcement.

Why Code Style Matters

Before we jump into the code, let’s understand why code style is so important. Imagine reading a book where the paragraphs are inconsistent, the fonts change randomly, and there are grammatical errors everywhere. It would be difficult to focus on the content, right? Code is similar. Consistent code style enhances readability, making it easier for you and your team to understand and maintain the code. It also reduces the likelihood of introducing bugs and improves collaboration.

Here are some key benefits of using a code style checker:

  • Improved Readability: Consistent formatting makes code easier to read and understand.
  • Reduced Errors: Style checkers can catch potential errors and inconsistencies early on.
  • Enhanced Collaboration: A consistent style makes it easier for multiple developers to work on the same project.
  • Automated Enforcement: Style checkers automate the process of enforcing style rules, saving time and effort.
  • Increased Maintainability: Well-formatted code is easier to maintain and update.

What We’ll Build

Our web-based code style checker will be a simple application that takes code as input and checks it against a set of predefined style rules. It will then display any violations found, along with the line number and a description of the issue. We’ll use TypeScript for the backend logic and a basic HTML/CSS/JavaScript setup for the frontend. The focus will be on the TypeScript implementation, which will handle the core logic of parsing code, applying style rules, and reporting violations.

Prerequisites

To follow this tutorial, you’ll need the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your system.
  • A text editor or IDE (e.g., VS Code) for writing code.
  • A web browser to view the application.

Setting Up the Project

Let’s start by setting up our project. Create a new directory for your project and navigate into it using the command line:

mkdir code-style-checker
cd code-style-checker

Initialize a new Node.js project:

npm init -y

This will create a `package.json` file in your project directory. Now, let’s install TypeScript and some development dependencies:

npm install typescript --save-dev

Next, initialize a TypeScript configuration file:

npx tsc --init

This command creates a `tsconfig.json` file. You can customize this file to configure how TypeScript compiles your code. For this project, we’ll keep the default settings for simplicity. Finally, create the following directory structure in your project:

code-style-checker/
  ├── src/
  │   └── index.ts
  ├── public/
  │   ├── index.html
  │   └── style.css
  ├── tsconfig.json
  └── package.json

Writing the TypeScript Code

Now, let’s write the TypeScript code for our code style checker. Open the `src/index.ts` file and start by defining the core data structures and functions.

Defining Style Rules

First, we need to define the style rules we want to enforce. For this example, we’ll create a simple rule that checks for the use of tabs instead of spaces for indentation. In a real-world scenario, you would have many more rules, covering things like line length, variable naming conventions, and more.

// src/index.ts

interface StyleViolation {
  line: number;
  message: string;
}

interface StyleRule {
  check: (code: string, lineNumber: number) => StyleViolation | null;
  message: string;
}

const rules: StyleRule[] = [
  {
    check: (code: string, lineNumber: number) => {
      if (code.includes('t')) {
        return {
          line: lineNumber,
          message: "Use spaces instead of tabs for indentation.",
        };
      }
      return null;
    },
    message: "Use spaces instead of tabs for indentation.",
  },
];

Here, we define two interfaces: `StyleViolation` to represent a style violation and `StyleRule` to represent a style rule. The `rules` array holds our style rules. Each rule has a `check` function that takes the code and line number and returns a `StyleViolation` if a violation is found, or `null` otherwise. The `message` provides a description of the rule.

Implementing the Code Checker

Next, we’ll implement the main function that checks the code against our style rules. This function will take the code as input, split it into lines, and apply each rule to each line.

// src/index.ts (continued)

function checkCodeStyle(code: string): StyleViolation[] {
  const violations: StyleViolation[] = [];
  const lines = code.split('n');

  lines.forEach((line, index) => {
    const lineNumber = index + 1;
    rules.forEach((rule) => {
      const violation = rule.check(line, lineNumber);
      if (violation) {
        violations.push(violation);
      }
    });
  });

  return violations;
}

The `checkCodeStyle` function takes the code as a string, splits it into lines, and iterates through each line. For each line, it iterates through the style rules and calls the `check` function of each rule. If a violation is found, it adds it to the `violations` array. Finally, it returns the array of violations.

Displaying the Results

Now, let’s create a function to display the style violations in the browser. We’ll need some basic HTML to display the results.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Style Checker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Code Style Checker</h1>
  <textarea id="code" rows="10" cols="80" placeholder="Enter your code here..."></textarea>
  <button id="checkButton">Check Style</button>
  <div id="results"></div>
  <script src="index.js"></script>
</body>
</html>

Create a simple HTML file in `public/index.html` with a text area for the code input, a button to trigger the check, and a `div` to display the results. We will also create a basic CSS file in `public/style.css` to style the page.

/* public/style.css */
body {
  font-family: sans-serif;
  margin: 20px;
}

textarea {
  margin-bottom: 10px;
}

.violation {
  color: red;
  margin-bottom: 5px;
}

Now, let’s create a function to display the violations in the browser. This function will take an array of `StyleViolation` objects and display them in the `results` div.

// src/index.ts (continued)

function displayResults(violations: StyleViolation[]): void {
  const resultsDiv = document.getElementById('results') as HTMLDivElement;
  resultsDiv.innerHTML = ''; // Clear previous results

  if (violations.length === 0) {
    resultsDiv.textContent = 'No style violations found.';
    return;
  }

  violations.forEach((violation) => {
    const violationElement = document.createElement('div');
    violationElement.classList.add('violation');
    violationElement.textContent = `Line ${violation.line}: ${violation.message}`;
    resultsDiv.appendChild(violationElement);
  });
}

This `displayResults` function clears any previous results, checks if there are any violations, and then iterates through the `violations` array. For each violation, it creates a `div` element, adds the `violation` class for styling, and sets the text content to the violation message. Finally, it appends the `div` element to the `results` div.

Connecting the Frontend and Backend

We’ll now write the JavaScript code to connect the frontend and backend. We’ll get the code from the textarea, call the `checkCodeStyle` function, and then display the results.

// src/index.ts (continued)

function main(): void {
  const checkButton = document.getElementById('checkButton') as HTMLButtonElement;
  const codeTextArea = document.getElementById('code') as HTMLTextAreaElement;

  checkButton.addEventListener('click', () => {
    const code = codeTextArea.value;
    const violations = checkCodeStyle(code);
    displayResults(violations);
  });
}

main();

This code gets the check button and the code textarea from the DOM. It adds an event listener to the button. When the button is clicked, it gets the code from the textarea, calls `checkCodeStyle`, and then calls `displayResults` to show the violations.

Compiling and Running the Application

Now that we’ve written the code, let’s compile and run the application. First, compile the TypeScript code using the TypeScript compiler:

npx tsc

This command will generate a `index.js` file in your `public` directory (based on your `tsconfig.json` configuration). You can then open the `public/index.html` file in your web browser. Enter some code in the text area, including some tabs for indentation, and click the “Check Style” button. You should see the style violations displayed below the button.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them when building a code style checker:

  • Incorrect File Paths: Ensure that the file paths in your HTML file (`index.html`) are correct. The `<script src=”index.js”>` tag should correctly point to the compiled JavaScript file.
  • Type Errors: TypeScript will highlight type errors during compilation. Make sure to fix these errors before running the application. Use type annotations to specify the types of variables and function parameters.
  • Incorrect DOM Element Selection: When accessing DOM elements using `document.getElementById`, ensure that the element IDs match those in your HTML file. Also, use type assertions (e.g., `as HTMLButtonElement`) to help TypeScript understand the element types.
  • Incorrect Event Listener Usage: Make sure your event listeners are correctly attached and that the event handler function is properly defined.
  • Not Clearing Previous Results: Always clear the previous results before displaying new violations to prevent the results from accumulating.

Expanding the Functionality

Our code style checker is functional, but it’s very basic. Here are some ways you can expand its functionality:

  • Add More Style Rules: Implement more style rules to cover different aspects of code style, such as line length, variable naming conventions, and more.
  • Support Different Languages: Extend the code checker to support other programming languages. This would involve creating parsers for those languages and adapting the style rules accordingly.
  • Provide Suggestions: Instead of just reporting violations, you could provide suggestions on how to fix them automatically.
  • Integrate with a Code Editor: Integrate the code style checker with a code editor (like VS Code) to provide real-time feedback as the developer types.
  • Configuration Options: Allow users to configure the style rules and the severity of each violation.
  • Add a Command-Line Interface (CLI): Create a CLI version of the code style checker to use it in build processes or as part of a CI/CD pipeline.

Key Takeaways

  • TypeScript for Frontend and Backend: TypeScript is a powerful language that can be used for both frontend and backend development, providing type safety and improved code maintainability.
  • Code Style Checkers Improve Code Quality: Code style checkers are essential tools for maintaining code quality, readability, and consistency.
  • Building a Code Style Checker is a Great Learning Experience: This project helps you understand the basics of parsing code, applying style rules, and reporting violations.
  • Extensibility and Customization: The architecture can be easily extended to support more rules and features.

FAQ

Here are some frequently asked questions about building a code style checker:

  1. What are some popular code style rules? Some popular code style rules include using spaces instead of tabs for indentation, limiting line length, consistent variable naming, and proper use of whitespace.
  2. How do I handle different programming languages? To handle different programming languages, you need to use a parser for each language to tokenize and analyze the code. You will then need to adapt the style rules to each language’s syntax.
  3. How can I integrate the code style checker with a code editor? You can integrate the code style checker with a code editor by creating a plugin or extension. The plugin would parse the code in the editor, run the style checker, and display any violations directly in the editor.
  4. Can I use this code style checker in a CI/CD pipeline? Yes, you can extend this code style checker with a command-line interface (CLI) to use it in a CI/CD pipeline. The CLI version would take code as input, run the style checker, and report any violations. The CI/CD pipeline would then fail the build if any violations are found.
  5. What are some other tools I can use for code style checking? Popular tools include ESLint, Prettier, and stylelint. ESLint is a linter that can enforce style rules and find potential errors in your code. Prettier is a code formatter that automatically formats your code to a consistent style. stylelint is a linter for CSS, SCSS, and Less.

This tutorial has provided a foundational understanding of building a simple code style checker using TypeScript. You’ve learned about the importance of code style, implemented core functionality, and explored ways to expand the tool’s capabilities. With this knowledge, you can now build a more sophisticated code style checker that fits your specific needs. By creating this tool, you’ve not only improved your understanding of TypeScript and code quality but also gained a valuable tool to improve your own coding practices and the quality of your projects. Continuous learning and exploring new features will help you stay up-to-date with the latest best practices and tools in the ever-evolving world of software development. As you continue to refine and expand this code style checker, you’ll find that it becomes an indispensable part of your development toolkit, consistently improving the quality and maintainability of your code.

More posts