What editor does the web developer use?

Written in front of the words: engaged in web front-end development for some time, today the main want to share is the text (code) editor. For the editor everyone has their own preferences, but also in different languages of the coder, here I took my contact to say it!

What editor does the web developer use?

Believe that if asked about a few years ago, someone would not hesitate to answer Adobe's Dreamweaver. Yes, until now, we have to say that Dreamweaver is a very easy-to-get editor, and it offers features that are very distinctive. I also began to program from Dreamweaver, when I first touch the front-end industry when the official version is charged, of course, you can also use the cracked version, recently Dreamweaver new release is Dreamweaver CC 2017, seemingly free, Specifically I did not go to download, you can try Oh! It's been a long time. But you need to sign in with an Adobe ID, and if you don't have an Adobe ID, sign up.

Note: Pay attention to read the registration agreement;

Follow the steps to download the installation;

This is the case after the installation is complete;

Manage Sites-Create personal project space (warehouse)

The interface is like this:

After I abandoned Dreamweaver, I used the hbuilder Editor. Hbuilder is a web development IDE that supports HTML5 in Dcloud (Digital Paradise).

Recommended Hbuilder: Homemade free, suitable for beginners, Mac and win version have, do not need too much configuration can be used directly, syntax hints is complete, the HTML page can be directly displayed page content, you can also use the browser directly open the currently written page, view the page effect.

Its interface is this:

More information about Hbuilder can be found on the official website of Hbuilder. It is worth reminding that the Hbuilder code hints feature is very powerful.

Website:http://www.dcloud.io/

The last mention of GitHub , a new collection of new and great gods, is a Web site. Yes, it comes with a simple online code editor, color labeling and code typesetting. The approximate effect shown is as follows:

The effect is still good. Don't forget the commit every time you change!

The editor that I've heard about most of my colleagues is Microsoft's latest Visual Studio Code Open Source Editor. This editor with its own modularity as a selling point, a variety of themes and plugins are many, but also very practical. The interface is as follows:

The interface of this editor is not very special, but it is full of Visual Studio Shadow, but its overall experience is very good, including the interface, efficiency and code readability is very high quality. The emphasis here is that I use a lot of features, that is, the visual Studio code comes with the formatting codes feature. This feature may not be the most useful in HTML (the comments I've worked are all wrapped up and invisible at all), but CSS and JavaScript work great. Sometimes you copy and paste the code in other places, or the code is confused that you can not see which label corresponds to which label, only need to gently right--format code (format code) or the use of shortcut keys alt+shift+f to make it clean and easy to read. This is not available in the Atom editor to be introduced later, but there are still extensions to support. Another useful feature is "Change all occurrences" (changing all the same text [changing all occurrences]).

For example, when you write JavaScript, you suddenly want to rename a variable, or a function, what to do? This name is used in your code million, you don't always go to a rename it? Just select a variable, and then press CTRL+F2 (or right-click on change all occurrences) to edit the same data in the entire document at the same time. Such as:

Visual Studio code came to an end, telling me about the last two editors I had to say before I played atom, but I didn't use the editor: one that everyone knows about notepad++. Notepad++ is an all-in-one editor with a full range of functions that can be used instead of Windows to bring your own notepad. But feel the plug-in system is not very perfect, resulting in some missing features. The interface is as follows:

In particular, I would like to say that before a teacher Wang in the teaching of the basic is notepad++. may be because convenient bar, there are not many complex plug-ins need to install, so the first impression is very good, I am also this attitude, so from time to time will be used OH.

The second one I'm going to take is sublime Text.

Concept:

Sublime text is a code editor (Sublime text 2 is a paid software, but can be tried indefinitely) and is also an advanced text editor for HTML and prose. Sublime Text is a cross-platform editor that supports operating systems such as Windows, Linux, Mac os X. Sublime text has a beautiful user interface and powerful features such as code thumbnails, Python plugins, code snippets, and more. You can also customize key bindings, menus, and toolbars. The main features of Sublime Text include: Spell checker, bookmarks, full python api,goto functionality, instant item switching, multi-selection, multi-window, etc. Version Sublime text 2.0, released on June 26, 2012, has major improvements over previous versions: support for retina retina screens, quick jump to Next, text drag-and-drop, and more. This is explained here because the software is very fast and full of functionality. The reason why I do not use it is because of the charge, as if direct purchase to 70 dollars ...!

Its interface is as follows:

In particular, sublime text plug-in features are very powerful. You need to download the plugin installation package to implement!

Plugin Example: Sublime text Chinese package, code hints and so on shortcut keys.

Sublime Text Chinese package:http://www.cnblogs.com/kingwell/archive/2012/11/22/2782991.html

Finally, an open source editor that I've been using recently,Atom, is also the hand of the father of the great God of GitHub. This software I fell in love with the look of it as soon as I got my hand--after using Visual Studio code for nearly half a year, I found it very easy to get started with atom (after all, sublime,visual Studio code and Atom are highly similar in their operating habits and interfaces), Because it's very close to visual Studio code, it's just heard that atom seems to be a webapp package. Atom's biggest problem is instability, even though I'm using a beta version now, but even if I'm using a stable version, I'm going to run into a sudden flash of the program (yes, flash back). It's not like the data is going to fall, but it's a hassle, isn't it?

In addition to the appearance, Atom makes me very satisfied with its preview HTML function. This feature allows you to preview the output in real time when you edit the HTML code. I looked at visual Studio code for half a day as if there was no way, the plugin Atom-html-preview can do this (although JavaScript and Ajax do not seem to be fully loaded). The debug function of this program is also very practical (incredibly can debug HTML I was also very surprised AH), the specific people to try to understand what I mean.

The main code interface is this:

The plugin interface is like this:

Atom Plugin Example:

①emmet

Web Developer Essential Tool, said to be artifact, highly recommended

②color-picker

Color Picker

③minimap

Recommended is the vertical block on the right side of the sublime, showing the reduced version of the code

④vim-mode

The use of Vim is well known, the basic implementation of most of the functions, but caused a lot of shortcut key conflicts, which is not the other editor features

⑤git-plus

Git plug-ins are basically consistent with sublime Text's sublimegit function

Command Control Panel shortcut keys

MacOS Shortcut key: cmd+shift+h

Windows + Linux shortcut keys: ctrl+shift+h

⑥file-icons

Picture that makes the front side of the file look nice.

⑦docblockr

Easy to write code comments

⑧autocomplete-plus

Provide possible candidates when entering

⑨atom-cht-menu

menu of functional options and right-click menu Chinese

Summary:

Dreamweaver

Hbuilder

GitHub Online Code editing

Visual Studio Code

notepad++

Sublime Text 2

Atom

Today altogether 7 different editors were introduced. Of these, Visual Studio code,sublime Text2,atom, all platform-wide (including Windows,linux and Mac), Dreamweaver has no Linux version, notepad++ only Windows. These big and small companies and developers of the product developed by each has its own characteristics, of course, a small web developer of my use of the habit of not summarizing all the interesting features. There are many tools for writing code, and everyone has their own preferences. No matter which code editor you use, which compiler you use, I want to say that programming is always a pleasure.

What editor does the web developer use?