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 是指相應語言的編譯結果輸出文件夾。

好啦，這下就可以開心的編譯啦！如果能幫到你，煩請點歌推薦嗷！