TypeScript Tutorial: Creating a Simple Web-Based Code Formatter

Written by

learnmodernjavascript

in

In the world of web development, clean and readable code is paramount. It’s not just about making your application work; it’s about making it maintainable, collaborative, and easy to debug. Imagine a scenario where you’re working on a project with a team, and everyone has their own coding style. This can quickly lead to a chaotic codebase, making it difficult to understand the logic and introduce new features. This is where code formatting tools come in. They automatically tidy up your code, ensuring consistent style across the project. In this tutorial, we’ll dive into TypeScript and build a simple web-based code formatter. This tool will automatically format JavaScript code, making it more readable and adhering to predefined style guidelines.

Why Code Formatting Matters

Before we jump into the code, let’s understand why code formatting is so important:

  • Readability: Formatted code is easier to read and understand. Proper indentation, spacing, and line breaks make the code’s structure clear.
  • Maintainability: Clean code is easier to maintain. Developers can quickly grasp the logic and make changes without spending hours deciphering messy code.
  • Collaboration: When everyone on a team follows the same formatting rules, it simplifies collaboration. Code reviews become faster, and conflicts are less frequent.
  • Error Detection: Well-formatted code can help you spot errors more easily. The consistent structure can highlight potential issues in your code.

Project Setup

Let’s get started by setting up our project. We will use TypeScript, HTML, and a JavaScript library for formatting. Create a new project directory and navigate into it using your terminal:

mkdir code-formatter-ts
cd code-formatter-ts

Next, initialize a new Node.js project:

npm init -y

This command creates a package.json file, which will manage our project dependencies. Now, let’s install TypeScript and a code formatting library. For this tutorial, we’ll use js-beautify, a popular JavaScript beautifier.

npm install typescript js-beautify --save-dev

The --save-dev flag indicates that these are development dependencies. We’ll also need to initialize a TypeScript configuration file. Run the following command:

npx tsc --init

This creates a tsconfig.json file. You can customize this file to configure TypeScript compilation options. For this project, we’ll leave the default settings, but we will change the `outDir` to “dist”. This is where the compiled JavaScript files will be generated. Open tsconfig.json and modify the `outDir` property:


{
  "compilerOptions": {
    // ... other options
    "outDir": "dist"
  }
}

Creating the HTML Structure

Create an index.html file in your project directory. This file will contain the basic HTML structure for our web-based code formatter. Add the following code:





    
    
    <title>Code Formatter</title>
    


    <div class="container">
        <h1>Code Formatter</h1>
        <textarea id="code-input"></textarea>
        <button id="format-button">Format</button>
        <textarea id="code-output" readonly></textarea>
    </div>

This HTML provides:

  • A title for the page.
  • A text area for the user to input the JavaScript code (code-input).
  • A button to trigger the formatting process (format-button).
  • A text area to display the formatted code (code-output).
  • A link to a CSS file (style.css), which we will create later, to style the page.
  • A script tag that links to our compiled TypeScript file (dist/app.js).

Next, create a CSS file named style.css in the root directory. Add the following CSS to style the page:


body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 800px;
}

h1 {
    text-align: center;
    color: #333;
}

textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: block;
    margin: 0 auto;
}

button:hover {
    background-color: #3e8e41;
}

Writing the TypeScript Code

Now, let’s write the TypeScript code that will handle the code formatting. Create a file named app.ts in your project directory. Add the following code:


import { js_beautify } from 'js-beautify';

const codeInput = document.getElementById('code-input') as HTMLTextAreaElement;
const formatButton = document.getElementById('format-button') as HTMLButtonElement;
const codeOutput = document.getElementById('code-output') as HTMLTextAreaElement;

formatButton.addEventListener('click', () => {
    const code = codeInput.value;
    if (code) {
        try {
            const formattedCode = js_beautify(code, {
                indent_size: 4,
                space_in_empty_paren: true,
            });
            codeOutput.value = formattedCode;
        } catch (error) {
            codeOutput.value = `Error formatting code: ${error}`;
        }
    } else {
        codeOutput.value = 'Please enter code to format.';
    }
});

Let’s break down this code:

  • Import js-beautify: We import the js_beautify function from the js-beautify library.
  • Get HTML elements: We get references to the input textarea, the format button, and the output textarea using their respective IDs. We use type assertions (as HTMLTextAreaElement and as HTMLButtonElement) to tell TypeScript the expected types of these elements.
  • Add event listener: We add a click event listener to the format button. When the button is clicked, the code inside the event listener will execute.
  • Get input code: Inside the event listener, we get the code from the input textarea.
  • Format code: We use a try…catch block to handle potential errors during formatting. We call the js_beautify function, passing the code and an options object. The options object allows us to customize the formatting style. In this example, we set the indentation size to 4 spaces and add spaces inside empty parentheses.
  • Display formatted code: If the formatting is successful, we display the formatted code in the output textarea. If an error occurs, we display an error message.

