vscode 配置 Pug Compile Hero Pro 插件步骤

这个随笔主要介绍 vscode 配置 Pug Compile Hero Pro 插件的步骤，实现快速使用less 以及 scss 等的编程语言

第一步

当然是安装我们的插件啦！

在插件商店里 搜

Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro

然后安装

第二步

进入settings.json修改配置

下载好之后我们会发现这里有个齿轮图标

点击它

再点击扩展设置

再点击在settings.json中编辑

然后就进入settings.json文件啦！

第三步

将下列代码复制粘贴到文件里

  "compile-hero.disable-compile-files-on-did-save-code": false,
  "compile-hero.javascript-output-directory": "./out",
  "compile-hero.sass-output-directory": "./out",
  "compile-hero.scss-output-directory": "./out",
  "compile-hero.less-output-directory": "./out",
  "compile-hero.pug-output-directory": "./out",
  "compile-hero.jade-output-directory": "./out",
  "compile-hero.typescript-output-directory": "./out",
  "compile-hero.typescriptx-output-directory": "./out",

一定要记得crtl+s

其中第一行 compile-hero.disable-compile-files-on-did-save-code 指当我们按下 ctrl + s 保存时才会进行编译（注意：false表示开启，true才表示关闭）。

形如 ***-output-directory 是指相应语言的编译结果输出文件夹。

好啦，这下就可以开心的编译啦！如果能帮到你，烦请点歌推荐嗷！