node js 怎么搭配vscode使用
简介
Node.js是一个帮助开发应用的JavaScript运行平台, 它快速且灵活
NPM是一个Node.js模块的包管理程序
VS Code 支持JavaScript 和TypeScript语言--以及 Node.js 及时调试, 要想运行一个Node.js应用, 你需要安装Node.js的运行时环境
操作系统: OS X 10.11.6
版本:
VS Code 1.4
node 6.2.2
code 1.4.0
tsc 1.8.10
npm 3.9.5
VS Code 提供了一个 code 命令，用来在 shell 环境下调用编辑器。使用快捷键 ⇧⌘P（或 F1） 唤起命令面板，输入以下命令即可完成安装。
mkdir Hello
cd Hello
code .
您可以直接从命令行打开文件或文件夹。这里 '.' 是指到当前文件夹，因此 VS Code将启动并打开当前文件夹。
代码提示
通过tsd或者typings这两个工具安装（两个工具的作者是同一个人，目前tsd已经废弃了）。
tsd 和 typings 用法:
tsd:
//全局安装
npm install tsd -g
typings:
//全局安装
npm install typings -g
如果你的电脑上没有安装TypeScript Compiler的话，是无法使用tsc这个指令的。要安装也很简单
npm install typescript -g
node express、lodash等的自动补全
typings install dt~node --global
typings install dt~express --global
typings install dt~lodash --global
//vscode官方文档上express的typings使用的是
typings install dt~express dt~serve-static dt~express-serve-static-core --global
其中”dt~”为使用DefinitelyTyped类型定义的意思，vscode可以识别这种定义。
配置jsconfig.json
在使用typings之前，需要在vscode里面配置一下名为jsconfig.json的文件, VS Code通过这个文件找到自动补全文件。配置方法很简单，随便选中一个js文件，vscode右下角会弹出一个绿色的小灯泡，如图所示：
创建package.json
package.json 文件就是定义了项目的各种元信息，包括项目的名称，git repo 的地址，作者等等。最重要的是，其中定义了我们项目的依赖，这样这个项目在部署时，我们就不必将 node_modules
目录也上传到服务器，服务器在拿到我们的项目时，只需要执行 npm install
，则 npm 会自动读取 package.json 中的依赖并安装在项目的 node_modules
下面，然后程序就可以在服务器上跑起来了。
npm init
如果只是测试项目或者练习用，没有仓库地址
只需在package.json里面做如下配置即可:
{
...
"private": true,
...
}
以这种方式把项目声明为私有，这样npm就不会再提示配置repository及readme了
否则会遇到这个错误
npm WARN package.json xxx@0.0.0 No repository field.
npm WARN package.json xxx@0.0.0 No README data
需要配置仓库路径
{
...
"repository": {
"type": "git",
"url": ""
},
...
}
配置完成后就可以随意安装模块了
npm install utility express lodash --save
--save 的作用，就是会在你安装依赖的同时，自动把这些依赖写入 package.json。命令执行完成之后，查看 package.json，会发现多了一个 dependencies
字段
运行
VS Code内置调试器支持调试Node.js运行时，同时也可以调试JavaScript、TypeScript以及其他JS转译语言。
点击
图标来到调试界面
单击调试视图顶部栏中的齿轮图标，并选择好调试环境，VS Code会在.vscode目录下为你生成一份launch.json。
来看launch.json
这里的program 设置的是启动文件, index.js
此时回到文件界面, 按 F5 就可以运行了
vscode插件快捷键点击是另一个软件
，希望可以帮助各位码农锋利自己的武器。
快捷键器篇
窗口文件相关快捷键
新建文件
Ctrl+N
文件之间切换贴
Ctrl+Tab
打开一个新的VS Code编辑器
Ctrl+Shift+N
关闭当前窗口
Ctrl+W
关闭当前的VS Code编辑器
Ctrl+Shift+W
切出一个新的编辑器窗口（最多3个)
Ctrl+
切换左中右3个编辑器窗口的快捷键
Ctrl+1 Ctrl+2 Ctrl+3
全屏显示
F11
放大或缩小(以编辑器左上角为基准)
Ctrl +/-
侧边栏显示或隐藏
Ctrl+B
显示 Debug
Ctrl+Shift+D
显示 Output
Ctrl+Shift+U
搬砖相关快捷键
复制
Ctrl+C
剪切
Ctrl+X
粘贴
Ctrl+V
代码行向左或向右缩进
Ctrl+[ 、 Ctrl+]
代码格式化
Shift+Alt+F
向上或向下移动一行
Alt+Up 或 Alt+Down
向上或向下复制一行
Shift+Alt+Up 或 Shift+Alt+Down
在当前行下方插入一行
Ctrl+Enter
在当前行上方插入一行
Ctrl+Shift+Enter
移动到行首
Home
移动到行尾
End
移动到文件结尾
Ctrl+End
移动到文件开头
Ctrl+Home
选择从光标到行尾的内容
Shift+End
选择从光标到行首的内容
Shift+Home
删除光标右侧的所有内容(当前行)
Ctrl+Delete
删除当前行
ctrl+shift+k
下一个匹配的也被选中
Ctrl+D
回退上一个光标操作
Ctrl+U
可能有的小伙伴会说，这快捷键也太多了吧，但是这仅仅是冰山一角。不过各位小伙伴也不要慌张，vscode同样也提供了非常人性化的自定义快捷键功能。那到底怎么自定义尼？下面奉上一张宝图，大家就一目了然了。
看到这里，可能很多小伙伴会有疑惑，为什么我的编辑器是中文的，而你的是英文尼？这就和我们接下来要说的常用插件有关了。带我慢慢道来。
插件篇
编辑器常用插件
Chinese (Simplified) Language Pack for Visual Studio Code
安装这个插件就可以把编译器原始的英文界面更改为中文界面了。
background
编码搬砖的过程，无疑是相当枯燥乏味的，但是如果加上这样的小姐姐尼？是不是一下就不枯燥了？
答案是肯定的。也很幸运的有background这个插件，安装之后会有一个默认的背景图片，如图所示：
这个时候，我们可以在修改设置中搜索background修改设置json文件，如下所示：
修改代码奉上：
{
“background.useDefault”: false,
“background.style”: {
“content”:"’’",
“pointer-events”:“none”,
“position”:“absolute”,//图片位置
“width”:“100%”,
“height”:“100%”,
“z-index”:“99999”,
“background.repeat”:“no-repeat”,
“background-size”:“100%,100%”,//图片大小
“opacity”:0.2 //透明度
},
“background.customImages”: [//此处配置自己对应的背景图
“”
],
}
Rainbow Fart
背景图片有了，那么能不能也有声音尼？我可以肯定的告诉你，可以。只需要安装Rainbow Fart这个插件，然后启动这个插件就可以在编码的过程中，出现小姐姐的声音了。启动方法如下：
在vscode软件中使用ctrl+shift+p 打开命令面板，复制Enable Rainbow Fart 后回车，右下方弹出的提示后点击open按钮，或直接访问（ ）,在弹出的页面点击授权，如下图所示：
授权成功之后，就可以愉快的编码了。
1
2
3
open in browser
在浏览器中打开页面
Live Server
以服务器的方式打开页面
搬砖常用插件
Auto Close Tag
标签自动闭合
Auto Rename Tag
开始标签和结束标签自动进行同步
Bracket Pair Colorizer
会已不同颜色和横线显示括号的范围
HTML Snippets
快速的生成html标签
JS-CSS-HTML Formatter
代码格式化
Color Info
颜色提示插件，只需要将鼠标放在颜色值上悬停，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息啦。
jQuery Code Snippets
jQuery自动提示
Path Autocomplete
路径自动补齐
ESLint
检测JS必备
Html Css Support
在标签新增class的时候会提示之前写过的class
Beautify / Beautify css/sass/scss/less
样式格式化（两个的区别还没感受出来）
Vetur
更多内容请见原文，原文转载自：
分类: 前端
标签: vscode常用插件快捷键, 前端
好文要顶 关注我 收藏该文  
忘川信使
粉丝 - 0 关注 - 0
+加关注
00
» 下一篇： 面试宝典带你走向人生巅峰
posted @ 2022-03-28 16:33 忘川信使 阅读(324) 评论(0) 编辑 收藏 举报
vscode怎么运行javascript
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服务方法：
VScode如何逐步运行调试javaScript？
nodejs 直接F5选择nodejs启动调试，网页的js直接使用Chrome自带的开发者工具（快捷键F12）调试。
调试期间F5整体运行（浏览器F8），F10单步调试，F11逐步调试（进方法内部）
如何在vscode中使用nodejs
一、使用Express创建项目[这两步都在dos 模式下执行]
1,安装全局的Express！(已安装请忽略)
npm install -g express
2,创建项目
创建项目（创建文件夹名称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
在浏览器中输入，可访问Express欢迎页面
二、使用VSCode开发Nodejs
1、VSCode打开Nodejs
code 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 // 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文件的智能提示。（我测试时无此配置也会有智能提示，不清楚什么原因）
