TypeScript Tutorial: Building a Simple Web-Based Code Editor with Autocompletion

Written by

learnmodernjavascript

in

In the ever-evolving world of web development, code editors are indispensable tools. They’re the digital canvas where developers craft, refine, and debug their creations. A well-designed code editor can significantly boost productivity, making coding a more enjoyable and efficient experience. But have you ever considered building your own? In this tutorial, we’ll delve into the fascinating world of TypeScript and create a simple, yet functional, web-based code editor with autocompletion. This project will not only teach you the fundamentals of TypeScript but also provide a practical application of its capabilities.

Why Build a Code Editor?

Building a code editor offers several advantages. Firstly, it’s an excellent learning experience. You’ll gain hands-on experience with core concepts like DOM manipulation, event handling, and text processing. Secondly, it allows you to customize and tailor the editor to your specific needs. You can add features that are relevant to your workflow, such as syntax highlighting for your preferred languages or integration with your favorite tools. Finally, it’s a fun and rewarding project that demonstrates your skills to potential employers or clients.

What We’ll Cover

This tutorial will guide you through the process of building a basic code editor with autocompletion. We’ll cover the following topics:

  • Setting up a TypeScript project
  • Creating the basic HTML structure
  • Implementing a text area for code input
  • Adding syntax highlighting
  • Implementing autocompletion
  • Handling user input and events
  • Testing and debugging

Prerequisites

Before we begin, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript
  • Node.js and npm (or yarn) installed on your system
  • A code editor (like VS Code, Sublime Text, or Atom)

Setting Up the Project

Let’s start by setting up our project. Create a new directory for your project and navigate into it using your terminal. Then, initialize a new npm project by running the following command:

npm init -y

This will create a `package.json` file in your project directory. Next, install TypeScript as a development dependency:

npm install --save-dev typescript

Now, create a `tsconfig.json` file in your project directory. This file configures the TypeScript compiler. You can generate a basic `tsconfig.json` file by running:

npx tsc --init

This will create a `tsconfig.json` file with default settings. You can customize these settings to suit your project’s needs. For example, you might want to specify the output directory for your compiled JavaScript files or enable strict type checking. Here’s a basic `tsconfig.json` configuration:

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

Finally, create a `src` directory and an `index.ts` file inside it. This is where we’ll write our TypeScript code.

Creating the HTML Structure

Let’s create the basic HTML structure for our code editor. Create an `index.html` file in your project directory and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Code Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <textarea id="code-editor"></textarea>
        <div id="autocomplete-suggestions"></div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML sets up a `textarea` element for the code editor and a `div` element for displaying autocompletion suggestions. It also includes a link to a `style.css` file for styling and a script tag to include our compiled JavaScript file (which will be generated by the TypeScript compiler).

Implementing the Code Editor in TypeScript

Now, let’s write the TypeScript code for our code editor. Open `src/index.ts` and add the following code:


// Get references to the HTML elements
const codeEditor = document.getElementById('code-editor') as HTMLTextAreaElement;
const autocompleteSuggestions = document.getElementById('autocomplete-suggestions') as HTMLDivElement;

// Sample autocompletion data
const keywords = ['function', 'const', 'let', 'if', 'else', 'for', 'while', 'return', 'class', 'import', 'export'];

// Function to update autocomplete suggestions
function updateAutocomplete() {
  if (!codeEditor) return;
  const inputText = codeEditor.value;
  const lastWord = inputText.split(/s+/).pop() || ''; // Get the last word entered

  // Filter keywords based on the last word entered
  const suggestions = keywords.filter(keyword => keyword.startsWith(lastWord));

  // Clear previous suggestions
  autocompleteSuggestions.innerHTML = '';

  // Add new suggestions
  suggestions.forEach(suggestion => {
    const suggestionElement = document.createElement('div');
    suggestionElement.textContent = suggestion;
    suggestionElement.addEventListener('click', () => {
      if (!codeEditor) return;
      // Replace the last word with the selected suggestion
      const inputTextArray = codeEditor.value.split(/s+/);
      inputTextArray.pop(); // Remove the last word
      inputTextArray.push(suggestion);
      codeEditor.value = inputTextArray.join(' ');
      autocompleteSuggestions.innerHTML = ''; // Hide the suggestions
      codeEditor.focus(); // Keep focus on the editor
    });
    autocompleteSuggestions.appendChild(suggestionElement);
  });

  // Show or hide suggestions based on input
  autocompleteSuggestions.style.display = suggestions.length > 0 ? 'block' : 'none';
}

// Add event listener for input changes
if (codeEditor) {
  codeEditor.addEventListener('input', updateAutocomplete);
}

