vscode怎么运行javascript

JavaScript088

vscode怎么运行javascript,第1张

1、直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件)

在launch.json文件中的配置如下:

{

"version": "0.2.0",

"configurations": [{

"name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开

"type": "chrome",

"request": "launch",

"url": "${file}",

"sourceMaps": true,

"webRoot": "${workspaceRoot}"

},

{

"name": "nodeLauch", //单独调试js,即可以直接运行js

"type": "node",

"request": "launch",

"program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件

"stopOnEntry": false,

"args": [],

"cwd": "${workspaceRoot}",

"runtimeExecutable": null,

"runtimeArgs": [

"--nolazy"

],

"env": {

"NODE_ENV": "development"

},

"console": "internalConsole",

"preLaunchTask": "",

"sourceMaps": false,

"outDir": null

}

]

}

2、第二种方法 Ctrl+Shift+B 快捷键运行html文件,在Tasks.json中配置如下:

{

"version": "0.1.0",

"command": "",

"isShellCommand": false,

"args": ["${file}"],

"showOutput": "always",

"windows": {

"command": "C:/Users/shannonliang/AppData/Local/Google/Chrome/Application/chrome.exe"

},

"tasks": [{

"taskName": "webserver",

"isBuildCommand": true,

"showOutput": "always"

}]

}

3、如果第二种方法,不想每次都按这个快捷键,请参考npm配置node服务方法:

http://stackoverflow.com/questions/30039512/how-to-view-my-html-code-in-browser-with-visual-studio-code

一、使用Express创建项目[这两步都在dos 模式下执行]1,安装全局的Express!(已安装请忽略)npm install -g express2,创建项目创建项目(创建文件夹名称ExpressApp) express ExpressApp小插曲:如果你习惯了Linux下的环境,你可以在自己电脑上安装cmder(不知道是什么东西,请自行百度),这个命令行工具排版漂亮,不像微软的dos 那么枯燥!我用的是Mini版本,如果你想体验linux下的全部功能,可以下载full版本。 3,下载第三方包 (1)cmd命令行切换到项目目录cd d:\nodejs\ExpressApp(2)根据需要编辑package.json,运行如下指令安装第三方包npm install 在项目目录下node_modules可见安装好的第三方包 ExpressApp |– node_modules (3)运行项目 npm start输出如下:ExpressApp@0.0.0 start d:\Nodejs_Workspace\ExpressApp node ./bin/www 注:npm start指令会自动执行node ./bin/www在浏览器中输入http://localhost:3000,可访问Express欢迎页面二、使用VSCode开发Nodejs 1、VSCode打开Nodejscode d:\nodejs\ExpressAppcode.注:在当前项目下创建ExpressApp.bat,输入“code .”即可,下次直接此文件直接使用VSCode打开Nodejs项目2、添加智能提示VSCode打开Nodejs项目,默认是没有智能提示。 (1)使用TypeScript Definition Manager(TSD)在项目中下载所需的tsd文件,VSCode中打开时有智能 全局安装tsd(如已安装忽略) npm install -g tsd下载所需的组件提示(以下载node、express、requirejs提示为例)tsd query node --action installtsd query express --action installtsd install require 注: ①多个提示组件在query参数后可以空格分隔简写为tsd query node express –action install ②组件会项目目录下添加typings文件夹 |– typings |– node |– express |– require(2)添加js文件引用的智能提示 假如在文件引用另外一个文件common.js时,文件头添加如下 { // See https://go.microsoft.com/fwlink/?LinkId=759670 // for the documentation about the jsconfig.json format "compilerOptions": {"target": "es6","module": "commonjs","allowSyntheticDefaultImports": true }, "exclude": ["node_modules","bower_components","jspm_packages","tmp","temp" ]}(小提示,如果你引入了rquire,那么你的编辑器右下方会显示一个“灯泡”的提示,你只要点灯泡就不用自己苦逼的写这个配置文件了)此配置表示代码服从ES5标准并使用commonjs规范,发VScode下有此配置之后,可以实现在文件中对require引用js文件的智能提示。(我测试时无此配置也会有智能提示,不清楚什么原因)