vsCode 扩展

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

1、安装 vsCode、node.js

2、全局安装 live-server

cnpm install -g live-server

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

vsCode 扩展_第1张图片

二、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 --> 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.
备注:不行的情况可以在C盘搜索:syncLocalSettings.json 文件,直接修改里面的 token 值;
配置上传Alt + Shift + U ;配置下载:Alt + Shift + D
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

五、Chinese (Simplified) Language Pack for Visual Studio Code 汉化包

你可能感兴趣的:(各类软件使用)