Merge remote-tracking branch 'origin/dev'

Author: dcloud-wandl

en/Tutorial/Language/Snippets.md

@@ -1,61 +1,62 @@
-# 代码块
+# Snippets
 
-## 概述
+## Overview
 
-代码块是快速开发的利器。简单的敲几个字母，回车，就能生成大段代码。
+Snippets are a powerful tool for rapid development. Simply type a few letters and press Enter to generate a large piece of code.
 
-比如我们经常会敲if...else结构，在HBuilderX中，只需敲`ife`回车，就能直接生成相应的代码结构。
+For example, we often type the `if...else` structure. In HBuilderX, you can directly generate the corresponding code structure by hitting `ife` and enter.
 
-敲`ife`
+input `ife`
 
 <img src="/static/snapshots/tutorial/snippets_3.png" style="zoom: 90%;" />
 
-回车后生成if结构体
+Generate if structure after carriage return.
 
 <img src="/static/snapshots/tutorial/snippets_4.png" style="zoom: 90%;" />
 
-## 常用代码块列表
+## List of commonly used code blocks
 
-**通用js代码块**
+**JavaScript Snippets**
 
-- iff ：简单if
-- forr ：for循环结构体
-- fori ：for循环结构体并包含i
-- funn：函数
-- funa：匿名函数
-- clog：打印日志
-- clogvar：打印变量命名和值
+- iff
+- forr ：for loop structure
+- fori ：for loop structure and contains i
+- funn: function
+- funa: anonymous function
+- clog: print log
+- clogvar: print variable name and value
 
-**dom代码块**
+**dom Snippets**
 
 - dg ：document.getElementById
 - dl ：$("")
 
-**vue代码块**
+**vue Snippets**
 
-敲v，即可拉出各种vue代码块
+Enter `v`, You can pull out various vue Snippets.
 
-**uni-app代码块**
+**uni-app Snippets**
 
-敲u，即可拉出各种uni-app代码块
-还有ifios、ifandroid，这2个平台判断代码块（HBuilderX 1.9.10+）
+Enter `u`, You can pull out various uniapp Snippets.
 
-## 代码块设置
+## Snippets settings
 
-HBuilderX已经内置了大量常用的代码块，熟悉这些代码块，对于提高编程效率有重要帮助。
+HBuilderX has built-in a large number of commonly used Snippets. Familiarity with these Snippets is important to improve programming efficiency.
 
-查看内建的代码块，点击菜单-工具-代码块设置，选择你要查看的语言的代码块。
+To view the built-in Snippets, click [Menu-Tools-Snippets Settings], and select the Snippets of the language you want to view.
 
-<img src="/static/snapshots/tutorial/snippets_1.png" style="zoom: 90%;" />
+<img src="/static/snapshots/tutorial/menu_tool/menu_snippets_en.png" class="hd-img" />
 
-打开的界面中，左侧即是预置的代码块，右侧是开发者可以自己扩展代码块的地方。
+In the opened interface, the left side is the preset Snippets, and the right side is the place where developers can extend the Snippets by themselves.
 
-<img src="/static/snapshots/tutorial/snippets_2.png" style="zoom: 80%;" />
+<img src="/static/snapshots/tutorial/menu_tool/snippets_custom_en.png" class="hd-img" />
 
 
-## 自定义代码块
+## Custom Snippets
 
-自定义代码块都是配置json文件中的，直接来一个js例子吧，上述`ife`代码块的配置如下：
+Custom Snippets are in the configuration json file.
+
+js Snippets example: the configuration of the above `ife` Snippets is as follows:
 
 ```json
 {
@@ -73,50 +74,50 @@ HBuilderX已经内置了大量常用的代码块，熟悉这些代码块，对
 }
 ```  
 
-### 代码块配置格式说明
+### Snippets Format description
 
