vsCode 扩展，vscode扩展

来源： javaer 分享于 2019-09-11 点击 10365 次点评：136

vsCode 扩展，vscode扩展

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

1、安装 vsCode、node.js

2、全局安装 live-server

cnpm install -g live-server

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

二、Live Sass Compiler：实时监听Sass 文件
　说明文档：https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
　vscode内的设置：文件 --> 首选项 --> 设置

    "liveSassCompile.settings.formats": [
      {
        "format": "compact", ////指定编译css的样式类型，有这四种 expanded（默认）, compact, compressed or nested
        "extensionName": ".css", //指定编译完的文件后缀名，.css为普通代码，.min.css为压缩代码
        "savePath": "~/../styles/" ,//指定编译完的css文件路径
      }
    ],
    "liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions", "ff>=20" ],
    "liveSassCompile.settings.generateMap": false

备注：在sass文件夹内新建一个 **.scss 文件,右下角即出现一个【Watch 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，即可同步插件和设置。

四、px2rem 像素自动转化为rem

设置一下4个自动项：
　px2rem.rootFontSize 根目录font-size，默认：16px
　px2rem.fixedDigits rem保留小数位数，默认：6位。
　px2rem.autoRemovePrefixZero 自动移除0开头的前缀，默认：true
　px2rem.isNeedNotes 是否开启注释，默认：true

vsCode 扩展，vscode扩展