An in-depth review of the top five WeChat app development IDEs

[[174800]]

WeChat Mini Programs have been in beta for a while. I wrote a few small demos out of curiosity and learning. Although I didn’t encounter too many problems on the MINA framework, the official development tools are not very good.

• The API prompts are incomplete. You have to check the APIs one by one. Writing code is super slow.
• Many necessary shortcut keys are missing, such as selecting all keywords, quickly copying a line, etc.
• Can't choose the color theme? What should I do if I don't like the white style?
• No plugins, no plugins, no plugins. I'll say it three times.

I have no choice but to try various IDEs. Now let me talk about my needs or ideas for IDEs:

• Lightweight: I don’t like huge tools like Eclipse. Even if similar tools appear, I will not use them because 90% of their functions will not be used.
• Customizable code coloring: Code coloring is a must-have feature, and it would be best if color templates are supported
• Accurate code hint: This is very important, everyone understands
• Debuggable: IDE can debug or run
• Real-time preview interface: Since application development is different from web pages, real-time preview must load dynamic data into the interface when the program is running. I don’t have much hope for this.

In response to the above requirements, the author has tried the tools currently on the market that support the development of mini-programs, and has worked hard to summarize them as follows for your reference.

WeChat Mini Program Official Development Tools

Note that I did not use the word "IDE" in this subtitle. Because in my eyes, it is really a tool, not an IDE. The code editing function in the official tool is to embed the code editing function of vscode into the tool, which is not enough to support development.

advantage

Because it is an official tool, it has incomparable natural advantages over other third-party tools, if its code editing function is not too weak.

• Official tool, debuggable and previewable
• Basic code editing, smart prompts, debugging and other functions are available
• Project management, creation, mobile preview, code submission review
• Official maintenance updates

shortcoming

The downsides are also obvious. Overall, it is a tool rather than an IDE. The poor code editing function makes it very awkward to write code, which is the most important reason why I gave up on it.

• The API prompts are incomplete. You have to check the APIs one by one. Writing code is super slow.
• Many necessary shortcut keys are missing, such as selecting all keywords, quickly copying a line, etc.
• Can't choose the color theme? What should I do if I don't like the white style?
• No plugins, no plugins, no plugins. I'll say it three times.

Summarize

At present, because WeChat web development tools are needed to create, debug, view, preview, and upload mini-programs, this tool is indispensable. However, the code editing function is too poor, so it is recommended to use other third-party code editing tools instead.

Sublime Text 3

After talking about the official tools, let’s talk about sublime text 3, the tool I use most in my daily work. It is positioned as a code editor rather than an IDE. After trying it out, I found that its code prompts are only average.

advantage

• Open files faster and the UI is simple and elegant
• Code editing experience is comfortable and efficient
• With a large number of plug-ins, you can basically find corresponding plug-ins to meet different needs
• Third-party developers develop mini-program plug-ins for code coloring and code prompts

shortcoming

• No debugging, no preview
• Because it is a plug-in written by a third-party developer, the code prompts are not very comprehensive

Summarize

Apart from its own code editing advantages, it is of no substantial help for small program development, and eventually the Sublime Text solution was abandoned by the author.

I have to complain about this plug-in for Sublime Text. It took me a long time to get it running. It's so depressing.

Note: The plugin download link is at the end of the article

Vim + WEPT

Vim, the god of editors, has always been my weapon for showing off. I won’t say much about the advantages of vim, lest people from Emacs come and scold me.

Someone has developed a corresponding plug-in online, called Wxapp.vim. I used this plug-in briefly, which includes file detection, smart completion, document jump, syntax highlighting, indentation, code snippets, word lists, syntax checking and other functions. Overall, it is good, but there is a serious problem. When I was doing server development, I basically used Vim programming, and ran debugging directly in the terminal with some other plug-ins and tools. But I had to give up the WeChat applet after using it for a long time, because I had to switch back and forth between Vim and the official WeChat applet tool frequently, which made me extremely irritable. According to my usual style, I should throw away the mouse when using Vim.

But I eventually discovered a remedy, which I'll describe below.

advantage

• It has complete functions such as code highlighting and code prompts.
• There is a small program development plug-in Wxapp.vim that can be used, as mentioned above

shortcoming

• Unable to debug preview
• Another problem is that many people can't handle Vim. It has a high learning curve.
• The UI and usage are not in line with the habits of most people

Summarize

'WEPT' solves the pain points of Vim I mentioned above.

WEPT is a real-time development environment for WeChat Mini Programs. Its goal is to provide an efficient, stable, friendly, and unlimited operating environment for Mini Program development. In other words, it is a real-time operating environment that can preview and debug in real time. At the same time, debugging can be done with the help of Chrome browser. It perfectly solves the problem of code editing, debugging, and previewing when paired with Vim.

This product is not an IDE, and the author will not analyze its advantages and disadvantages. In general, WEPT+VIM+Plugin is a good solution. I recommend it to everyone.

Note: The plugin download link is at the end of the article

WebStorm

There is a plug-in for WebStorm online that can provide code hints, but it cannot be used for debugging and previewing, and it is a heavy tool, so I did not use WebStorm. Those who like heavy feeling can try this tool.

advantage

• There are plug-ins that can realize code highlighting, code prompts and other functions
• Very mature and very rich functions
• Various shortcut keys

shortcoming

• Unable to debug preview
• More features, more bloated

Summarize

In summary, WebStorm is similar to the above mentioned ones. It has powerful code editing functions but requires plug-in support to develop small programs, and it is bloated in size.

Note: The plugin download link is at the end of the article

Egret Wing

Wing is the first IDE that I have seen that is supported by a company, so its functions are quite mature. I downloaded it and tried it. For now, apart from the Vim solution mentioned above, this should be the best IDE tool after comparison.

advantage

• Support code hints and code highlighting
• Real-time preview and debugging and switching previews at different resolutions
• It actually supports project creation?!
• Support new page template files
• Biweekly Updates

shortcoming

• Real-time interface preview is a static rendering. Dynamic data in the interface cannot be previewed and can only be previewed during debugging.
• Unable to perform visual drag and drop to generate the interface (am I too greedy?)

Summarize

Wing is the only IDE that supports real-time preview. Even WeChat official doesn't have real-time preview, but needs to be compiled before preview. For a lazy author like me, it's so cool to have real-time preview when writing interfaces! Wing not only can do that, but also can create projects and create new page templates. After running the project, I found that this preview interface is very similar to WeChat official development tools. It is recommended to use it first.

Summarize

I have made a table and you can choose according to your mood.