前端学习之旅-1.环境VSCode+前端环境

主要是自己记录学习过程，所以平台均是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一起安装的包管理工具，常见的使用场景有以下几种：

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
   由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。

安装

1. NodeJS中文官网下载：http://nodejs.cn/#download
2. NodeJS安装成功后，会自带npm工具，npm作为了node_moduls的一个模块，同样可以通过输入 “npm -v” 来测试是否成功安装。
3. 配置Node.Js环境变量：配置Node.Js的环境变量，直接添加到Path中，‘X:\XXXX\Node.Js’，此配置主要是为了node.exe,npm.cmd,如果是使用安装包安装的此步骤在安装的过程中已经完成。
4. 配置package的环境变量：如果不配置全局安装包路径的话默认在 ‘C:\Users<用户>\AppData\Roaming\npm’，nodejs的缓存位置：‘C:\Users<用户>\AppData\Roaming\npm-cache’，配置package的环境变量，是为了全局的工具。
5. 最好修改package的全局路径或npm缓存路径，由于npm安装工具默认会跑到C盘，因权限问题可能会遇到问题。

VSCode Debugger for Chrome 通过 Chrome 调试 JavaScript 代码

运行代码片段

用到前文RunCode插件，选中代码片段，运行

使用本地模式（非服务器）

1. 用VSCode装载项目
   vsc并不会新建项目，文件夹就是“项目”。然后开启调试自动会在文件夹下创建launch.hson，这是此文件夹才变成真正的项目。
   
2. 配置启动环境。在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）

启动调试

文章皆在于记录学习历程，故文中图片、文字有复制粘贴之处，感谢整理相关内容的人们。