Code writing, adding, deleting and renaming of files, and other basic operations on the current project can be conducted at the compilation area.

File format

As iOS only supports UTF8 encoding format, the latest version Developer Tool will validate the encoding format of the code file once the code is uploaded.

File support

The tool currently supports editing 5 types of file: wxml, wxss, js, json, wxs, as well as preview of image files.

File operations

There are 2 methods for creating new pages

  1. Right-click on the directory tree and select Create New Page. It will generate wxml, wxss, js, json required by the page

  2. Add the path of the page to be created in the "pages" field of "app.json". The files required by the page will be auto-generated

Auto-save

After code editing, the tool will automatically save the current code editing status for the user and directly close the tool or switch to another project. The edited file status will not be lost. However, take note that only when the user proactively saves the file, will the modified content actually be written to the hard drive.

If "Auto-save When Modifying Files" is enabled in Settings (Settings - Editing Settings - Auto-save When Modifying Files), the tool will auto-save to the hard drive when modifying files. Manual saving is not required.

If "Auto-save All Files When Compiling Files" is enabled in Settings (Settings - Compile Settings - Auto-save All Files When Compiling Files), all files will be auto-saved when "Compile" is clicked.

Real-time preview

If "Auto-compile Mini Program When Saving Files" is enabled in Settings (Settings - Compile Settings - Auto-compile Mini Program When Saving), then when wxml, wxss, js, json files are modified, the simulator can be used to preview editing in real-time:

Note: If the setting "Auto-save When Modifying Files" is enabled, compile actions will have a certain lag to avoid overly frequent compiling. Clicking on the Compile button manually will compile immediately.

Auto-complete

Just like most editors, the tool provides fairly comprehensive auto-complete

  • "js" file editing will help the developer complete all APIs and related note explanations, and provide code template support
  • "wxml" file editing will help the developer directly output related tags and tag attributes
  • "json" file editing will help the developer complete related configurations and provide real-time alerts

js complete

Code template support

json complete

33

wxml complete

33

Git status display

If "Git" warehouse exists in the Mini Program project directory (where project.config.json resides), the editor can display the current "Git" status.

Directory tree

As shown in the image, when there are changes in a certain file, a corresponding icon will display on the right of file in the directory tree to represent this status. When a particular collapsed part of the directory contains files with changes, a round icon will display on the right side of this directory to represent this status.

The meaning of file icons is as follows:

Icon Meaning
U File not tracked ("Untracked")
A New file ("Added", "Staged")
M Changes in file ("Modified")
+M Changes in file ("Modified", "Staged")
C Conflict in file ("Conflict")
D File has been deleted ("Deleted")

The meaning of folder directory status icons is as follows:

Icon Meaning
Red dot There is at least one file under the directory with "deleted" status
Orange dot There is at least one file under the directory with "conflict" status
Blue dot There is at least one file under the directory that is not tracked
Green dot There is at least one file under the directory with "modified" status

If a particular file is "Modified", you can right-click on this file and select "Compare with previous version". This lets you view the comparison between the file in the current workspace and the HEAD version.

File Editing

When "Git" warehouse exists, the status bar will display the current branch information of this "Git" warehouse. For example, the following image shows that the current "Git" warehouse is in the v2 branch.

At the same time, when editing a file's content, a comparison between the previous version's content will be displayed on the left of the code to be edited.

Style description is as follows:

The meaning of folder directory status icons is as follows:

Style Meaning
Blue line There are changes in the code in this part
Green line Code in this part was newly added
Red triangle arrow Code has been deleted from this part

Windows style carriage return settings

If the Windows style carriage return symbol needs to be ignored, go to "Settings" - "Edit", and check "When Git compares file content, ignore Windows style carriage return symbol".

After that, when File Editing is conducting file comparison, all Windows style carriage return symbols will be treated as Unix style carriage return symbols.