vsCode 扩展

vsCode高效配置与插件

原创已于 2022-08-19 13:48:03 修改 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#插件

于 2017-10-28 14:34:15 首次发布

各类软件使用专栏收录该内容

13 篇文章

订阅专栏

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