-HBuilderX使用json定义代码块的格式，兼容vscode的代码块格式，也就是你可以把vscode里已经配置的自定义代码块方便的挪到HBuilderX中使用。
+HBuilderX uses json to define the format of the Snippets, which is compatible with the Snippets format of vscode, that is, you can easily move the custom Snippets that has been configured in vscode to HBuilderX for use.
 
 
-|配置项			|说明																																																																													|
-|--				|--																																																																														|
-|key			|代码块显示名称，显示在代码助手列表中的名字。key是不能重复的。上面例子中`"if ... else"`就是一个`key`。																																																					|
-|prefix			|代码块的触发字符，就是敲什么字母可以激活这个代码块。																																																																	|
-|body			|代码块的内容																																																																											|
-|triggerAssist	|为`true`表示该代码块输入到文档后立即在第一个`tabstop`上触发代码提示，拉出代码助手，默认为`false`。																																																						|
-| project		|将代码块控制在指定项目类型下生效。可取值有：`uni-app`、`Web`、`App`、`Wap2App`。<br/>`Web`指普通项目，`App`指5+App项目。如果不设置，则该代码块在所有项目类型下均生效。<br/>比如：`"project": "uni-app"`，代表这个代码块仅在uni-app项目下生效。<br/>如需设置多种项目类型，用逗号分隔。比如：`"project": "uni-app,App"`	|
+|Configuration item	|Description																																													|
+|--									|--																																																		|
+|key								|Snippets display name, the name displayed in the code assistant list. The key cannot be repeated.|
+|prefix							|Trigger character of Snippets																								|
+|body								|The content of the Snippets.																																					|
+|triggerAssist			|True means that the code prompt is triggered on the first tabtop immediately after the code block is entered into the document, and the code assistant is pulled out. The default is false.	|
+|project		|Control the code block to take effect under the specified project type. Possible values are: `uni-app`, `Web`, `App`, `Wap2App`.<br/>To set multiple item types, separate them with commas. For example: `"project": "uni-app,App"`	|
 
-**配置项body详细说明:**
+**Body description:**
 
-- `$1` 表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置`$1`；如该位置有预置数据且需要选中，则写法是`${1:selectedtext}`；这里还支持下拉候选菜单，多选项即下拉候选列表使用`${1:foo1/foo2/foo3}`
-- `$2` 表示代码块输入后再次按tab后光标的切换位置`tabstops`（代码块展开后按tab可以跳到下一个`tabstop`，在HBuilderX中看到类似绿色光标的不闪的竖线，就可以按tab或回车跳转光标过去）
-- `$0`代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。
+- `$1` The position of the cursor after the code block is entered. If you need multiple cursors, configure `$1` in multiple places; if there are preset data at this location and need to be selected, the writing method is `${1:selectedtext}`; here also supports drop-down candidate menus, multiple options are drop-down candidates The list uses `${1:foo1/foo2/foo3}`
+- `$2` After the code block is entered, the cursor switch position after pressing tab again.
+- `$0` The final cursor position after the code block is entered.
 
-特别说明：
-1. **双引号使用`\"`转义**
-2. **换行使用多个数组表示，每个行一个数组，用`双引号`包围，并用`逗号`分隔**
-3. **缩进需要用`\t`表示，不能直接输入缩进或空格！**
+Remark：
+1. **Double quotes are escaped with `\"`**
+2. **Line breaks are represented by multiple arrays, one array per line, surrounded by `double quotes` and separated by `commas`**
+3. **The indentation needs to be indicated by `\t`, you cannot directly enter the indentation or spaces! **
 
 
-### 注意事项
+### Matters needing attention
 
-1. 每个代码块以`key`为主键，多个代码块需要`逗号`分隔。
-2. 如果json语法不合法，编辑器状态栏会弹出错误信息，json中会画出红波浪线，请注意修正。
+1. Each code block uses `key` as the main key, and multiple code blocks need to be separated by `commas`.
+2. If the json syntax is illegal, an error message will pop up in the editor status bar, and a red wavy line will be drawn in the json, please pay attention to the correction.
 
-## 注释模板同步时间
+## Comment template For Datetime
 
-> HBuilderX 2.7.5+版本起，支持主持注释模板同步时间
+> From HBuilderX 2.7.5+ version, it supports the synchronization time of host annotation template
 
