Summarize several useful JavaScript editors

English: Martin Heller Translation: Grape City Control

If you encounter any problems during the learning process or want to obtain learning resources, please join the learning exchange group 343599877, let’s learn front-end together!

There are many great tools available for JavaScript programmers. This article will discuss 10 excellent text editors that support JavaScript, HTML5 and CSS development, and can use Markdown for document writing. Why use an editor instead of an IDE for JavaScript programming? The reason is fast speed.

The essential difference between an editor and an IDE is that not only can the IDE debug and profile the code, the IDE also supports the application life cycle management (ALM) system. Many of the editors we discuss here support at least one version control system, usually Git, and the distinction between IDEs and editors is getting smaller these days.

Among these 10 JavaScript editors, Sublime Text and Visual Studio Code are the top two. Sublime Text is famous for its speed and convenient editing function variety. The functions and speed of Visual Studio Code are almost the same as Sublime Text. TextMate ranks third. Although TextMate was ranked No. 1 two years ago, its features haven't really kept up.

You'll most likely find your favorite JavaScript editor in Sublime Text, Visual Studio Code, and Brackets, but there are other editor tools like Atom, BBEdit, Komodo Edit, Notepad++, Emacs, and Vim, etc. Worth knowing. You can choose the most convenient editing tool based on your current project.

Let’s learn about all the editors and compare them at the end of the article.

Sublime Text

If you want a flexible, powerful, and extensible text editor that runs lightning fast and supports switching to other windows for code inspection, debugging, and Deployment, then you can consider using Sublime Text.

In addition to being faster, Sublime Text has a number of noteworthy advantages. It covers more than 70 file types, including JavaScript, HTML, and CSS; instant navigation and instant project switching; and more Options (make a series of changes at once), including column selection (select a rectangular area of ​​the file at a time); multi-window (use all of your monitor windows) and split windows; use simple JSON files for complete customization; based on Python Plugin API; a unified, searchable command board.

For programmers using other editors, Sublime Text supports TextMate packages (commands not included) and Vi/Vim emulation.

Sublime Text is a highly configurable and extensible text editor. It contains over 50 grammars, including JavaScript, which can be extended using Sublime packages and TextMate grammar definitions. You can install syntax and support for Babel (React) and TypeScript (Angular) with a few keystrokes.

Sublime Text supports multiple windows and split windows. Each project can have multiple workspaces, multiple views, and multiple panes containing views. Using all the screen real estate becomes quite simple when you want to integrate, debug, and test spaces. Sublime Text also supports customization of everything: colors, text fonts, global key bindings, tab stops, file-specific key bindings and snippets, even syntax highlighting rules, etc. The encoding file of Sublime Text defaults to JSON file, and the language definition defaults to XML.

Sublime Text has an active community for creating and maintaining Sublime Text packages and plugins. Many features missing from Sublime Text, including the JSLint and JSHint interfaces, JsFormat, JsMinify, PrettyJSON, and Git support, are available through the community using the Package Installer.

Official website link:

Visual Studio Code

Visual Studio Code is a free lightweight editor and IDE. It is released by Microsoft. It has Visual Studio components and can be mixed with the open source Atom Electron shell. It provides excellent support for ASP.Net Core development using C#; it also provides excellent support for Node.js development through TypeScript and JavaScript. Unlike the convention that Visual Studio is only supported on Windows, Visual Studio Code can also run on MacOS and Linux.

Visual Studio Code has very good JavaScript code completion due to the inclusion of the TypeScript compiler and Salsa engine. Visual Studio Code sends the JavaScript code to the TypeScript compiler behind the scenes to infer types and build symbol tables. You can see the hasOwnProperty method information in the box at the bottom of the screen image.

The same symbol table enables IntelliSense to provide you with an excellent pop-up option list throughout the expression input process. You get the following features: auto-close after filling, auto-fill completion option, automatic method list after typing, and automatic parameter list in methods. You can enhance IntelliSense by adding a reference to the d.ts file from DefinitelyTyped. Visual Studio Code will provide you with these capabilities as you identify common issues such as using __dirname from Node.js built-in variables.

