vsCode 扩展

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

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值