Compiling and Running the Application

Now that we have our HTML, CSS, and TypeScript code, let’s compile the TypeScript code and run the application. In your terminal, run the following command to compile the TypeScript code:

tsc

This command will compile the app.ts file and generate a app.js file in the dist directory. Open index.html in your web browser. You should see the code formatter interface with an input area, a format button, and an output area. Enter some JavaScript code in the input area and click the “Format” button. The formatted code should appear in the output area. If the output area shows “Error formatting code: …”, then check the console for more details about the error.

Customizing Formatting Options

The js-beautify library provides various options to customize the formatting style. You can modify the options object in the js_beautify function to change the formatting behavior. Here are some commonly used options:

  • indent_size: The number of spaces to indent the code.
  • indent_char: The character to use for indentation (e.g., ” ” for spaces, “t” for tabs).
  • space_in_empty_paren: Whether to add a space inside empty parentheses (e.g., function() {} or function() {}).
  • preserve_newlines: Whether to preserve existing newlines.
  • max_preserve_newlines: The maximum number of consecutive newlines to preserve.
  • brace_style: The style of braces (e.g., “collapse”, “expand”, “end-expand”).
  • space_before_conditional: Whether to add a space before the conditional statement.

For example, to use tabs for indentation and collapse braces, modify the js_beautify call in app.ts:


const formattedCode = js_beautify(code, {
    indent_size: 1,
    indent_char: 't',
    brace_style: 'collapse',
});

After making changes to the TypeScript code, remember to recompile it using tsc to reflect the changes in the browser.

Handling Errors

Error handling is critical in any application. Our code formatter includes basic error handling using a try…catch block. However, we can improve error handling by providing more informative error messages to the user. For instance, if the user enters invalid JavaScript code, the js_beautify function might throw an error. We can catch this error and display a user-friendly message.

Consider the following example:


try {
    const formattedCode = js_beautify(code, {
        indent_size: 4,
    });
    codeOutput.value = formattedCode;
} catch (error: any) {
    codeOutput.value = `Error formatting code: ${error.message}`;
}

In this example, we’ve added error.message to the error message shown to the user. This will show the actual error that the js_beautify function is reporting.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect File Paths: Ensure that the file paths in your HTML (e.g., the script tag) and CSS are correct. A common mistake is using the wrong path for the compiled JavaScript file. Double-check that the path in your <script src="dist/app.js"></script> matches the location of your compiled JavaScript file.
  • Typos in Element IDs: Make sure that the element IDs in your HTML match the IDs you’re referencing in your TypeScript code. Typos can cause the program to fail to find the elements.
  • Missing Dependencies: If you encounter errors, make sure you’ve installed all the necessary dependencies using npm. Run npm install in your project directory to install all dependencies specified in your package.json file.
  • Incorrect TypeScript Configuration: Double-check your tsconfig.json file for any incorrect settings that might be causing compilation errors.
  • Incorrect Imports: Make sure you are importing the libraries correctly.

Advanced Features

Our code formatter is a basic example, but you can extend it with more advanced features. Here are some ideas:

  • Code Highlighting: Implement code highlighting to make the formatted code more readable. You can use libraries like Prism.js or highlight.js.
  • Language Support: Extend the code formatter to support other programming languages (e.g., HTML, CSS, Python). You would need to use different formatting libraries for each language.
  • Configuration Options: Allow users to customize the formatting options through a settings panel.
  • Real-time Formatting: Format the code automatically as the user types.
  • Error Highlighting: Highlight the lines of code that contain errors.

Key Takeaways

In this tutorial, we created a simple web-based code formatter using TypeScript and the js-beautify library. We covered the importance of code formatting, project setup, HTML structure, TypeScript code, and error handling. We also explored how to customize formatting options and provided tips for avoiding common mistakes.

FAQ

Here are some frequently asked questions:

  1. Can I use this code formatter for other languages?

    Yes, you can extend the code formatter to support other languages by using different formatting libraries. For example, for HTML, you could use html-beautify, and for CSS, you could use a CSS beautifier.

  2. How do I handle errors during formatting?

    Use a try…catch block to catch potential errors during the formatting process. Display user-friendly error messages in the output area.

  3. How do I customize the formatting style?

    The js-beautify library provides various options to customize the formatting style. You can modify the options object passed to the js_beautify function to change the indentation, spacing, brace style, and more.

  4. Why is code formatting important?

    Code formatting is important for readability, maintainability, collaboration, and error detection. It helps developers understand the code’s structure and makes it easier to work on a project with a team.

Building this tool provides a practical demonstration of how TypeScript can be used to create interactive web applications. By understanding the core concepts of HTML, CSS, and TypeScript, you can create a wide range of useful tools. The ability to format code quickly and consistently is a valuable skill for any developer, enhancing productivity and the overall quality of your work. As you continue to build projects, remember that clean, well-formatted code is the foundation for a successful and maintainable application.

More posts