VSCode架設前端開發環境 | 把專案改gulp4吧!如何用Visual Studio Code架設前端開發環境（pug [ jade ]、sass、gulp4、browser-sync）

文章更新通知

2023.07.14新增PowerShell權限更新

2020.07.02新增專案翻新gulp 4(task() API不支援)，快速搜尋Gulp 4

2018.10.08新增VS CODE WINDOWS及macOS快捷鍵

今天米粒不談吃喝玩樂，難得來講點工作上的東西

最近在努力進修學習新的程式語言（pug [jade]和sass），但是Sublime在撰寫sass的時候總是要自己空格，不然偵測不到語法，所以在朋友的推薦下從Sublime跳槽到vs code，結果一用就回不去了XDDDD

vs code工作架構跟Sublime頗像，但還整合了終端機的功能，幾乎可以開著vs code不切換畫面！

而且在程式的排版上也比Sublime優化，在安裝開發環境時也比Sublime方便太多太多了

本來都已經安裝好Sublime的開發環境了😂（寫了滿滿的筆記）

因為目前網路上還沒有Visual Studio Code架設前端開發環境（pug [ jade ]、sass、gulp、browser-sync）的相關文章，都是比較片段式的，所以就藉由這個部落格分享好用的開發工具給大家囉！

架設環境設備

OS X Yosemite 版本 10.10.3

OS X Yosemite 版本 10.10.5

macOS Sierra 版本 10.12.5

2017.09.18新增

Windows 10

2023.07.14新增

Windows 11

米粒總共裝過三台不同版本的mac，大致上都沒有太大差異喔！

開始架設Visual Studio Code環境

STEP 0 : 安裝Visual Studio Code及Node.js

Visual Studio Code載點

Node.js載點（我是裝v6.11.1 LTS）

STEP 1 : 設定環境

※以下$符號代表終端機，請不要輸入$唷

※當您發現任何指令都會出現無法辨識詞彙是否為 Cmdlet、函數、指令檔或可執行程式的名稱。請檢查名稱拼字是否正確，如果包含路徑的話，請確認路徑是否正確，然後再試一次。時，請修改您的PowerShell腳本原則

