MX 前端工作台

Table of Contents generated with DocToc

• Features
  • Quick ExtractClass
  • CustomTemplate
• Example GIF
  • Quick ExtractClass
  • CustomTemplate

Features

Quick ExtractClass

• 简介: 提取选中 DOM 的 class 生成 SCSS/LESS 预处理语言结构，让开发过程更便捷，支持 React/Vue。

• 使用:

  • 选中需要提取的 DOM 代码

  • 右击打开菜单栏选中 extractClass

• 快捷键:

  • Mac cmd+1 ｜ Window ctrl+1

CustomTemplate

• 简介: 在 Vscode 资源管理器 菜单中可以创建自定义模版，并且可以接受文件名称变量，让初始模版过程更灵活高效。

• 使用:

  • 在根目录创建 .template 目录，任意的一级目录或文件都被视为模版

  • 在 Vscode 资源管理器 中右键点击 “创建自定义模版”

  • 选择需要创建的模版，输入文件名

  • 模版文件中可以接收 3 个文件名称变量 （来源输入的文件名）

    • <%= fileName %>： 文件名
    • <%= humpfileName %>： “-” 转驼峰模式文件名，如：文件名 button-info ，会被输出成 buttonInfo
    • <%= fUpHumpFileName %>： 首字母大写，”-“ 转驼峰模式文件名，如：文件名 button-info ，会被输出成 ButtonInfo
    • tip：当创建的模版/组件需要根据文件名做相应的命名时，可以用到这些变量。

Example GIF

Quick ExtractClass

CustomTemplate