VSCode and NoteBook for JavaScript | NodeJS

VSCode調試HTML環境配置 | Jupyter NoteBook IJavaScript 配置

VSCode調試HTML環境配置

先安裝兩個插件：Debugger for Chrome（調試） 和 ESLint（語法檢測）

而後根據提示設置一下外觀樣式（若是我沒記錯的話：win下默認是custom）重啓VSCode

 而後打開HTML文件，Coding，以後F5調試運行，選擇Chrome

在配置文件中加一段 "file": "${file}" （當前文件名+擴展名）

在HTML頁面，再按一下F5就能夠調試運行了

以後全部文件均可以直接F5調試運行了

知識擴展

PS：若是隻是打開文件運行，不須要部署到localhost，推薦一個插件：open in browser

---

服務端運行

Linux

若是想要服務端運行，能夠在對應目錄使用 Python -m的命令（Linux自帶Python）（PY2：python -m SimpleHTTPServer 8080）

配置文件稍微變一下就好了

以後直接F5運行便可

Win10

若是裝了Python，和Linux用法同樣：eg：python -m http.server 8080

 

Win下若是不想使用Python（默認未安裝），能夠使用自帶的IIS

結合IIS配置下環境便可直接調試：（配置之前說過屢次，能夠參考這個：http://www.javashuo.com/article/p-xlohhhqb-be.html）

${relativeFile} 相對於workspaceRoot的相對路徑

效果：

附錄：

配置說明：

${workspaceRoot} VS Code當前打開的文件夾

${file} 當前打開的文件

${relativeFile} 相對於workspaceRoot的相對路徑

${fileBasename} 當前打開文件的文件名

${fileDirname} 所在的文件夾，是絕對路徑

${fileExtname} 當前打開文件的拓展名，如.json

 

VSCode For Node.JS

每次F5運行的時候選一下NodeJS，或者添加一下調試的配置文件：

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啓動程序",
            "program": "${workspaceFolder}/${relativeFile}"
        }
    ]
}

eg：nodejs用法和js同樣，只是多了些服務器的一些模塊

同時運行nodejs和html怎麼辦？

{
    // 使用 IntelliSense 瞭解相關屬性。 
    // 懸停以查看現有屬性的描述。
    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/2.Node/${relativeFile}",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "啓動程序",
            "program": "${workspaceFolder}/${relativeFile}"
        }
    ]
}

配置完成後：想運行HTML就選擇谷歌瀏覽器

想運行nodejs的js文件就選擇啓動程序（如今運行JS文件的時候，F5便可自動切換成node）

擴展：另外一種方法

使用 open in browser 來打開頁面，而後配置就只配 NodeJS

Jupyter NoteBook IJavaScript 配置

開源地址： https://github.com/n-riesco/ijavascript

 

安裝很簡單：

sudo apt-get install nodejs npm

sudo npm install -g ijavascript

ijsinstall

依賴Python2.7

而後內核就多了JavaScript的了

而後就能夠和Python同樣用了