MasterGo 帮助中心

暗色模式

MasterGo For VSCode ​

MasterGo For VS Code 可直接在 VS Code 中轻松访问设计资源、精准检查开发图层（Ready for Dev），通过智能代码生成与团队协作闭环，提升设计还原效率，告别环境切换，专注工程交付。

  • 设计稿实时预览：在 VS Code 中直接查看设计稿，支持交互式画布操作。
  • 一键生成代码片段：快速定位开发图层，一键生成 CSS/SCSS/Vue 等代码片段。
  • 智能代码补全：根据选中图层自动提示样式代码（支持 CSS/JSX/TSX/Vue 等）。
  • 资源高效管理：导出切图资源至本地工程目录，支持多工作空间选择。
  • 团队协作支持：切换企业/团队，同步文件列表、评论区和消息通知。

登录授权 ​

  1. 点击 VS Code 侧边栏的 MasterGo 图标，点击「授权登录」。
  2. 浏览器自动打开 MasterGo 授权页，登录账号后点击「打开 Visual Studio Code」。
  3. 返回 VS Code，自动加载文件列表。

VScode1.png

VScode2.png

文件列表操作 ​

  • 查看文件：在左侧边栏展开文件列表，点击文件名将自动在画布中打开，支持分类浏览（最近打开、分享给我的、团队项目）。

vscode3.png

  • 切换企业：点击「切换企业」图标，在下拉选择框中选择需要切换的企业，切换后文件列表将同步切换。

查看设计稿的 Ready for Dev 列表 ​

  • 全部：展示全部 Ready For Dev 图层。
  • 空状态：没有设计图被标记成开发状态。

vscode4.png

获取代码标注 ​

  1. 选中设计稿，底部面板「代码」页签将展示相应的代码标注。
  2. 支持切换代码类型与单位，点击「复制」按钮可直接复制。

vscode5.png

自动代码补全 ​

1. 补全支持的文件类型 ​

  • 样式文件：css、scss
  • JS 文件：javascript、javascriptreact、typescript、typescriptreact
  • HTML 文件：html、vue

2. 单行补全逻辑 ​

选中图层后提供代码提示功能，如果某一个属性已经在当前代码块存在则不再提示。

  • 在 CSS 文件中输入时：
css
.name {
    dis /* 用户输入 dis 时，提示（MasterGo）display: flex; */
}
  • 在 HTML 文件中输入时：
html
<html>
  <header>
    <style>
      .name {
         dis /* 用户输入 dis 时，提示（MasterGo）display: flex; */
      }
    </style>
  </header>
  <body>
    <div class="name"></div>
  </body>
</html>
  • 在 JS/React 文件中输入时：
javascript
const App = () => {
  return (
    <div
      style={{ dis }}
    ></div> /* 用户输入 dis 时，提示（MasterGo）display: flex, */
  );
};

3. 块级补全逻辑 ​

和单行补全逻辑一致，当前代码块已经存在的属性则不再提示。

  • 在 CSS 文件中输入时：
css
.name {
  /*
        display: flex;
        color: red;
        用户光标在此且当前行无字符时，提示上述样式块
    */
}
  • 在 HTML 文件中输入时：
html
<html>
  <header>
    <style>
      .name {
        /*
                display: flex;
                color: red;
                用户光标在此且当前行无输入时，提示上述样式块
            */
      }
    </style>
  </header>
  <body>
    <div class="name"></div>
  </body>
</html>
  • 在 JS/React 文件中输入时：
javascript
const App = () => {
  return (
    <div
      style={
        {
          /*
                display: flex;
                color: red;
                用户光标在此且当前无输入时，提示上述样式块
            */
        }
      }
    ></div>
  );
};

4. 代码补全演示 ​

vscode6.gif

vscode7.gif