-点击菜单【工具】【代码块设置】【javascript代码块】，输入如下内容：
+Click the menu [Tools - Snippets settings - javascript snippets], and enter the following:
 
 ```
 {  
     "method-annotation": {  
         "prefix": "anno",  
         "body": [  
             "/**",  
-            " * 方法说明",  
-            " * author: 佚名",  
+            " * Method description",  
+            " * author: author name",  
             " * description: ",  
             " * @param $1",  
             " * @return $2",  

en/Tutorial/Language/markdown.md

@@ -1,101 +1,68 @@
-HBuilderX对md提供了强大支持，是有史以来最强大、最简洁、最高效的markdown书写工具。
+# MarkDown
 
-下载HBuilderX，点菜单帮助-markdown语法说明，会打开一个md文件，里面详细演示了HBuilderX对markdown的强化。
-**推荐在那里实际体验**
+HBuilderX provides powerful support for md and is the most powerful, concise and efficient markdown writing tool ever.
 
-## 强大的Emmet支持、及快捷键支持
+Download HBuilderX, click the menu help-markdown syntax description, it will open an md file, which demonstrates the enhancement of markdown by HBuilderX in detail.
+**Recommended for actual experience there**
 
-- 标题:  敲`h2+Tab`即可生成二级标题
-- 图片: `img`后敲`Tab`
-- 链接: `a`后敲`Tab`
-- 表格: `table3*3`后敲`Tab`，表示生成3行3列的表格，行首生效
-- 分割线: `hr`后敲`Tab`
-- 代码块: `code`后敲`Tab`，行首生效
-- `day`后敲`Tab`，当前日期。注意day需在行首或前面有空格
-- `time`后敲`Tab`，当前时间。注意time需在行首或前面有空格
-- 文字加粗: `b`后敲`Tab`
-- 文字倾斜: `i`后敲`Tab`
-- 注释：快捷键`Ctrl+/`快速插入注释
+## Powerful Emmet support and shortcut key support
 
-## 强大的智能粘贴
+- **title**:  hit `h2+Tab` to generate a secondary title
+- **image**: Hit `Tab` after `img`
+- **link**: Hit `Tab` after `a`
+- **table**: Knock on `Tab` after `table3*3`, it means that a table with 3 rows and 3 columns is generated, and the first row takes effect
+- **split line**: Hit `Tab` after `hr`
+- **code block**: Hit `Tab` after `code`, the beginning of the line will take effect
+- Press `Tab` after `day`, the current date. Note that day must have a space at the beginning or in front of the line
+- Press `Tab` after `time`, the current time. Note that time must have a space at the beginning or in front of the line
+- **Bold text**: press `Tab` after `b`
+- **The text is slanted**: press `Tab` after `i`
+- **Comment**: Shortcut key `Ctrl+/` to quickly insert a comment
 
-- 图片: 支持智能粘贴，粘贴剪切板里的图形时会自动保存为本md文档的附件
-- 链接: 支持智能粘贴，粘贴URL会自动变成超链接格式，粘贴本地文件进来也会自动创建引用链接
-- 表格: 支持从excel、wps、word、number的表格中复制粘贴表格进来
+## Powerful smart paste
 
-## 强大的智能双击
+- **Image**: Support smart paste, when you paste the graphics in the clipboard, it will be automatically saved as an attachment to the md document
+- **Link**: Supports smart pasting, the pasted URL will automatically become a hyperlink format, and the local file will automatically create a reference link when you paste it in
+- **Table**: Support copy and paste tables from excel, wps, word, number tables
 
-- 标题: 双击`#号`可选中整个标题段落
-- 有序列表: `双击`前面的数字，可重新对数字排序，修正序号错误
-- 代码块: `双击`语法区开头，即`!左侧`，选中包含定义符的整段文字
-- 注释: `双击`注释首尾的定义符，选中整段注释
-- 链接: `双击`语法区开头，即`[`左侧，选中包含定义符的整段文字
-- 图片: `双击`语法区开头，即`!`左侧，选中包含定义符的整段文字
+## Powerful smart double click
 
