环境VSCode+nodeJS
主要是自己记录学习过程,所以平台均是win,插件、框架等都是自己感兴趣的方面。
前端环境
VSCode插件(基本,后面再详写、持续更新)
界面
中文
vscode-icon 图标
让vscode资源目录加上图标、必备
HTML CSS
Path Intellisense
自动路劲补全,默认不带这个功能(新版本VSC自带,可能需要配置?)
Color Info
HTML Snippets
超级实用且初级的H5代码片段以及提示
HTML CSS Support
让HTML标签上写class智能提示当前项目所支持的样式
JS ES
JavaScript Snippet Pack
ESlint
ESlint接管原声js提示、语法纠错,可以自定制体会规则。这个比较高玩.or globally using ‘npm install -g eslint’. You need to reopen the workspace after installing eslint.
Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
调试
Debugger for Chrome
让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试、配饰稍微复杂一点
NodeJs的安装和环境变量配置
NPM 包管理工具
简介
NMP是随同NodeJS一起安装的包管理工具,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。
安装
- NodeJS中文官网下载:http://nodejs.cn/#download
- NodeJS安装成功后,会自带npm工具,npm作为了node_moduls的一个模块,同样可以通过输入 “npm -v” 来测试是否成功安装。
- 配置Node.Js环境变量:配置Node.Js的环境变量,直接添加到Path中,‘X:\XXXX\Node.Js’,此配置主要是为了node.exe,npm.cmd,如果是使用安装包安装的此步骤在安装的过程中已经完成。
- 配置package的环境变量:如果不配置全局安装包路径的话默认在 ‘C:\Users<用户>\AppData\Roaming\npm’,nodejs的缓存位置:‘C:\Users<用户>\AppData\Roaming\npm-cache’,配置package的环境变量,是为了全局的工具。
- 最好修改package的全局路径或npm缓存路径,由于npm安装工具默认会跑到C盘,因权限问题可能会遇到问题。
VSCode Debugger for Chrome 通过 Chrome 调试 JavaScript 代码
运行代码片段
用到前文RunCode插件,选中代码片段,运行
使用本地模式(非服务器)
- 用VSCode装载项目
vsc并不会新建项目,文件夹就是“项目”。然后开启调试自动会在文件夹下创建launch.hson
,这是此文件夹才变成真正的项目。
- 配置启动环境。在
launch.hson
中添加配置:
{
"name": "使用本机 Chrome 调试",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/index.html",
// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html
"runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":2333
}
直接用F5启用调试,出现选择环境,选择chrome(依赖上面安装的插件),此时默认chrome会直接启动本地localhost,这样是不行的。完成配置设置后就会发现有**“使用本机 Chrome 调试”**的选项。
4. 直接使用本机调试即可。
NodeJS 新项目(服务器模式)
创建package.json
package.json 文件就是定义了项目的各种元信息,包括项目的名称,git repo 的地址,作者等等。最重要的是,其中定义了我们项目的依赖,这样这个项目在部署时,我们就不必将 node_modules目录也上传到服务器,服务器在拿到我们的项目时,只需要执行 npm install
,则 npm 会自动读取 package.json 中的依赖并安装在项目的 node_modules下面,然后程序就可以在服务器上跑起来了。
在项目目录下执行:
npm init
创建测试服务器server.js
var http=require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('hello node.js');
}).listen(3000,'localhost',function(){
console.log('Server running at http://localhost:3000');
});
配置启动环境
运行代码server.js
(选中的代码,基于上文插件runcode)
启动调试
文章皆在于记录学习历程,故文中图片、文字有复制粘贴之处,感谢整理相关内容的人们。