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.
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 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 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 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 ++ 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.
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