-## 强大的整理功能
+- **Title**: Double-click the `# sign` to select the entire title paragraph
+- **Ordered list**: `Double click` the number in front of it, you can re-sort the numbers and fix the serial number error
+- **Code block**: `Double-click the beginning of the `grammar area, that is, the left side of `!`, select the entire text containing the delimiter
+- **Comment**: `Double click` the delimiter at the beginning and end of the comment to select the whole comment
+- **Link**: `Double-click` the beginning of the grammar area, which is to the left of `[`, select the entire text containing the delimiter
+- **image**: `Double-click` the beginning of the grammar area, which is to the left of `!`, select the entire text containing the delimiter
 
-- 表格：支持`Ctrl+K`可以自动整理表格格式
+## Powerful Format function
+
+Table: Support `Ctrl+K` to automatically organize the table format
 
 <img src="/static/snapshots/tutorial/markdown_table_format.gif" style="border: 1px solid #eee;"/>
 
-## 直观的文档结构图
+## Intuitive document outline
 
-HBuilderX Markdown文件，也支持显示文档结构图（大纲视图）。
+HBuilderX Markdown file also supports displaying document outline view.
 
-windows快捷键: `Alt+w`; MacOSX快捷键：`Ctrl+w`
+Windows shortcut key: `Alt+w`; MacOSX shortcut key: `Ctrl+w`
 
 <img src="/static/snapshots/tutorial/markdown_outline.jpg" style="zoom: 45%;border-radius: 20px;border: 1px solid #eee;"/>
 