Let’s break down this code:

  • Getting Elements: We start by getting references to the `textarea` (code editor) and the `div` (autocomplete suggestions) elements from the HTML using `document.getElementById`.
  • Autocompletion Data: We define an array of `keywords` that we’ll use for autocompletion. In a real-world scenario, this could be a more comprehensive list of keywords, function names, and variable names.
  • updateAutocomplete Function: This function is the core of the autocompletion feature. It’s called whenever the user types something in the code editor.
  • Filtering Suggestions: The function filters the `keywords` array to find suggestions that start with the last word the user typed.
  • Displaying Suggestions: The function dynamically creates `div` elements for each suggestion and adds them to the `autocompleteSuggestions` div.
  • Click Event Listener: Each suggestion element has a click event listener. When a user clicks a suggestion, the function replaces the last word in the code editor with the selected suggestion.
  • Event Listener: An event listener is attached to the `codeEditor` to listen for `input` events. When the user types something, the `updateAutocomplete` function is called.

Adding Basic Styling (style.css)

Create a `style.css` file in your project directory and add the following CSS to style your code editor:


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

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

#code-editor {
  width: 100%;
  height: 300px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box; /* Important to include padding and border in the width */
}

#autocomplete-suggestions {
  position: relative;
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none; /* Initially hidden */
}

#autocomplete-suggestions div {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

#autocomplete-suggestions div:hover {
  background-color: #f0f0f0;
}

This CSS provides basic styling for the code editor, including the container, the textarea, and the autocomplete suggestions. It makes the editor look more appealing and user-friendly.

Compiling and Running the Code

Now that we’ve written the code and added the HTML and CSS, let’s compile the TypeScript code and run our code editor. Open your terminal, navigate to your project directory, and run the following command:

tsc

This command will compile your TypeScript code into JavaScript and place the output in the `dist` directory. Next, open `index.html` in your web browser. You should see the code editor with autocompletion functionality.

Enhancements and Advanced Features

Our code editor is functional, but there’s always room for improvement. Here are some ideas for enhancements and advanced features:

  • Syntax Highlighting: Implement syntax highlighting to improve code readability. You can use libraries like Prism.js or highlight.js.
  • Error Detection: Integrate a linter to detect errors and warnings in real-time.
  • Code Formatting: Add a code formatting feature to automatically format the code.
  • Themes: Allow users to choose different themes for the editor.
  • Code Folding: Implement code folding to collapse and expand code blocks.
  • Multiple Languages: Support multiple programming languages.
  • More Robust Autocompletion: Implement a more sophisticated autocompletion system that suggests function names, variable names, and code snippets based on the current context.

Common Mistakes and How to Fix Them

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

  • Incorrect Element Selection: Make sure you are selecting the correct HTML elements using `document.getElementById`. Double-check the IDs in your HTML and TypeScript code.
  • Incorrect Event Handling: Ensure that you are attaching event listeners to the correct elements and that the event handling logic is functioning as expected.
  • Autocompletion Logic Errors: Carefully review the logic for filtering and displaying autocompletion suggestions. Make sure that the suggestions are relevant and displayed correctly.
  • Syntax Highlighting Issues: If you’re implementing syntax highlighting, ensure that the highlighting rules are correct and that the library you are using is properly integrated.
  • Performance Issues: For large codebases, optimize the code to prevent performance issues, especially when handling user input. Consider techniques like debouncing or throttling.

Key Takeaways

In this tutorial, we’ve built a basic code editor with autocompletion using TypeScript. We’ve learned how to set up a TypeScript project, create the HTML structure, implement autocompletion, and add basic styling. This project has given you a solid foundation for building more complex code editors. Remember to practice and experiment with different features to expand your knowledge and skills.

FAQ

Here are some frequently asked questions about building a code editor:

  1. What are the benefits of using TypeScript for building a code editor? TypeScript provides static typing, which helps catch errors early and improves code maintainability. It also offers features like autocompletion and code navigation, which can significantly boost your productivity.
  2. What are some popular libraries for syntax highlighting? Popular libraries for syntax highlighting include Prism.js and highlight.js.
  3. How can I improve the performance of my code editor? You can improve the performance by optimizing event handling, using debouncing or throttling for user input, and using efficient data structures.
  4. How can I add support for multiple programming languages? You can add support for multiple programming languages by using different syntax highlighting rules and autocompletion data for each language.
  5. Where can I find more resources for learning TypeScript? You can find more resources for learning TypeScript on the official TypeScript website, in online tutorials, and in books and courses.

Building a code editor, even a simple one, is a journey of learning and discovery. It’s a chance to apply your knowledge of web technologies and create something truly useful. As you continue to develop your editor, you’ll uncover new challenges and opportunities for innovation. The beauty of this project lies in its potential for growth. You can always add more features, refine the user interface, and optimize the performance. Each step you take will deepen your understanding of web development and empower you to create even more sophisticated tools. Embrace the learning process, experiment with different ideas, and don’t be afraid to push the boundaries of what’s possible. The skills and knowledge you gain will be invaluable in your journey as a developer.

More posts