Text editors for layout designers

A text editor for a layout designer is the main working tool in which most of his working time is spent. Such a tool should be functional, convenient, fast and easy to understand. An important factor when choosing a text editor is the presence in it of popular tools for speeding up and automating code writing.

Today, the text editor market is wide and varied. We have selected the most popular editors for you and asked our mentors to tell us more about the editors they use in their work.

Sublime Text

Version: 3.
Platforms: Windows, macOS, Linux.
Editor's website.

Sublime Text is the most common text editor. By downloading and installing it, you get a simple code editor.

Sublime has a large number of themes and resources that allow you to create your own themes for a pleasant work experience.

In Sublime, you can customize your workspace as you see fit. You can make yourself two columns, in one you write the page layout, and in the other its design.


You can make yourself two lines, two columns - to edit four files at once.


The editor has a sidebar on the left that contains navigation through the project folders you are working with.

Project navigation will help you navigate through the files; the file minimap, which is displayed on the right, will help you navigate inside the open file.

In addition to the workspace options above, you can:

  • customize the font;
  • select the file syntax you need;
  • configure the number of spaces that are inserted when the tab key is pressed;
  • install various linters;
  • and much more.

Sublime also has multiple cursors for editing identical parts of files. If you need to find and/or replace any section of code, you can use the search.

However, if Sublime were just a text editor, it wouldn't be as popular. A large number of installable extensions have been written for it, which can significantly speed up and simplify your work. For example:

  • emmet - speeds up writing markup code and styles by writing code in abbreviations and then converting it into the desired structure;
  • extensions for creating and editing file names directly from a text editor;
  • extensions that control syntax errors and help you navigate parentheses easier;
  • flower managers;
  • file managers;
  • task managers built right into a text editor.

To install extensions, Package Control is used, which provides the ability to search and install extensions in a couple of clicks.

The good thing about Sublime is that it comes out of the box like a regular text editor, but with endless expandability. Other editors have additional built-in features that may not be used. In Sublime, you install only what you need.

We recorded a short video review in which we looked at the capabilities of Sublime Text.

Review of the text editor Sublime Text

Brackets

Version: 1.8.
Platforms: Windows, macOS, Linux.
Editor's website.

Brackets is a text editor from Adobe, which is known for releasing Photoshop.

Brackets is free, cross-platform, and has a clean, clean design. It also includes different themes and the ability to split the screen into several parts.


Brackets supports minimap, file management, multiple cursors and other useful things. But, unlike Sublime, the Brackets editor includes some features in the standard package and does not require additional installation.

For example, the Live Preview extension, which allows you to see changes in the browser without saving code and unnecessary page refreshes.

Brackets has a unique extension - Inline Editor.

Inline Editor

An extension that can write styles through the markup file editing page.


We recorded a short video review in which we looked at the capabilities of Brackets.

Brackets Text Editor Review

Atom

Version: 1.12.
Platforms: Windows, macOS, Linux.
Editor's website.

Atom is written by another famous team - GitHub.

Externally, it resembles Sublime.


I would not like to repeat myself, but Atom has the capabilities of the above text editors:

  • large selection of themes and extensions;
  • file structure browser;
  • minimap;
  • multiple cursors;
  • search by file and so on.

It’s easier to immediately note how it differs.

First, it’s worth talking about the structure. The editor is written in familiar web languages ​​- HTML, CSS, JavaScript and has a flexible and extensible structure. It is assembled from more than fifty modules around a minimalistic core, which are open source. Thanks to this, you can edit existing modules yourself and write your own.

To install extensions, themes and updates, a visual interface inside the editor is used. There is also a special software interface in the form of a command line. It is possible to expand the functionality due to the fact that you can write something for yourself or easily correct existing modules.

In addition to these and many standard text editor features, the Atom developers and community have provided it with features for working with Git. The editor can graphically represent changes in the repository, has a tool for resolving conflicts and quickly switching between the code editor and the console.

We recorded a short video review in which we looked at the capabilities of Atom.

Atom Text Editor Review

Version: 1.8.
Platforms: Windows, macOS, Linux.
Editor's website.

A cross-platform code editor that has the basic capabilities of an integrated development environment. Created by Microsoft. Available in versions for Windows, Linux and macOS platforms.

Like previous editors, VS Code uses a similar layout of elements - the file structure on the left, the code editor on the right. But besides this, there are also additional elements. For example, Git and debugger. The product is positioned as a lightweight solution that eliminates the need for a full integrated development environment.


Advantages:

  • support for more than 30 languages ​​(Jade, Java, Handlebars, Python, XML, CSS, HTML, JavaScript, JSON, Less, PHP, Sass and others);
  • many options for customizing the editor. You can leave the basic setting option for all projects or a separate one for each project;
  • requires a minimum of free disk space, unlike a full-fledged development environment;
  • it has a built-in debugger for Node.js;
  • has the ability to work with Git directly from the editor.

Visual Studio Code is an excellent code editor that is in no way inferior to other editors. A convenient hint system, the ability to debug and work with Git directly from the browser, and everything right out of the box, without additional installations - all this is worthy competition among other code editors.

Conclusion

As can be seen from the review of editors, each of them provides opportunities for quickly and conveniently writing code. The difference lies in how these features are available and how quickly and conveniently you can start using them.

In contact with

Telegram