Visual Studio Code is a free lightweight editor and IDE for Node.js and ASP.Net development. It combines Microsoft technologies such as the TypeScript compiler, the Roslyn .Net compiler, and the Electron shell used by Atom. Visual Studio Code is available for Windows, MacOS, and Linux platforms.

Visual Studio Code’s Git support is very good and easy to use. The Visual Studio Code debugger provides a great debugging experience for Node.js and ASP.Net development. Visual Studio Code has very good HTML, CSS, Less, Sass and JSON tools, this tool is based on the same technology as the Internet Explorer F12 developer tools. Additionally, Visual Studio Code offers customizable integration with external task runners such as gulp and jake.

Visual Studio Code has a strong plug-in ecosystem, such as supporting Angular and React. It is recommended to use Visual Studio Code when building applications using JavaScript and TypeScript frameworks and libraries.

Official website link:

Download address:

Brackets

Brackets is a free open source editor, originally from Adobe, designed for JavaScript, HTML and CSS provide better tools and related open web technologies. Brackets themselves are written in JavaScript, HTML and CSS. In addition to the built-in functionality, Brackets has an extension manager for extending many languages ​​and tools used by front-end developers. Brackets doesn't run as fast as Sublime Text and TextMate, but aside from pauses when loading or updating program content from the network, it still runs very fast.

Brackets not only has great support for JavaScript, CSS, HTML and Node.js, it also has some other great features, such as online editing of CSS related to HTML IDs. In addition, Brackets has a simple UI interface and real-time preview of web pages while editing. For a free code editor, Brackets is a great choice.

The Brackets extension is also written in JavaScript and can also call Node.js modules. Unlike most editors that display open files in tabs, Brackets has a list of working files displayed above the file tree.

Brackets' JavaScript auto-complete function is very good, automatically filling in the closing brackets of various brackets, and the automatic drop-down menu of keywords, variables and methods after typing $ in jQuery methods. Brackets can control the Node.js debugger and restart Node from a menu item. Brackets make it easy to add extensions with additional functionality (such as TypeScript and JSX support, Bower integration, and Git integration).

Quick editing, quick document saving, quick file opening, and live preview all help simplify web application editing, allowing you to focus on coding or designing. Brackets also have some disadvantages, such as some Brackets extensions being difficult to configure, not as easily as Emacs packages or Vim plugins.

Official website link: http://brackets.io/

Download address:

Atom

Atom 1.15.0 is a free version on GitHub An open source, programmable editor for Windows, MacOS and Linux platforms, it is integrated with the GitHub application and has many packages and themes available.

Atom source code is located on GitHub, it is written in CoffeeScript and integrated with Node.js. Atom is a special version of the Chromium browser that is designed to be a text editor rather than a web browser; each Atom window is essentially a locally rendered web page.

When Atom does not update automatically, performance is very good. It has some great features like fuzzy search, quick item search and replace, multiple cursors and selections, multiple panes, code snippets, code folding, and the ability to import TextMate syntax and themes. Atom can install two command line utilities: Atom, used to launch the editor from the shell; APM, used to manage Atom's packages.

Komodo Edit

Komodo Edit is a free, scaled-down version of Komodo IDE from ActiveState, which is a cool multi-language editor.

If you like Komodo IDE but can't afford it, then Komodo Edit will be a good choice for you. Komodo Edit is not an IDE, so you need to complete code control outside the editor.

It does not provide real-time code collection function. If you develop independently and do not share code with other people, there will be no problems. It also doesn't provide an HTTP inspector. Komodo Edit has the same editing capabilities as Komodo IDE, but lacks code refactoring, debugging, unit testing, source code control integration, and other IDE-friendly features.

In any case, Komodo Edit can meet your JavaScript editing needs for free, and provides markup languages ​​for editing HTML, CSS, Python, Perl, Ruby, Tcl and other programming.

Notepad ++

Notepad ++ is a free open source Windows source code editor and notepad, ideal for editing JavaScript. It supports about 50 programming and markup languages. In addition to its multiple document editing windows, it has a workspace tree view, feature list tabs, and document mapping tabs. Its load times are fast enough and its performance is strong enough that you won't feel slowed down.

