TypeScript Tutorial: Creating a Simple Web-Based Code Beautifier

Written by

learnmodernjavascript

in

In the world of web development, clean and readable code is paramount. It not only makes your projects easier to maintain and debug but also improves collaboration with other developers. However, manually formatting code can be tedious and time-consuming. This is where a code beautifier comes in handy. It automatically formats your code, making it more readable and consistent. In this tutorial, we will explore how to create a simple web-based code beautifier using TypeScript. This project will introduce you to fundamental TypeScript concepts and provide a practical application for your skills.

Why Build a Code Beautifier?

As developers, we spend a significant amount of time reading and writing code. Poorly formatted code can lead to:

  • Increased debugging time: It’s harder to spot errors in messy code.
  • Reduced readability: Makes it difficult for others (and your future self) to understand the code.
  • Inefficient teamwork: Hard to collaborate when everyone uses different formatting styles.

A code beautifier solves these problems by:

  • Automating formatting: Saves time and effort.
  • Enforcing consistency: Ensures a uniform style across your project.
  • Improving readability: Makes code easier to understand and maintain.

Prerequisites

Before we start, ensure you have the following:

  • Node.js and npm (or yarn) installed: Used for package management and running our code.
  • A basic understanding of HTML, CSS, and JavaScript: You’ll need these for the front-end.
  • A text editor or IDE: Such as VS Code, Sublime Text, or WebStorm.

Setting Up the Project

Let’s create our project directory and initialize it:

  1. Create a new directory for your project: mkdir code-beautifier
  2. Navigate into the directory: cd code-beautifier
  3. Initialize a Node.js project: npm init -y

Next, install TypeScript and a few other necessary packages. We’ll use prettier, a popular code formatter, to do the heavy lifting. We’ll also install typescript and ts-node for development.

npm install typescript prettier ts-node --save-dev

Now, let’s configure TypeScript. Create a tsconfig.json file in your project root with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

This configuration specifies how TypeScript should compile our code. Key settings include:

  • target: The JavaScript version to compile to (ES5 is widely compatible).
  • module: The module system (CommonJS is suitable for Node.js).
  • outDir: The directory to output compiled JavaScript files.
  • rootDir: The directory containing our TypeScript source files.
  • strict: Enables strict type-checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Speeds up compilation by skipping type-checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.

Creating the Front-End (HTML & CSS)

Let’s create the basic HTML and CSS for our code beautifier. Create an index.html file in a new directory called public. This directory will hold our static assets.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Beautifier</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Code Beautifier</h1>
        <textarea id="code-input" placeholder="Enter your code here"></textarea>
        <button id="beautify-button">Beautify</button>
        <textarea id="code-output" placeholder="Beautified code" readonly></textarea>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML structure includes:

  • A title and basic meta tags.
  • A link to a style.css file (we’ll create this next).
  • A main container div.
  • A heading for the title.
  • A textarea for code input.
  • A button to trigger the beautification.
  • A textarea to display the beautified code (read-only).
  • A link to a script.js file (where our JavaScript will go).

Next, create a style.css file in the public directory and add some basic styling:


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%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
    min-height: 100px;
}

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

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

This CSS provides a basic layout and styling for our code beautifier.

Implementing the TypeScript Logic

Now, let’s write the TypeScript code that will handle the beautification. Create a src directory and inside it, create a file named index.ts. This file will contain our main application logic.

import prettier from 'prettier';

// Get references to HTML elements
const codeInput = document.getElementById('code-input') as HTMLTextAreaElement;
const beautifyButton = document.getElementById('beautify-button') as HTMLButtonElement;
const codeOutput = document.getElementById('code-output') as HTMLTextAreaElement;

// Event listener for the beautify button
beautifyButton.addEventListener('click', async () => {
  const code = codeInput.value;

  try {
    // Use Prettier to format the code
    const formattedCode = await prettier.format(code, {
      parser: 'babel', // Or your preferred parser (e.g., 'typescript', 'html', 'css')
      plugins: [], // Add Prettier plugins if needed
      // Add Prettier options here
      // e.g., tabWidth: 2, useTabs: false
    });

    codeOutput.value = formattedCode;
  } catch (error) {
    console.error('Formatting error:', error);
    codeOutput.value = `Error: ${(error as Error).message}`;
  }
});

