Visual Studio Code的使用心得与常用插件技巧大全总结 |
您所在的位置:网站首页 › vscode安装使用的总结感受 › Visual Studio Code的使用心得与常用插件技巧大全总结 |
🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注 以下是个人在工作学习当中使用vscode所遇见的一些常见问题和插件使用! 废话不多说直接看把!! Visual Studio Code的使用心得与常用插件技巧大全总结 1. 卸载vs code、及安装的插件和个人配置信息第一步: 卸载软件 第二步: 找到下图中文件夹的目录,然后将之删除,即可彻底清除已安装的插件个个人配置信息 第三步: 解决问题场景: 配置失误,导致vscode无法使用,如窗口缩放太大,快捷键失效。 打开如目录 例如: C:\Users\Administrator\AppData\Roaming\Code\User用记事本打开目录下的settings.json,修改里面的对应配置可以解决对应的问题,重置的话全部删除就好了! 3. vs code发光字主题与插件 SynthWave '84 - VS Code theme 在vs code插件市场里面搜索SynthWave '84基础主题包 进行安装 Custom CSS and JS Loader自定义css、JS插件在setting.json中配置synthwave84.css的文件路径 注意: 如果还有其他的配置,需要在最后一个值后需要补一个逗号! 这是JSON格式的配置写法 注意: 文件路径不一定非要在C盘,其他盘也是可以的 注意: 本地路径前面必须加 file:/// , 绝对不能删!!!! 注意: 下面的大括号并不一定复制过去,取决于有没有其他配置,如果setting.json文件是空的就全部复制过去! 例如: windows格式: { "vscode_custom_css.imports": [ "file:///C:/Users/Administrator/synthwave84.css" ] } mac格式: { "vscode_custom_css.imports": [ "file:///Users/用户名/synthwave84.css" ] } 注意: 路径是用的正斜杠 在vscode主页调出“显示所有命令菜单 windows : ctrl + shift + p 苹果mac : command + shift + P 在出来的菜单中输入: Enable custom CSS and JS 并点击,重启vscode即可。 关闭发光效果输入 : Disable custom CSS and JS 4. 取消修改synthwave主题的斜体注释打开synthwave-color-theme文件 位置: C:\Users\Administrator\.vscode\extensions\robbowen.synthwave-vscode-0.1.5\themes在synthwave-color-theme文件中, 搜索: italic 把fontStyle的值全部清空, 然后重启vscode 斜体注释就取消了! vscode怎么用浏览器打开htm页面l预览?这里大家可以通过安装open in browser插件解决! 在安装完open in browser插件后,在html代码中鼠标右键可以看到多了两个打开选择,点击选项即可打开浏览器进行预览。 Open in Default Browsers:使用默认浏览器打开 快捷键:alt+b Open in Other Browsers: 使用其他浏览器打开 快捷键:alt+shift+b 修改默认浏览器那么怎么修改默认浏览器呢? 打开setting.json配置文件, 加入open-in-browser.default配置,例如: 把默认浏览器配置为火狐浏览器,如下图: vscode其实就是一个网页程序,所以可以找到vscode中的一个文件进行修改它的背景图片,这个文件就是:workbench.desktop.main.css 这个文件的路径是在vs code安装目录,如下 例如: D:\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.css然后打开这个workbench.desktop.main.css 文件进行 背景的添加设置, 注意这个文件打开后需要格式化代码一下! 背景图可以设置全局显示背景图 也可以 局部显示背景图 局部显示背景图,如下css代码: body { background-image: url('file:///图片地址'); background-size: 20%; background-position: 100% 100%; opacity: 0.75; background-repeat: no-repeat; }如下图: 设置完成后重启vscode、效果如下图: 全局显示背景图,如下css代码: body { background-image: url('file:///图片地址'); background-size: 100%; opacity: 0.75; background-repeat: no-repeat; }设置完成后重启vscode、效果如下: 在vscode插件市场搜索: background插件、然后进行安装 如下图 安装background背景插件后重启 vscode 会看见走下角的背景图片效果, 如下: 这里background背景插件还提供了一些用户自定义的配置参数, 这些配置参数设定在setting.json文件中 如下表 nameTypeDescriptionbackground.enabledBoolean插件是否启用 If background enabled 默认truebackground.useDefaultBoolean是否使用默认图片 If use default images 默认truebackground.customImagesArray自定义图片 Your Your custom imagesbackground.styleObject自定义样式 Custom stylebackground.stylesArray每个图片的独立样式 Style of each imagebackground.useFrontBoolean前景图/背景图。 在代码上面还是下面 一般设置truebackground.loopBoolean循环模式,会重复显示图片 loop mode, may repeat your images在setting.json中配置案例: "background.customImages": [ "file:///D:/6.png" //图片地址 ], "background.style": { "content":"''", "pointer-events":"none", "position":"absolute",//图片位置 "width":"100%", "height":"100%", "z-index":"99999", "background.repeat":"no-repeat", "background-size":"25%,25%",//图片大小 "opacity":0.2 //透明度 }, "background.useFront": true, "background.useDefault": false,//是否使用默认图片如下图: 介绍: 这个插件的原理其实也就是修改workbench.desktop.main.css这个CSS文件,但是比起第一种方法 来说 使用插件去修改比手工去修改更方便一些而已 为了测试方便,首先安装这个插件之前 如果有设定前面两种方法的背景配置 就先把setting.json中的相关配置注释一下! 注意: 方法2 和 方法3 的背景设置时可以共存的!!然后再安装background-cover 插件 安装后重启! 如果你看到依旧没有效果 那说明还没有进行设置, 可以使用 ctrl + shift + P 选择 “backgroundCover - start”,然后就可以对背景图片进行选择和设置了! 效果如下: Notice 1.点击底部切换背景图按钮 / Click the bottom toggle background button 2.ctrl + shift + P > "backgroundCover - start" 3.ctrl + shift + F7 > "Random update background and restart"这个插件的作用就是快速的在vscode内部使用浏览器预览html页面效果, 在插件市场搜索Browser Preview 安装完成后,在Bar上多出一个图标,点击图标就可以在VSCode里打开浏览器了 , 默认情况下打开的是vscode的官方网站, 如果要配置到我们自己的站点目录方法如下: 打开设置,然后找到Extensions,再找到Browser Preview,找到Start Url写上你默认打开的地址就可以了。效果如下: 安装好后,需要重启一下VSCode,就可以出现透明效果了。 插件的设置: 打开设置界面,在左边找到Extensions选项卡,然后找到Windows opacity进行设置 这里边只有一个设置项,就是Opacity,也就是我们要设置的透明度,值从0-255,数值越小透明度越高,数值越大透明度越低。为我们自动查找匹配标签开始结尾,括号匹配。从此再也不用花时间再成对标签或者括号开始与结尾的查找上了, 提高了工作效率 虽然vscode也自带了 标签,括号的代码区块提示,但是个人觉得不够明显!! 所以推荐这款插件 进入插件,在搜索栏上搜索, Bracket Pair Colorizer 然后找到如果插件,直接点击Install按钮进行安装 安装后 vscode重启 效果如下: 这个插件就是可以快速生成漂亮的代码截图, 比如要在博客里放置一个漂亮的代码截图,或者是快速分享到其它网络平台 都可以使用这个截图插件 进行代码截图 非常漂亮!! 打开VSCode中的插件,搜索 Polacode,这个你可以找到多个版本,这里我推荐的是 2020版本 点击install进行安装 使用方法 安装完成后,先打开你要分享的代码,然后按Ctrl + Shift + p 打开命令面板,然后再输入框中输入Polacode,就可以打开使用了把自己想截图的代码拖拽选中后 就可以点击右边的截图按钮,生成图片了! CodeSnap 苹果代码截图插件也是一个vscode代码截图捕捉插件, 截图更加清晰, 清晰度类似于苹果电脑! 直接在插件市场搜索CodeSnap 安装后重启vscode 使用方法: 安装完成后,先打开你要分享的代码,然后按Ctrl + Shift + p 打开命令面板,然后再输入框中输入CodeSnap,就可以截图代码了!CodeSnap想更改相关配置如下可以在settings.json中添加相关配置 CodeSnap是高度可配置的, 以下是可以更改的设置列表,以调整屏幕截图的外观 配置名称值说明codesnap.backgroundColor十六进制颜色值代码段容器边缘的背景色。可以是任何有效的CSS颜色。codesnap.boxShadow默认值: rgba(0, 0, 0, 0.55) 0px 20px 68px代码段的CSS框阴影。可以是任何有效的CSS框阴影codesnap.containerPadding整数 , 默认值: 3em, 也可以使用px代码段容器边缘的填充。可以是任何有效的CSS填充codesnap.roundedCorners布尔值 默认为:true圆角配置 用于配置边缘内部代码块边缘是否是圆角或方形角codesnap.showWindowControls布尔值 默认为:true显示或隐藏OS X样式窗口按钮的布尔值。codesnap.showWindowTitle布尔值 默认为:false显示或隐藏窗口标题栏上的文件夹或文件名。codesnap.showLineNumbers布尔值 默认为:true显示或隐藏行号的布尔值codesnap.realLineNumbers布尔值 默认为:false从文件的实际行号开始的布尔值,而不是1。codesnap.transparentBackground布尔值 默认为:false用于在拍摄屏幕快照时使用透明背景。codesnap.target值: window [不显示边缘容器] container [显示边缘容器]意思就是是否要显示外部的边缘容器我的配置如下: { //codesnap代码截图配置 "codesnap.backgroundColor":"#f2f2f2", //截图代码容器边缘颜色 "codesnap.boxShadow": "5px 5px 60px 0px #888888", //阴影设置 "codesnap.containerPadding":"3em", "codesnap.roundedCorners":true, "codesnap.showWindowControls":true, "codesnap.showWindowTitle":false, "codesnap.showLineNumbers":true, "codesnap.realLineNumbers":false, "codesnap.transparentBackground":false, "codesnap.target":"container" } 11.better Comments 修改注释颜色插件在代码中 注释的颜色 默认是灰色的 ,可能你会觉得不好看 那么 就可以使用这款插件来让注释更加漂亮 Better Comments插件就可以实现注释代码高亮 点击VSCode中的插件,然后在搜索栏中输入Better Comments,然后点击install就可以安装 使用方法 其实使用就是在注释开头加上特殊的符号。 ! : 红色注释 ? : 蓝色注释 // : 灰色删除线注释 todo : 橘红色注释 * : 浅绿色注释在html,php代码中修改注释的颜色如下图: PHP注释 HTML注释 配置颜色注释 Notice: 你也可以自己定义属于自己的颜色。方法如下: 点击后打开了settings.json, 复制下面代码到settings.json,根据自己的喜好自定义了 也可以增加新的注释颜色标识符到setting.json中, 注意: 原有的配置不能删除 如果删除就没有效果了 ,只能新增注释颜色标识!! 如下: "better-comments.tags": [ { "tag": "@", //自己定义一个字符串名字 "color": "yellow", //颜色 "strikethrough": false, "backgroundColor": "transparent" }, { "tag": "!", "color": "#FF2D00", //颜色 "strikethrough": false, "backgroundColor": "transparent" }, { "tag": "?", "color": "#3498DB", //颜色 "strikethrough": false, "backgroundColor": "transparent" }, { "tag": "//", "color": "#474747", //颜色 "strikethrough": true, "backgroundColor": "transparent" }, { "tag": "todo", //颜色 "color": "#FF8C00", "strikethrough": false, "backgroundColor": "transparent" }, { "tag": "*", //颜色 "color": "#98C379", "strikethrough": false, "backgroundColor": "transparent" } ],修改完成之后一定要重启vscode! 12.koroFileHeader 文件头部注释和函数头部注释插件作用是生成文件头部注释和函数注释 , 但这个插件可以支持所有主流语言生成注释! 安装完成后可以新建一个test.js文件,就可以看到文件头部会自动生成一堆注释 ==koroFileHeader Notice 如果没有注释 ,或者 想快速生成文件头部注释: 在文件头部点击快捷键`ctrl+alt+i`(Windows) 函数注释快捷键 `ctrl+alt+t` 如果你是Mac电脑点击`ctrl+cmd+i` (Mac) 就会快速生成代码注释了!这时候你会发现不管是文件头生成的注释,还是函数头部生成的注释 都是需要在settings.json中配置的! 文件头注释自定义配置 在settings.json中配置文件头的注释如下 "fileheader.customMade": { "Author": "3#", "objectDescription" : "目前是测试项目", "Date": "Do not edit", // 文件创建时间(不变) "LastEditors": "3#", // 文件最后编辑者 "LastEditTime": "Do not edit", // 文件最后编辑时间 "FilePath": "Do not edit" ,// 增加此项配置即可 "Version": "2.0", },修改完成后,要保存,然后退出VSCode,再进来,进入文件, 输入ctrl+alt+i 就可以生成自定义文件头部注释了! 函数头注释自定义配置 在settings.json中配置文件头的注释如下 "fileheader.cursorMode": { //此为函数注释 "author":"3#", "description":"", "param": "", "return": "" }效果如下: Notice 1. 描述内容(descripition)为了便捷添加,直接设置为空; 2. 这里的日期(Date)和修改时间(LastEditTime)设置,本身软件就会自行添加和更新,所以直接写“Do not edit”即可。 3. 除日期和参数(param)外的其他内容,均可尝试设置为汉字,方便查看 13.vscode 字体推荐Consolas在windows下是一款很好看的字体 同时两款值得推荐的字体是 Source Code Pro和Fira Code, 可以在settings.json中进行配置! 也可以直接修改settings.json配置文件 添加如下配置: "editor.fontFamily": "Fira Code", //字体 "editor.fontSize": 12, //字体大小 "editor.fontWeight":"normal", //字体粗细 "editor.fontLigatures":true, //是否字体连字 14.vscode编辑markdown相关插件 Markdown Preview Enhanced 预览插件安装完成后重启vscode即可 markdown PDF这个插件可用于将markdown文档转化为 PDF、HTML、PNG等文件的插件 打开vscode插件市场搜索markdown PDF 进行安装 安装markdown PDF插件会依赖Chromium, 因此默认情况下 它会尝试下载Chromium, 并且时间会等待很长一段时间 但是 某些时候在国内,认情况下它是无法下载的,所以您得手动下载它。 其实不必非要下载 Chromium,如果您的电脑中已经安装了 Chrome 浏览器,那只需要简单配置一下路径即可。 1. 找到 Chrome 应用的路径,比如,在我的电脑上是 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"。 2. 打开 VS Code settings.json设置 、建议在用户设置下面添加 。 注意: 这一项,注意路径中是两个反斜杠。 { "markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" }配置完毕后,用 VS Code 随意打开一个 Markdown 文件,右击文本编辑区域,就可以看到 Markdown PDF 的上下文菜单了 这款插件的作用就是可以在保存的时候自动代码格式化, 直接在插件市场搜索它,并安装后重启vscode 这款插件需要进行一些配置,修改settings.json配置文件,添加如下配置信息 配置名称值说明editor.formatOnSavetrue | false保存时格式化editor.tabSizeint 默认:2tab 大小为2个空格editor.wordWrapColumnint 自定义100 列后换行breadcrumbs.enabledtrue | false开启 vscode 文件路径导航prettier.semitrue | false设置语句末尾不加分号 (有效果)prettier.singleQuotetrue | false设置强制单引号 (有效果)vetur.format.defaultFormatter.htmlprettyhtml选择 vue 文件中 template 的格式化工具editor.renderControlCharacterstrue | false显示 markdown 中英文切换时产生的特殊字符vetur.format.defaultFormatterOptions“prettier”: { “singleQuote”: true, “semi”:false }vetur 的自定义设置 16.Community Material Theme插件打开vscode插件市场搜索Community Material Theme 进行安装 然后点击图标下面的 set Color Theme按钮切换主题,如图: 使缩进更具可读性的简单扩展 打开vscode插件市场搜索indent-rainbow 直接安装即可! 插件效果如下: 它的作用就是刷算法题 可以在vscode内部进行测试! 打开vscode插件市场搜索LeetCode 进行安装 安装完成之后需要登录! 登录的时候有国际版 和 中国版 的选择 我们 这里选择的是中国版! 如下图然后输出用户名与密码就可以登录了! 登录成功后如下图所示! 就可以刷题了! 19.Material Icon Theme 文件图标插件这款插件的作用就是会让vscode的文件产生好看的文件图标 在插件市场中搜索Material Icon Theme 进行安装 后重启vscode即可 效果如下: 这个插件其实我认为没什么 多大的用处,但是 安装上玩玩倒是可以的!! 在插件市场搜索:Rainbow Fart 安装完成之后,在 VSCode 的菜单栏中找到 查看 - 命令面板,或使用快捷键 Ctrl + Shift + P(MacOS 使用 Command + Shift + P)呼出 命令面板。 在 命令面板 中输入 Enable Rainbow Fart 并回车。 此时应该会弹出一个消息通知,点击通知上的 Open 按钮。 在打开的页面上点击 授权 即可。 现在就可以在vscode中 输入代码的时候 会有语音声音了!! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |