live-server和easy-sass

一、live-server ： 浏览器实时刷新

1、安装 vsCode、node.js

2、全局安装 live-server

cnpm install -g live-server1

3、进入页面所在目录,执行命令：live-server

二、 Easy Sass : 编译Sass

文件 –> 首选项 –> 设置 –> 搜索 “easysass”，将easysass相关设置复制到编辑窗口根据实际情况修改

一般生产环境会用到其中两个设置项（上图红框处中的代码）：

/** Easy Sass 插件 **/ 
"easysass.formats": [ 
        { "format": "compressed", // 压缩 "extension": ".css" } 
],
 "easysass.targetDir": "./" // 自定义css输出文件路径12345

easysass.formats ：设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件

生产环境中，在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径。

三、Settings Sync 同步vsCode设置和安装插件的小工具

1、安装Setting Sync 插件
2、登陆Github –> Your profile –> settings –> Developer settings –> personal access tokens –> generate new token，输入名称，勾选Gist，提交 ,保存Github Access Token(只显示一次)
3、打开vscode，Ctrl+Shift+P打开命令框，输入sync，找到update/upload settings(之前可能需要执行下Sync: Reset Extension Settings)，输入Token，上传成功后会返回Gist ID，保存此Gist ID.
4、在其他机器上同步，Ctrl+Shift+P打开命令框，输入sync，找到Download settings，会跳转到Github的Token编辑界面，点Edit，regenerate token，保存新生成的token，在vscode命令框中输入此Token，回车，再输入之前的Gist ID，即可同步插件和设置。