Code editors
Note: The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.
Previously, we told you to install a code editor, as you'll need one to work through this pathway. In this article we look at code editors in more detail, giving you an idea of what they can do for you.
| Prerequisites: | Basic familiarity with your computer operating system. |
|---|---|
| Learning outcomes: |
|
What code editors are available?
Binary file editors like Microsoft Word are unsuitable for editing code. You need something that cleanly handles and outputs plain text.
Default OS plain text editors can be OK, for example, TextEdit on macOS, or Notepad on Windows, but they also have limitations.
You are better off with a fully-fledged code editor like Visual Studio Code (multiplatform, free), Sublime Text (multiplatform, not free) or Notepad++ (Windows, free). We would recommend Visual Studio Code, as it is the editor we mostly use. If you want to use another code editor, that's fine. It won't work exactly the same way as Visual Studio Code, but many of the core features will probably be similar.
Integrated Development Environments (IDEs) such as Visual Studio (Windows, not free), NetBeans (multiplatform, free), and WebStorm (multiplatform, not free) tend to have more features than simple code editors but tend to be more complex than what you need at this stage in your learning journey.
Basic code editor functionality
- Open and edit code files.
- Syntax highlighting.
- Auto-indentation and other simple syntax fixes.
- Code completion and help.
- Find and replace, often with the ability to use regular expressions to make the functionality more powerful (e.g. keep a specific string beginning and end, but replace the substring in between).
- Integration with version control is often provided (see the Version control module).
Enhancing your code editor with extensions
- Language-specific extensions such as code completion, highlighting, linting, and debugging. This can apply to specific languages such as JavaScript, Python, or Go, or language/framework abstractions such as TypeScript or JSX.
- GitHub/version control extensions, if not provided by default.
- Theme and color scheme extensions.
- Productivity extensions like code snippets and scaffolding generators.
- AI-powered code suggestion tools such as GitHub Copilot. Be aware that, while useful, AI tools have no reasoning skill, and frequently provide answers that are misleading or just plain wrong. You shouldn't just assume that AI answers are correct, and test them/verify them with other sources.