diff --git a/CHANGELOG.md b/CHANGELOG.md
index d65e3e2..2dcc8f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,12 @@
 🚀 [提交问题](https://github.com/any86/any-rule/issues/new)
 
 ### 0.1.1 (2020-02-20)
+![gif](https://user-gold-cdn.xitu.io/2020/2/23/1706df78b18466fd?w=954&h=372&f=gif&s=1732199)
 - 优化"zz."体验, 改用"quickPick"组件以支持"模糊搜索".
 - 增加"设置"功能, 可以在设置中搜索"any-rule".
 
+
+
 ### 0.1.0
 - 新增支持在文件中输入"zz."唤醒正则列表.
 
diff --git a/README.md b/README.md
index 60e42e1..c01558d 100644
--- a/README.md
+++ b/README.md
@@ -1,47 +1,58 @@
-# 正则大全  ![](https://img.shields.io/badge/已收录-61条-673ab7.svg) [![](https://badgen.net/vs-marketplace/v/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) [![](https://badgen.net/vs-marketplace/i/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) [![](https://badgen.net/vs-marketplace/d/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) ![](https://img.shields.io/badge/license-MIT-F44336.svg) [![Node CI](https://github.com/any86/any-rule/workflows/Node%20CI/badge.svg)](https://github.com/any86/any-rule/actions)
-
-支持**图形界面** / **vscode插件**2种查询方式.
-
-## :rocket:图形界面
-https://any86.github.io/any-rule/
-
-## 🍭vscode插件
-1. 安装vscode中插件搜索框输入**any-rule**
-2. 安装完毕后按**F1**(或者ctrl+shift+p).
-3. 输入"**zz**"可以看到正则列表.
-4. 或者**输入关键词**, 比如"手机".
-
-![预览gif](https://user-gold-cdn.xitu.io/2020/1/10/16f8e01a684a0a18?w=420&h=243&f=gif&s=414162)
-
-## :fire:关于PR
-欢迎大家PR, 步骤如下:
-1. **正则**请在**packages/www/src/RULES.js**中添加.
-2. 运行`npm run test:rules`进行测试.
-3. 运行`npm run build:md`更新**README.md**.
-4. 请务必提交到**develop**分支.
-
-在此感谢大家对**any-rule**做出的贡献! 
-
-## 👽主要开发者
-按照加入时间排序
-<table>
-    <tr>
-        <td>
-            <a href="https://github.com/MrTenger"><img width="60" src="https://avatars3.githubusercontent.com/u/10781715?s=60&v=4"></a>
-        </td>
-        <td>
-            <a href="https://github.com/giraffeComing"><img width="60" src="https://avatars2.githubusercontent.com/u/14800669?s=460&v=4"></a>
-        </td>
-        <td>
-            <a href="https://github.com/microud"><img width="60" src="https://avatars1.githubusercontent.com/u/10163257?s=60&v=4"></a>
-        </td>
-        <td>
-            <a href="https://github.com/52cik"><img width="60" src="https://avatars0.githubusercontent.com/u/5033310?s=60&v=4"></a>
-        </td>
-    </tr>
-</table>
-
-## 🍔正则
+# 正则大全  ![](https://img.shields.io/badge/已收录-61条-673ab7.svg) [![](https://badgen.net/vs-marketplace/v/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) [![](https://badgen.net/vs-marketplace/i/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) [![](https://badgen.net/vs-marketplace/d/russell.any-rule)](https://marketplace.visualstudio.com/items?itemName=russell.any-rule) ![](https://img.shields.io/badge/license-MIT-F44336.svg) [![Node CI](https://github.com/any86/any-rule/workflows/Node%20CI/badge.svg)](https://github.com/any86/any-rule/actions)
+
+支持**图形界面** / **vscode插件**2种查询方式.
+
+## :rocket:web版
+https://any86.github.io/any-rule/
+
+## 🍭vscode插件
+
+### 安装
+vscode应用商店中搜索**any-rule**
+
+### 使用
+**方式1:**
+1. 安装完毕后按**F1**(或者ctrl+shift+p).
+2. 输入"**zz**"可以看到正则列表.
+3. 或者**输入关键词**, 比如"手机".
+
+![预览gif](https://user-gold-cdn.xitu.io/2020/1/10/16f8e01a684a0a18?w=420&h=243&f=gif&s=414162)
+
+**方式2:**
+
+在任意文件任意代码中输入"**zz.**"
+
+![预览gif](https://user-gold-cdn.xitu.io/2020/2/23/1706df78b18466fd?w=954&h=372&f=gif&s=1732199)
+
+## :fire:关于PR
+欢迎大家PR, 步骤如下:
+1. **正则**请在**packages/www/src/RULES.js**中添加.
+2. 运行`npm run test:rules`进行测试.
+3. 运行`npm run build:md`更新**README.md**.
+4. 请务必提交到**develop**分支.
+
+在此感谢大家对**any-rule**做出的贡献! 
+
+## 👽主要开发者
+按照加入时间排序
+<table>
+    <tr>
+        <td>
+            <a href="https://github.com/MrTenger"><img width="60" src="https://avatars3.githubusercontent.com/u/10781715?s=60&v=4"></a>
+        </td>
+        <td>
+            <a href="https://github.com/giraffeComing"><img width="60" src="https://avatars2.githubusercontent.com/u/14800669?s=460&v=4"></a>
+        </td>
+        <td>
+            <a href="https://github.com/microud"><img width="60" src="https://avatars1.githubusercontent.com/u/10163257?s=60&v=4"></a>
+        </td>
+        <td>
+            <a href="https://github.com/52cik"><img width="60" src="https://avatars0.githubusercontent.com/u/5033310?s=60&v=4"></a>
+        </td>
+    </tr>
+</table>
+
+## 🍔正则
 
 ### 火车车次
 ```javascript