In the editing area, you can write code and perform basic operations such as adding/deleting/renaming files for the project.

# File Formats

Since only UTF8 encoding format is supported on iOS, the code files will be verified for the encoding format by the latest Weixin DevTools when the code is uploaded.

# File Support

The DevTools support editing wxml, wxss, js, json, and wxs files, and previewing image files.

# File-Related Operations

You can create a page in two ways.

1. Right-click on the directory tree and select Create Page, and wxml, wxss, js, and json files required for the page will be generated automatically.

2. Add the path of the page to be created in the pages field of app.json, and the files required for the page are generated automatically.

# Auto-save

After the code is edited, DevTools can help users save the editing status of the code. The status of edited files is remained if you directly close the DevTools or switch to another project. But note that the modified content can't be written to the disk until a user saves the file.

If Auto-save when editing files is enabled in the settings (Settings > Edit Settings > Auto-save when editing files), the DevTools can save the changes to the disk automatically when editing the file without the need to save it manually.

If Auto-save all files during compilation is enabled in the settings (Settings > Compile Settings > Auto-save all files during compilation), all the files will be saved automatically when you click Compile.

# Real-time Preview

If Auto-compile Mini Program when saving files is enabled in the settings (Settings > Edit Settings > Auto-compile Mini Program when saving files), you can preview the edited wxml, wxss, js, and json files via a simulator in real time.

Note: Enabling Auto-save when editing files at the same time may lead to a delay in the compilation to avoid frequent operations. You can click the Compile button to compile files immediately.

# Auto-completion

Like most editors, DevTools comes with a well-functioned auto-completion feature.

• The js file editor can help developers complete all the APIs and related notes and explanations, and provide support to code template.
• The wxml file editor can help developers directly write related tags and properties in these tags.
• The json file editor can help developers complete related configurations, and give real-time prompts.

js file completion

Code template support

json file completion

wxml file completion

# TypeScript Support

To develop a project in TypeScript, you can create a project using the template of QuickStart project that uses the TypeScript language provided by DevTools for further development.

To build and use a TypeScript project, you need to install npm. By configuring the predefined commands before compilation, you can run tsc and compile it to a js file.

To configure TypeScript compilation options, see the configuration of tsconfig.json.

Note: Mini Programs support JS files only, therefore all TS files are not packaged and uploaded by default.

# Git Status Display

If there is a Git repository under the project directory of Mini Program (the directory where project.config.json resides), the editor can display the current Git status.

# Directory Tree

As shown in the figure, when a file is changed, an icon is displayed on the right side of the file under the directory tree to indicate the corresponding status. If a file that has been changed exists in a collapsed directory, a dot icon is displayed on the right side of the directory to indicate the status.

Status of each file icon is defined as follows:

Status of each folder/directory icon is defined as follows:

If a file is modified, right-click on the file and select Compare with previous version to view the comparison between the file in the current work area and that in HEAT version.

# File Editing

When there is a Git repository, the status bar shows the current branch information of this repository. For example, the figure below shows the current Git repository is in the v2 branch.

In addition, when you edit the file, the difference compared with the previous version is displayed in real time on the left side of the edited code.

Description of styles:

Status of each folder/directory icon is defined as follows:

# Setting of Windows Carriage Return

To ignore Windows carriage returns, go to Settings > Edit, and check Ignore Windows carriage returns when comparing files via Git.

After that, all Windows carriage returns will be treated as Unix carriage returns when edited files are compared.