With syntax coloring and folding, editable features (including column mode editing and regular expressions, support for search and replace), and a fair amount of function completion and parameter prompting, Notepad++ can easily become the code editor of choice for JavaScript. . However, it's not yet a comprehensive JavaScript editor, and it can't generate code, perform operations like refactoring, and quickly navigate through large projects.

BBEdit

##BEdit 11.0.3 is a text editor, HTML only for Mac, it supports about 35 programming and markup languages, community The version also provides support for many other languages ​​through the BBEdit website. Both the licensed version and the community version have syntax highlighting; the licensed version also has a certain amount of auto-complete functionality, mainly for function names, variable names, and a small number of keywords and tags. The licensed version also integrates with Git, Perforce and Subversion version control systems.

BBEdit 11 is a major rewrite of the product. This version is faster than before and can also handle Ginormous files well. It has an extract function to copy the selection or search results into a new buffer, as well as a cut function. BBEdit can edit and run Perl, Python, Ruby, and Shell scripts, as well as check the syntax of Perl and Python scripts.

BBEdit’s support for HTML and Markdown is actually better than its support for JavaScript. You can install three command line tools for BBEdit: one for the editor, one for the diff engine, and the last one for the multimedia search.

TextMate

TextMate used to be mainly used for writing Ruby on Rails on MacBook, but now TextMate has become less prominent, and at the same time Sublime Text has gradually gained popularity.

TextMate is not an IDE, but it does provide features such as packages, snippets, macros, and scope systems that language-specific IDEs lack. TextMate now offers simple JavaScript and jQuery bundles that provide a nice set of tools for quickly generating JavaScript and jQuery code. For IDE-like functionality, you can use the shell-integrated version of TextMate, but don't expect code refactoring, automated unit or regression testing from TextMate. If Grunt is set up correctly, TextMate can automate JavaScript testing.

TextMate has a Bundles preference tab from which additional bundles can be downloaded and installed. Bundle sources are actually the product's source code that resides in a GitHub repository.

Emacs

Emacs and its derivatives come from the MIT AI Lab since the early 1970s. Emacs started as a macro in the TECO text editor and gradually developed into an independent language. The default Emacs installed on MacOS is version 22.1.1, which has no GUI support. You can easily install XEmacs, Aquamacs (GUI for MacOS) and newer GNU Emacs versions. Emacs is a JavaScript editor. The default mode for editing JavaScript is in the js package. Using Emacs can get better syntax highlighting and linting.

Emacs uses the js2 mode package and uses ac-js2 autocomplete. In Emacs, you can use serial mode to get real-time browser JavaScript, HTML, and CSS interaction.

Vim (and variants)

Vi (visual interface) was originally written by Bill Joy for Unix. Since 1976, it has gradually evolved from Ed to Ex. Vim is a free, open source, improved version of Vi; version 7.3 is installed by default on Mac OS X.

You can easily install a newer version of Vim, MacVim (the GUI for MacOS) or whatever is available for your platform. Vim is a JavaScript editor, and the suggestions in its vim-plug readme file are quite good.

Which editor to use is up to you

Whether you focus on client-side JavaScript or Node.js, there are many options.

If you are looking for a powerful, fast JavaScript programming text editor that supports many other languages, you can choose Sublime Text.

If you want a free, fast JavaScript editor that is IDE compatible and has good support for ASP.Net and C#, Visual Studio Code is a great choice.

Brackets and Atom are two new, free text editors. Brackets is an editor that is very close to an IDE for Node.js development, and Atom is highly integrated with the GitHub desktop client.

On Windows, Notepad++ is fast, effective, and free. On MacOS, BBEdit is a fast, cool, free limited edition HTML tool for version control integration. TextMate is still a great editor that is fast, full-featured, and extensible, but development has been slow.

If you prefer to use open source scripting languages, Komodo Edit is a good choice. If you like a custom editor, Emacs or Vim can meet your requirements.

The above is the detailed content of Summarize several useful JavaScript editors. For more information, please follow other related articles on the PHP Chinese website!