MasterGo For VSCode

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

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

登录授权

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

文件列表操作

查看文件：

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

切换企业：

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

查看设计稿的 Ready for dev 列表

全部：展示全部 Ready For Dev 图层

空状态：没有设计图被标记成开发状态。

获取代码标注

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

自动代码补全

1、补全的文件类型：

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

2、单行补全逻辑

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

例如，在css文件中输入时：

.name {
    dis # 用户输入dis时，提示（Mastergo）display: flex;
}

在html文件中输入时

<html>

<header>

    <style>
        .name {
           dis # 用户输入dis时，提示（Mastergo）display: flex;
        }
    </style>
</header>

<body>
    <div class="name"></div>
</body>
</html>

在js文件中输入时：

const App = () => {
    return (
        <div style={{ dis }}></div> // 用户输入dis时，提示（Mastergo）display: flex,
    );
}

3、块级补全逻辑

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

例如，在css文件中输入时：

.name {
    /*
        display: flex;
        color: red;
        用户cursor在这并且当前行没有字符，提示上面的内容
    */
}

在html文件中输入时

<html>

<header>

    <style>
        .name {
           /*
                display: flex;
                color: red;
                用户cursor在这并且当前没有输入，提示上面的内容
            */
        }
    </style>
</header>

<body>
    <div class="name"></div>
</body>
</html>
- 在js文件中输入时：
const App = () => {
    return (
        <div style={{
            /*
                display: flex;
                color: red;
                用户cursor在这并且当前没有输入，提示上面的内容
            */
        }}></div> 
    );
}

4、代码补全演示

评价此篇文章：👍🏻 有帮助 👎🏻 无帮助

👉本篇文章对你是否有帮助？👍🏻 有帮助 👎🏻 无帮助，我们期待着你的反馈。