Settings Sync :同步vsCode设置、插件
首次配置,上传本机vsCode 设置、安装的插件
1、vsCode 左下角登录github账号【vscode版本>1.66】,安装Setting Sync 插件,也登录一下github账号
2、登陆Github --> settings --> Developer settings --> personal access tokens --> generate new token,输入token 描述,勾选Gist,提交 ,保存Personal access tokens【只显示一次】
3、打开vscode,Ctrl+Shift+P打开命令框,输入sync,找到update/upload settings【之前可能需要执行下Sync: Reset Extension Settings(清除Sync配置)】,输入Token,上传成功后会返回Gist ID,保存此Gist ID【 gist会保存到 settings.json 内】
win: 上传 Alt + Shift + U ; 下载:Alt + Shift + D
mac: 上传 option + shift + U ; 下载:option + shift + D
备注:不行的情况可以在C盘搜索:syncLocalSettings.json 文件,直接修改里面的 token 值;
其他机器同步vsCode设置、安装的插件
1、安装Setting Sync 插件,也登录一下github账号【如何没有出现登录界面,可以用Sync: Reset Extension Settings(清除Sync配置)】
2、打开Setting Sync 的扩展设置,设置Gist
备注:不同的 Github 账号, 只能更新配置,不能上传配置
Prettier:自动格式化代码
参看:https://juejin.cn/post/6914549928131821576
koroFileHeader : 生成文件头部注释和函数注释
1、安装 koroFileHeader 插件
2、修改 setting.json 配置
"fileheader.customMade": { // 此为文件头部注释
"Author":"your Name", // 创建人 写上自己的名字
"Date":"Do not edit", // 创建时间
"LastEditors":"your Name", // 最后一次编辑人 写上自己的名字
"LastEditTime":"Do not edit", // 最后一次编辑时间
"Description":"" // 文件描述 生成注释后在手动编辑
},
"fileheader.cursorMode": { //此为函数注释
"description":"", // 函数功能描述 生成注释后在手动编辑
"param": "", // 参数 生成注释后在手动编辑
"return": "", // 返回值 生成注释后在手动编辑
"author":"your Name" // 创建人 写上自己的名字
}
3、使用插件
文件头部注释:修改保存文件后,修改时间会自动变更
window系统:ctrl + alt + i
mac系统:ctrl + cmd + i
函数注释:将光标放在函数行或者将光标放在函数上方的空白行
window系统:ctrl + alt + t
mac系统:ctrl + cmd + t
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】的按钮
px2rem 像素自动转化为rem
设置一下4个自动项:
px2rem.rootFontSize 根目录font-size,默认:16px
px2rem.fixedDigits rem保留小数位数,默认:6位。
px2rem.autoRemovePrefixZero 自动移除0开头的前缀,默认:true
px2rem.isNeedNotes 是否开启注释,默认:true