-## 实用的任务列表
-
-任务列表非常实用，管理待办、已办非常便利。
-
-- [ ] 任务列表-未完成任务 `快捷键：Ctrl+Alt+[`
-- [x] 任务列表-已完成任务 `快捷键：Ctrl+Alt+]`
-
-## markdown一键分享
-
-使用markdown也有一个重要的问题，那就是图片的存储，markdown文件要用到图片时必须是一个链接，在不使用图床的情况下，编辑上传图片太麻烦。
-
-HBuilderX 2.8.8,  推出了 MarkDown一键分享功能。使用uniCloud作为图床 什么是[uniCloud](https://uniapp.dcloud.io/uniCloud/README)，可靠、安全、简单易用、免费。
-
-markdown一键分享，顾名思义是在HBuilderX中写好的markdown文档，可以简单通过编辑器右键【一键分享】菜单或者快捷键上传到云端，并生成分享链接，并且完全免费！
-
-文档引用到本地图片会自动解析一并上传到云端。
-
-[markdown一键分享](/Tutorial/extension/markdown_share)
-
-## 云同步笔记的技巧
-
-#### 云同步工具
-
-首先推荐一个云同步工具，微软的onedrive。[https://skydrive.live.com/](https://skydrive.live.com/)
-
-在dropbox被墙后，onedrive成为最佳选择，免费、稳定、安全、多平台。
-
-win10平台自带onedrive客户端，其他平台可在上述网址下载安装。（一定要安装客户端，web版也需要翻墙）
-
-配置onedrive账户后，在本机我的电脑上会出现一个onedrive文件夹，在里面新建一个“note”的文件夹（名字可自定），然后把HBuilderX写的md都存到这个文件夹中。
-
-每次在HBuilderX中保存md文件后，onedrive会自动同步这个文件到云端。
-
-使用其他电脑或手持设备后，也会自动看到这个文档。
-
-onedrive手机端不支持直接查看markdown，可另行安装手机App，iOS上推荐使用mweb，安卓上推荐使用锤子便签。
-
+## Useful task list
 
-#### svn、git同步
+The task list is very practical, and it is very convenient to manage to-do and already done.
 
-本机装好node后，利用watch监听文件变化，发现文件修改可自动提交到svn或git。
+- [ ] Task List-Unfinished Tasks `Shortcut Key: Ctrl+Alt+[`
+- [x] Task list-completed tasks `Shortcut key: Ctrl+Alt+]`
 
-团队共享的待办事项同步可以用这种方式处理。
+## markdown share to weblink
 
-在DCloud内部，个人文档大多采用方式1，公司协作文档均采用方式2。并行使用。
+> HBuilderX 2.8.8, launched MarkDown one-key sharing function. Use uniCloud as a picture bed What is [uniCloud](https://uniapp.dcloud.io/uniCloud/README), reliable, safe, easy to use, and free.
 
-这套方案适用于pc端编写，手机端查看的场景。这个场景下，HBuilderX+markdown拥有远胜于evernote、OneNote等笔记软件的体验。启动更快捷、编写更高效、阅读更美观。
+There is also an important problem with using markdown, that is, the storage of pictures. When a markdown file uses a picture, it must be a link. It is too troublesome to edit and upload pictures without using the picture bed.
 
-但如果经常在手机端编写并同步的话，还是云笔记本软件更合适。
+Markdown sharing, as the name suggests, is a markdown document written in HBuilderX, you can simply upload it to the cloud through the editor's right-click [share to weblink] menu or shortcut key, and generate a sharing link, and it's completely free!
 
-总看电视和刷短视频，会让人变傻。
+Document references to local images will be automatically parsed and uploaded to the cloud.
 
-打开HBuilderX，在键盘上敲出凝结思绪的markdown，会让你变聪明。
+[markdown sharing](/Tutorial/extension/markdown_share)

en/Tutorial/UserGuide/LocalFileDiff.md

@@ -2,4 +2,4 @@
 
 In the project explorer, select two files to be compared, right-click the menu, and click [Compare selected files]
 
-<img src="/static/snapshots/tutorial/file_diff.gif" style="zoom: 90%; border:1px solid #eee;"/>
+<img src="/static/snapshots/tutorial/file_diff_en.gif" style="zoom: 80%; border:1px solid #eee;"/>

en/Tutorial/UserGuide/SyntaxCheck.md

@@ -35,4 +35,4 @@ The summary result of the verification will be displayed in the `Status Bar`.
 
 For example, if there are two errors, you can press `F4` to switch to different errors. A red wavy line is drawn. When the mouse moves over the red wavy line, a specific error message will be displayed.
 
-<img src="/static/snapshots/started_tutorial/plugins-syntax-check-01.png" style="zoom: 90%;border:1px solid #eee;border-radius: 5px;" />
+<img src="/static/snapshots/started_tutorial/plugins-syntax-check-01_en.png" style="zoom: 90%;border:1px solid #eee;border-radius: 5px;" />

en/Tutorial/UserGuide/built-in-browser.md

@@ -1,18 +1,18 @@
-# 内置浏览器
+# Built-in Browser
 
-HBuilderX，内置浏览器，支持边改边预览。
+HBuilderX Built-in Browser, Support preview while changing。
 
-- 支持预览markdown文件
-- 支持web项目、vue项目、uniapp项目、5+项目在内置浏览器预览
+- Support previewing markdown files
+- Support web project, vue project, uniapp project, 5+ project preview in built-in browser
 - ......
 
-### 查找代码中对应的DOM节点、高亮浏览器内对应元素
+### Highlight the Elements in the Browser、Find DOM Node in File
 
-> 仅支持HBuilderX 2.6.10+版本
+> Only supports HBuilderX 2.6.10+ version
 
-- 在内置浏览器，右键菜单，点击`查找代码中对应的DOM节点`,即可跳转到编辑器相应位置
-- 在编辑器内，右键菜单，点击`高亮浏览器内对应元素`, 即可在内置浏览器显示相应元素
+- In the built-in browser, Selected element, right-click the menu,  click`Highlight the Elements in the Browser`,You can jump to the corresponding position of the editor
+- In the editor, Selected code， right-click the menu, click on `Find DOM Node in File` to display the corresponding elements in the built-in browser
 
-**示例**
+**Example**
 
-<img src="/static/snapshots/tutorial/browser_1.gif" style="zoom: 90%;border:1px solid #eee;" />
+<img src="/static/snapshots/tutorial/browser_1_en.gif" style="zoom: 90%;border:1px solid #eee;" />