SPFx是client-side驅動的，並且使用了一系列的開源工具用於進行SharePoint開發，SPFx依拉node和npm於爲你提供了在本地可以調試的運行環境和打包環境。gulp和webpack工具依賴於有效的node運行環境。
Visual Studio的Node.js工具
通過Visual Studio的Node.js工具，你可以使用Visual Studio作爲你開發client-side webpart和程序的首選IDE。Visual Studio的Node.js工具是免費的，開源的Visual Studio插件，它是由微軟和社區設計和開發的，就像SPFx一樣。
安裝Visual Studio工具
從Visual Studio中加載SharePoint client-side工程
通過下面幾步，你可以加載你的SharePoint client-side 工程到Visual Studio中
Yo SharePoint
首先你需要創建SharePoint client-side的工程，可以通過Yeoman SharePoint generator去創建
- 在你喜歡的路徑下創建一個新的工程文件夾
md hello-vs-webpart
- 進入到工程文件夾下面
cd hello-vs-webpart
- 使用Yeoman SharePoint Generator創建新的工程
導入工程到Visual Studio
1，在New Project彈出框中選擇Template>Other Languages>TypeScript>Node.js然後選擇From Existing Node.js Code工程模板，name可以使用SharePoint client-side 工程的名字，這裏是hello-vs-webpart，選擇你的client-side project工程的路徑，然後選擇OK
2，在工程配置的地方，選擇client-side web part工程的文件夾，然後選擇下一步繼續
3，選擇下一步繼續。
4，確認你的njsproj工程文件的保存位置，Visual Studio默認會顯示你工程文件的路徑，然後使用這個路徑來保存你Visual Studio中的工程文件(.njsproj)
瀏覽你的工程文件
現在Visual Studio就已經導入你的client-side工程了，這裏需要等一會才能通過Visual Studio查看工程了
注意：此時你將會看到npm package explorer(在工程中展開npm節點)。
修改gulpfile.js文件
打開工程目錄下面的gulpfile.js文件，把原來的變量定義標籤修從let修改成var
var gulp = require('gulp');
var build = require('@microsoft/sp-build-web');設置工程的啓動文件
要想使用Visual Studio的F5，請在工程的屬性中，修改下面的屬性值如下
- Script(startup file):node_modules\gulp\bin\gulp.js
- Script arguments：serve
Build和調試工程
現在你的client-side的工程已經設置成可以使用Visual Studio作爲IDE了，爲了在本地環境中預覽你的web part，client-side toolchain默認使用了HTTPS協議，因爲默認的證書沒有在你的本地環境中安裝，你的瀏覽器會報出錯誤信息。SPFx提供了一個開發者證書用於安裝測試你的web part。如果要安裝證書請使用如下命令：
gulp trust-dev-cert點擊F5就可以BUILD和測試你的web part了。
調試說明
JavaScript client-side 開發依賴於瀏覽器開發者工具，這些工具提供了強健的環境用於調試web 應用程序。調試client-side工程的主要工具還是瀏覽器開發工具。包含開發工具的主流瀏覽器如下：
- Chrom-Chrome developer tool
- Inertnet Explorer-IE developer tools
- Micorsoft Edge-Microsoft Edge developer tools
- Firefox-Firefox developer tools
Task runner explorer-執行其它task
SFPx包含了一系列gulp task，這些task可以簡化你的client-side solution的打包和上傳你的資源到CDN中，你可以使用如下的命令去執行他們：
gulp trust-dev-cert
gulp package-solution
gulp deploy-azure-storage- 使用Ctrl+Alt+BkSpace
- 點擊View->Other Windows>Task Runner Explorer
Task Runner Explorer是查看和運行gulp命令變得非常容易，你只選擇command然後鼠標右鍵，就可以在 彈出的上下文中執行。