Let’s break down this code:

  • We import the prettier library.
  • We get references to the HTML elements (input textarea, button, and output textarea). The as HTMLTextAreaElement and as HTMLButtonElement are type assertions, telling TypeScript the specific type of these elements.
  • We add an event listener to the beautify button. When clicked, it will execute the formatting logic.
  • Inside the event listener:
    • We get the code from the input textarea.
    • We use prettier.format() to format the code.
      • parser: Specifies the code’s language (e.g., ‘babel’ for JavaScript, ‘typescript’ for TypeScript, ‘html’ for HTML, ‘css’ for CSS).
      • plugins: Allows for the use of prettier plugins.
      • You can add options like tabWidth and useTabs to customize the formatting style.
    • We display the formatted code in the output textarea.
    • We catch any errors during formatting and display an error message.

Building and Running the Application

Now, let’s build and run our application.

  1. Compile the TypeScript code: Open your terminal and run tsc. This will compile the index.ts file into a index.js file in the dist directory.
  2. Copy the HTML and CSS: Copy the index.html and style.css files from the public directory to the dist directory.
  3. Serve the files: There are many ways to serve the files. One easy way is to use a simple HTTP server like serve (install it globally with npm install -g serve). Then, navigate to the dist directory in your terminal and run serve.
  4. Open in your browser: Open your browser and go to the URL provided by serve (usually http://localhost:5000 or similar).

You should see your code beautifier in action! Paste some code into the input textarea, click the “Beautify” button, and see the formatted code appear in the output textarea.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect TypeScript Configuration: Double-check your tsconfig.json file to ensure it’s set up correctly. Common issues include incorrect rootDir, outDir, or missing esModuleInterop.
  • Missing Dependencies: Make sure you’ve installed all the necessary packages (typescript, prettier, and potentially others).
  • Incorrect File Paths: Ensure your HTML file correctly links to your CSS and JavaScript files. The paths need to be relative to the HTML file’s location.
  • Prettier Parser Errors: If Prettier fails to format your code, it might be due to an incorrect parser setting. Make sure the parser matches the code type (e.g., ‘babel’ for JavaScript, ‘typescript’ for TypeScript, ‘html’ for HTML).
  • Browser Caching: Sometimes, your browser might cache older versions of your files. Try clearing your browser cache or hard-refreshing the page (Ctrl+Shift+R or Cmd+Shift+R).
  • Error Messages in the Console: Always check the browser’s developer console (usually by pressing F12) for any error messages. They often provide valuable clues.

Enhancements and Next Steps

This is a basic code beautifier, but you can enhance it in several ways:

  • Add Language Selection: Allow users to select the code language (JavaScript, TypeScript, HTML, CSS, etc.) to use the appropriate Prettier parser.
  • Implement a Settings Panel: Allow users to customize Prettier options like tab size, use tabs, and more.
  • Add Error Highlighting: Highlight syntax errors in the input code before formatting.
  • Integrate with a Code Editor: Embed the beautifier directly into a code editor component.
  • Add Support for More Languages: Explore Prettier plugins for additional languages.
  • Implement Dark/Light Mode: Add a theme toggle for better user experience.
  • Add a Copy to Clipboard Button: Allow users to quickly copy the formatted code.

Key Takeaways

  • TypeScript enhances code quality and maintainability.
  • Prettier automates code formatting, saving time.
  • Understanding HTML, CSS, and JavaScript is crucial for front-end development.
  • Using a simple HTTP server simplifies development.
  • Error handling is critical for a robust application.

FAQ

  1. How does Prettier work?

    Prettier parses your code, analyzes its structure, and then applies a set of rules to format it consistently. It uses a parser specific to the language of your code.

  2. Can I use Prettier with different code editors?

    Yes, Prettier has integrations with many code editors, including VS Code, Sublime Text, and WebStorm. You can often install a Prettier extension to format your code automatically on save.

  3. What are Prettier plugins?

    Prettier plugins extend Prettier’s capabilities to support additional languages or add custom formatting rules. For example, there are plugins for formatting Markdown, JSON, and more.

  4. How do I update Prettier?

    You can update Prettier using npm or yarn, just like any other package. Run npm update prettier or yarn upgrade prettier in your project directory.

  5. Why is my code not formatting correctly?

    Check the parser setting in your Prettier configuration. Make sure it matches the language of your code. Also, review the Prettier options to ensure they align with your desired formatting style. Clear your browser cache or hard-refresh your page.

By building this code beautifier, you have not only learned about TypeScript and Prettier but also gained valuable experience in front-end development. Remember, the journey of a thousand lines of code begins with a single step. Keep experimenting, keep learning, and keep building. The ability to automate tedious tasks like code formatting is a valuable skill that will significantly improve your productivity and code quality. Embrace the power of tools like Prettier, and watch your code become cleaner, more readable, and easier to maintain. This project is a solid foundation for further exploring web development and TypeScript. Continue to build upon this knowledge, and you’ll become a more proficient and efficient developer. The more you practice, the more confident you will become in your coding abilities. Happy coding!

More posts