▼1-1.開啟Visual Studio Code程式，在「英文輸入」模式下按下^＋`（就是ctrl＋~）

▼1-2.進入root(若從無進入root過請設定密碼，Windows用戶省略root步驟)

$ su

※若無法進入，以下所有su指令通通改為sudo -s

▼1-3.全域安裝express，安裝完後輸入exit退出root

$ npm install -g express-generator

▼1-4.建立express專案：myvs

※自行命名，此安裝教學以myvs為例

$ express myvs

※此處預設安裝在『🏠個人專屬』中（Shift＋⌘/Ctrl），若為其他資料夾則輸入express 第一層/第二層，例如建立在桌面的project01專案，則輸入以下指令

$ express desktop/project01

此指令會安裝以下資料：

• app.js
• bin
• package.json
• public
• routes
• views

▼1-5.確認可進入myvs專案

$ cd myvs

※此處預設進入『🏠個人專屬』中（Shift＋⌘/Ctrl），若為其他資料夾則輸入cd 第一層/第二層，例如進入在桌面的project01專案，則輸入以下指令

$ cd desktop/project01

▼1-6.依照package.json設定檔建立專案

$ npm install

▼1-7.先以命令列執行看看，確認專案資料夾可正確執行，正常可執行就會成功跳出網頁

$ npm start

跳出網頁，若沒有的話可以直接輸入127.0.0.1:3000，若還是沒有，別著急~

最後全部監聽都安裝完後，開啟監聽就會跳出Local Port和UI Port的連結囉

※2017/09/18加註

如果npm start出現『Port 3000 is already in use』一大堆err的話，就是之前關閉沒關好，直接Ctrl+Alt+Del進入工作管理員把Node.js結束工作就可以了!

到這邊為止，初步的環境就架設完畢囉！

接下來就是安裝程式環境了～

STEP 2 : 設定SASS、SCSS以及自動編譯

▼2-1.安裝sass less主套件

$ npm install -g node-sass less

▼2-2.簡單寫一篇sass語法

▼2-3.⌘/Ctrl＋Shift＋p開啟偵錯並選擇「執行建置工作」

▼2-4.跳出確認框，點擊「設定建置工作」>「others」

※2018.03.25新增

輸入 others 沒有反應，點擊「npm : start」後依舊會出現 tasks.json。謝謝網友 Irene的補充

▼2-5.將專案文件夾中的tasks.json文件更改為以下程式

※2018/04/17加註

版本更新到2.0.0時會出現某些屬性已被淘汰，米粒幫大家轉換成最新的屬性囉

謝謝網友 Peter Liao提出的問題:)

{
	"version": "2.0.0",
	"tasks": [{
		"label": "default",
		"command": "gulp",
		"type": "shell",
		"group": "build",
		"isBackground": true,
		"presentation": {
			"reveal": "always"
			}
		}
	]
}

另外，官方文件有提出「Try running without tasks.json」

由於2.0.0版本有自帶一些檢測功能，因此不一定要有tasks.json文件囉!

大家可以改檔案名稱試試看再決定自己需不需要使用:)

※2017/09/18加註

※已有更新加註，以下作廢

version不用更動，照原本安裝的版本即可

{
	"version": "0.1.0",
	"command": "gulp",
	"isShellCommand": true,
	"tasks": [{
		"taskName": "default",
		"isBuildCommand": true,
		"showOutput": "always",
		"isBackground": true
		}]
}

※已有更新加註，以上作廢

▼2-6.同1-2步驟進入root，安裝gulp

$ npm install -g gulp

▼2-7.產出node_module資料夾

$ npm install gulp gulp-sass gulp-less

▼2-8.自行建立gulpfile.js檔案，設定如下(以public資料夾為例）：

※此處語法為執行default任務，將public/sass/資料夾中所有的sass檔，轉譯成css檔，並且存放至public/css/資料夾中

※已有更新加註(請搜尋gulp 4)，以下作廢

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
gulp.src('public/sass/*.sass')//自行更改路徑
.pipe(sass())
.pipe(gulp.dest('public/css/'))
});

gulp.task('default', ['sass'], function() {
gulp.watch('public/sass/*.sass', ['sass']);//自行更改路徑
})
//上述為監聽sass檔案並轉換為css檔案

▼2-9.按Shift＋⌘/Ctrl＋X進入擴充功能選單，安裝sass套件並重新載入

▼2-10.按下Shift＋⌘/Ctrl＋B開啟監聽，建立sass文件，存檔後確認css資料夾是否有建立同檔名.css，並且確認每次存檔皆有同步更新

到這邊為止，sass、scss的環境就架設完畢囉！

接下來就是安裝pug(jade)環境了～

STEP 3 : 設定pug（jade）以及自動編譯

▼3-1.同1-2步驟進入root，安裝pug套件

$ npm install -g pug

▼3-2.安裝gulp

$ npm install gulp-pug

▼3-3.安裝browser-sync

※browser-sync是瀏覽器同步檢視工具，程式存檔就會直接更新瀏覽器視窗，很方便

$ npm install browser-sync gu

▼3-4.開啟package.json檔案，設定如下(以public資料夾為例）：

※已有更新加註(請搜尋gulp 4)，以下作廢

{
	"name": "myvs",//自己的專案名稱
	"version": "0.0.0",
	"main": "gulpfile.js", //新增
	"keywords":["gulp"], //新增
	"private": true,
	"scripts": {
	"start": "node ./bin/www"
},
"dependencies": {
	"body-parser": "~1.17.1",
	"cookie-parser": "~1.4.3",
	"debug": "~2.6.3",
	"express": "~4.15.2",
	"jade": "~1.11.0",
	"morgan": "~1.8.1",
	"serve-favicon": "~2.4.2"
	}
}

▼3-5.開啟gulpfile.js檔案，設定如下(以public資料夾為例）：

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var pug = require('gulp-pug');

//編譯sass
gulp.task('sass', function() {
	gulp.src('public/sass/*.sass')//抓取sass資料夾中全部sass檔
	.pipe(sass())
	.pipe(gulp.dest('public/css')) //將sass資料夾中全部sass轉譯並存至css資料夾
});

//編譯pug
gulp.task('task_pug', function() {
	console.log(pug);
	return gulp.src('public/*.pug')//抓取資料夾中全部pug檔
	.pipe(pug({pretty:true})) //格式化
	.pipe(gulp.dest('public/')) //轉譯至public資料夾
});

//靜態頁面html即時預覽
gulp.task('browser-sync', function() {
	browserSync.init({
		server: "public/"////指定啟動根目錄
	});
	gulp.watch('public/sass/*.sass', ['sass']);//監聽sass文件變化，執行sass編譯sass
	gulp.watch('public/*.pug', ['task_pug']);   //監聽pug文件變化，執行task_pug編譯pug
	gulp.watch(['public/*.html',]).on("change",browserSync.reload);//監聽pug文件變化 重整瀏覽器
});
gulp.task('default',['sass','task_pug','browser-sync']); //定義默認任務（dafault） 命令 gulp default

▼3-6.建立pug文件，存檔後確認是否有建立同檔名.html，並且確認每次存檔sass、css、pug、html、瀏覽器皆有同步更新

※2017/09/18加註

如果Browser Sync有連接成功的話，視窗右上角會出現『Connected to Browser Sync』的字樣，特別注意，一定要有body才會被偵測到，所以在測試的時候不要忘記加上body唷!

※已有更新加註(請搜尋gulp 4)，以上作廢

以上安裝結束！

未來每次打開專案固定動作

• 終端機輸入npm start
• Shift＋⌘/Ctrl＋>B開啟監聽

開啟順序不對會造成錯誤

Gulp 4版本更新&自動編譯更新

因為米粒公司電腦更新，所以重裝VS CODE後發現版本太新拉~~

有好多東西不能直接套用，研究了好久才終於把Gulp3更新成Gulp4(task不再支援)

那前面安裝的部分就不再贅述，米粒直接把文件內容都更改後Po出來，有興趣更新的米粉們就可以直接複製貼上囉!

▼1.更新全域套件

npm update -g

▼2.打開package.json確認套件版本無誤

{
	"name": "myvs",
	"version": "0.0.0",
	"private": true,
	"scripts": {
	"start": "node ./bin/www"
	},
	"dependencies": {
		"browser-sync": "^2.26.7",
		"cookie-parser": "~1.4.4",
		"debug": "~2.6.9",
		"express": "^4.16.4",
		"gu": "^0.6.2",
		"gulp-less": "^4.0.1",
		"gulp-pug": "^4.0.1",
		"gulp-sass": "^4.1.0",
		"http-errors": "~1.6.3",
		"jade": "^1.11.0",
		"morgan": "~1.9.1",
		"pug": "^3.0.0"
	},
	"main": "gulpfile.js",
	"devDependencies": {
		"gulp": "^4.0.2"
	},
	"author": "",
	"license": "ISC",
	"description": ""
}

▼3.打開gulpfile.js全部改寫

const gulp = require('gulp');
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

//編譯pug
function html() {
	return gulp.src('public/pug/*.pug')
	.pipe(pug({ pretty: true }))
	.pipe(gulp.dest('public/'))
	.pipe(browserSync.stream());
}
//編譯sass
function style() {
	return gulp.src('public/sass/*.sass')
	.pipe(sass().on('error', sass.logError))
	.pipe(gulp.dest('public/css'))
	.pipe(browserSync.stream());
}
//靜態頁面html即時預覽
function watch() {
	browserSync.init({
		server: {
			baseDir: "public/"
		}
	});
	gulp.watch('public/sass/*.sass', style);
	gulp.watch('public/pug/*.pug', html);
	gulp.watch('public/*.html').on('change', browserSync.reload);
}
exports.html = html;
exports.style = style;
exports.watch = watch;

未來每次打開專案固定動作更正為

終端機輸入gulp watch即可開啟監聽，就算程式出問題也不會跳掉重開，瞬間變得好方便

$ gulp watch

那麼gulp 4的更新就到這，2年過去了，謝謝還繼續在這邊回鍋觀看的米粉們，米粒愛你們唷~

PowerShell腳本權限更新

時間走到2023年，米粒的電腦又更新了🤣

這次發現，欸~~~~怎麼所有的指令都不能裝了咧?

研究後才發現原來是PowerShell權限的問題呀!!

當您發現所有的安裝指令都無法輸入時，請更新您的腳本權限PowerShell!

PowerShell有幾個執行原則，分別為AllSigned、Bypass、Default、RemoteSigned、Restricted、Undefined、Unrestricted

詳細介紹可以去Microsoft網站的關於執行原則觀看

▼1.打開PowerShell

點擊畫面下方的「開始」或「搜尋」輸入PowerShell，以「系統管理員的身分執行」

▼2.確認當前權限

開啟PowerShell視窗後請輸入以下指令

Get-ExecutionPolicy

此處應該會顯示Restricted

▼3.修改權限

此時繼續輸入修改權限的指令後，系統會詢問「執行原則有助於防範您不信任的指令碼。如果變更執行原則，可能會使您接觸到 about_Execution_Policies 說明主題中所述的安全性風險。您要變更執行原則嗎?」

此時輸入Y即可完成權限變更。

Set-ExecutionPolicy RemoteSigned

看到這個畫面，我們就可以回去Visual Studio Code繼續安裝流程囉!點我回到STEP 1 : 設定環境

推薦的套件

這邊推薦幾個米粒比較會用到的套件給大家～

1.Sass

寫sass語法必備套件

2.CSS Peek

對著程式碼中的class或id按右鍵選擇『移至定義Go to Definition』可以直接跳到該class或id的定義css

3.HTML Boilerplate

不必手動寫入新的HTML的開頭及標籤，只要在空白文件中輸入html，按Tab鍵即可生成乾淨的文檔結構。

4.Path Intellisense

路徑自動提示，打出src=””後會自動出現後續路徑可供選擇。

5.IntelliSense for CSS class names in HTML

在html中輸入class的時候會出現關聯搜尋，對於有很多類似class name的文件來說很好用

6.Autoprefixer

針對CSS、Less、SCSS的語法瀏覽器前綴字自動補全

常用快捷鍵&快捷鍵小貼士

為了更快速的coding，米粒總是使用快捷鍵快速鍵入程式，不但減少coding的時間，最重要的是看起來好像很專業(欸!)

米粒常用的快捷鍵有以下6種~(以windows為例)

• Shift + Alt + F 程式碼自動格式化對齊
• Shift + Alt + 滑鼠左鍵多行編輯
• Ctrl + ` 切換整合式終端機
• Shift + Alt + ↑ / ↓ 快速上/下複製整行程式碼
• Ctrl + G 跳轉到行…
• Ctrl + / 切換(新增/刪除)行註釋

米粒也整理出一份中英文對照版本的windows/macOS快捷鍵小抄給大家看囉~❤❤

想下載回去列印的也可以點這邊download唷~

🤜點我下載windows/macOS快捷鍵小抄🤛

安裝參考資料

• 用Visual Studio Code開發node.js
• [CSS] VS CODE 上使用 SASS SCSS 以及自動編譯
• Visual Studio Code寫SCSS，並自動編譯為CSS
• 利用gulp和browser-sync實現Pug(jade)的即時預覽

網友分享

小克的 Visual Studio Code 必裝擴充功能（Extensions）私藏推薦

👉其它前端筆記 延伸閱讀 【前端筆記】Facebook分享對話框自帶#Hashtag