Source Code Editor

What is a Source Code Editor?

A source code editor is a type of application made for editing files containing source code, which is the text code written by a programmer to create an application or to develop webpages and websites. Examples of source code editors include Notepad++, VS Code, and NeoVim.

Notable Features

Because source code files are just plain text files they can be edited in any text editor, including Notepad that comes installed by default on Windows. However, source code editors provide several features for editing source code that plain text editors do not have. Including:

Syntax Highlighting: source code editors can parse the text code of a source code file and make the plain text colored to match the semantics of the code. For example, in HTML, <a>, <b>, <div>, and so on are "tags" and have special meaning. A source code editor with support for HTML can make these "tags" a different color automatically.

In a plain text editor, this would be impossible since the plain text format simply doesn't support the concept of colored text. In a rich text editor (e.g. Microsoft Word) you would be able to change color, make it bold, etc., manually, but the saved file wouldn't be in plain text format anymore. This means even if you wrote valid HTML code in Microsoft Word and saved it with a .html file extension, you wouldn't be able to open it in a web browser because the data is in the .docx file format, while if you did so with Notepad and saved it as .html, a web browser would be able to display it as an actual webpage because .html files are just .txt files with a different extension.

Source code editors generally guess the source code language of a file based on its file extension. This means a HTML file is highlighted as HTML code only if it has a .html extension, while a XML file would need to a .xml extension. Many programming languages have their syntax based on C, so it would be difficult to guess accurately what language a file uses based on its source code alone. This is why C, C++, C#, Java, and Javascript code have different extensions: .c, .cpp, .cs, .java, and .js.

Code Folding: source code often contains "blocks" of code placed inside a scope, e.g. a subprogram that is only executed "if" a condition is true. Source code editors can display a "+" and "-" icons next to the beginning of the scope to fold the scoped code.

Indentation Support: source code is often indented with tab characters or space characters to match the depth level of the scope. Source code editors can automatically figure out when a new scope is opened to indent the next line automatically, and can handle indentation multiple lines at once by pressing the Tab key to indent and Shift+Tab to remove an indentation level.

By default, source code editors use a monospace font, while plain text editors use sans-serif fonts (for viewing on screens), and rich text editors use serif fonts (for printing). The monospaced means every character has exactly the same width, which means it's possible to manually align text using spaces if you want. For example:

var   foo     = 12345678;
const foo_bar =        2;

It's often possible to use a non-monospaced font, but please don't do that.

It's also not a good idea to align things manually in general. Nowadays programs called "autoformatters" (e.g. Black for Python) can be used to indent everything consistently, and they will rewrite your manual alignment if you don't figure out how to tell them not to do that.

Whitespace Support: source code editors can display whitespace characters with special symbols. In plain text editors, whitespace characters like tabs and spaces are always displayed as mere invisible spaces. In source code editors, it's often possible to make tabs appear as "arrows" and spaces appear as "dots," making it easier to count how many spaces are written.

Line Numbers: because errors in source code are often indicated by the number of the line that generated the error, source code editors also display the number of every line next to it. It's often possible to quickly "go to" the target line (e.g. by pressing Ctrl+G in Notepad++).

Autocompletion: unlike English text, source code is mainly written by typing the same keywords over and over again after a space or punctuation. Source code editors can display a list of keywords you already type or that are available for a context after you type a space or punctuation.

Advanced Text Features: source code editors also generally have support for search and replace using regular expressions (regex code); multiple-caret support so you can write and delete characters in multiple lines at once; and setting column delimiters, because some coding style guides will tell you that your source code shouldn't be more than 80 columns per line (i.e. 80 monospaced characters), so you can make a vertical line appear at the 80th column if you want to manually follow this guideline.

Integration with Development Tools: many source code editors can integrate with commonly used tools like language servers so you can get documentation about a function or piece of code just by hovering the mouse cursor over it, and you can quickly refactor (rename a piece of code and all code that references it gets automatically updated), version control (e.g. Git, Subversion, Mercurial), debuggers, etc., to provide a better workflow.

An application that is fully integrated for development is called an IDE (Integrated Development Environment).

For example, Visual Studio is an IDE for C++ and C# development. It comes with syntax highlighting support, refactoring support, documentation on hover, debugging support, unit test support, and even tools to design windows for desktop applications.

On the other hand, Visual Studio Code (VS Code) is a source editor that doesn't come with most of this. VS Code supports plugins (called "extensions") that you can use to add plenty of things that an IDE can do by default. For example, you can add debugger support to VS Code. The problem is that this support is very limited compared to what a fully integrated IDE would give you, and really depends on the plugin developer programming all of it, and in most cases those extensions are free of charge to use, so you can expect they won't be as good as an IDE you pay for.

In particular, a low-level programming IDE for C or C++ would show you all the threads that are running when debugging the program, let you inspect the memory byte by byte, set all sorts of advanced breakpoints, watch variables, view the assembly code, etc. None of these things make a lot of sense for an IDE for Python, because it's a completely different and high-level programming language, so it would be very difficult to make an "one-size-fits-all" IDE, which is what VS Code would be trying to be with all its plugins.

One case where VS Code and simple source code editors shine is with web development. That's because most debugging can be done with the web browser's built-in developer tools, instead of with the source code editor. You can set debugger breakpoints in Chrome instead of setting them in VS Code, for example.