精华内容
下载资源
问答
  • vscode代码截图插件Polacode

    千次阅读 2020-07-18 12:28:30
    今天介绍一款在vscode中对代码截图的插件——polacode, 安装插件: 选择polacode-2020 安装即可。 使用: 打开代码编辑页面,然后按"ctrl+shift+p",输入polacode、回车即可。接下来,选中代码,就会生成对应...

    今天介绍一款在vscode中对代码截图的插件——polacode,

    安装插件:

    选择polacode-2020 安装即可。

    使用:

    打开代码编辑页面,然后按"ctrl+shift+p" ,输入polacode、回车即可。接下来,选中代码,就会生成对应的截图,我们还可以设置大小、透明度、边框、颜色... 最后,点击最下方生成图片按钮。

    展开全文
  • vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
  • vscode中vue代码颜色插件

    千次阅读 2018-10-11 10:22:00
    编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了。 在VSCode ...
    vue提示插件【Vscode】
          编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受。曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了。

              在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等。比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧。



    vscode提高效率有效使用插件:

    vscode-Document This-----jsdoc注释生成。

    vscode-eCSStractor-----抽取页面的class,生成一个css文档。

    vscode-CSS Peek------class名字定义跳转。(终于拥有dw cc的这个css定义跳转功能)

    vscode-Live Server-----http服务器(相当于使用nodejs的http-server )。

    VueHelper  Vue2代码段(包括Vue2 api、vue-router2、vuex2)

    Quokka.js  可以即时显示js和ts的运行结果,想试验一些短代码的运行结果,但是又不想之后删除文件的时候可以用到

    codeRunner 可以运行C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script,等开发语言并支持局部执行

    IntelliSense for CSS class names  智能提示 css 的 class 名

    Node.js Modules Intellisense  可以在导入语句中自动完成JavaScript / TypeScript模块。

    vscode-faker   生成假数据,地址,电话,图片等等

    Regex Previewer   测试正则的插件


    转载于:https://www.cnblogs.com/fron-tend/p/9770957.html

    展开全文
  • 自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,...于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。 于是后来又接触了sublime,sublime相比...

    自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,代码提示啥方面做的也特别好,很好上手,作为小白我用了很长一段时间。
    后来浅浅学习微信小程序开发,得写wxml,Hbilder上没有wxml格式的代码提示,代码高亮等。于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。
    于是后来又接触了sublime,sublime相比vscode界面比较简洁,但是界面没有Hbuilder那般小清新,是比较炫酷的界面。sublime我也用了好长一段时间了。
    昨天我决定开始拾起我一直没好好用的觉得不好上手的vscode。

    我是个女生,我喜好偏向于浅色的主题,虽然那些深色主题看起来特别有逼格。vscode几个默认的浅色主题给我的感觉就是代码比较糊,颜色特别的浅,特别是 quiet light 这个主题写HTML时,tag标签颜色特别浅,标签名称颜色和HTML属性名称颜色都是小清新彩色,虽然颜色不同但是颜色比较相近。再加上背景颜色就很浅浅的小清新颜色,导致整体看起来特别糊,没有那种很强烈的对比感,这样代码看起来感觉糊到一起去了,这种视觉上给我的感觉特别糟糕,有种这种看着这种界面就不想码代码的感觉。于是我查阅网上各种资料决定改改代码颜色。

    好了废话说了一大堆。开始正题。
    对于vscode默认的几个浅主题,我挑选了 quiet light 这个框框为浅紫色的主题下手。

    效果图如下
    在这里插入图片描述
    File–Preference–color theme
    设置默认主题为 Quiet Light
    在这里插入图片描述
    在这里插入图片描述
    fIle–Preference–settings
    在这里插入图片描述
    点击右上角如下图所示圈起来的小图标 打开settings.json文件
    在这里插入图片描述
    接下来在settings.json文件中添加json代码:
    贴一下我添加的:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    好久没有看自己的CSDN了,今天无意留意到居然有人评论自己的博客,感觉自己被需要呀,这种感觉不错,如果自己写的东西能帮到大家太棒了,评论的小伙伴问方法名颜色怎么修改,如下请参考:
    在这里插入图片描述
    我的setting.json文件内容:

    {   
        "workbench.iconTheme": "vscode-icons",
        "files.associations": {
            "*.cjson": "jsonc",
            "*.wxss": "css",
            "*.wxs": "javascript"
        },
        "emmet.includeLanguages": {
            "wxml": "html"
        },
        "minapp-vscode.disableAutoConfig": true,
        "editor.renderIndentGuides": false,
        "window.zoomLevel": 1,
        "editor.autoClosingBrackets": "always",
        "editor.autoClosingQuotes": "always",
        "files.autoSave": "afterDelay",
        "editor.minimap.enabled": true,
        "breadcrumbs.enabled": true,
        "workbench.colorTheme": "Quiet Light",
        "editor.mouseWheelZoom": true,
    
        
        
    
        "update.enableWindowsBackgroundUpdates":true,
        "background.enabled":true,
        "background.customImages": [""],
    
        "background.style": {
            "content": "''",
            "pointer-events": "none",
            "position": "absolute",
            "z-index": "99999",
            "width": "100%",
            "height": "100%",
            "background-position": "100% 100%",
            "background-repeat": "no-repeat",
            "opacity": 0.2
        },
        "background.useFront": true,
        "background.useDefault": false,
        "git.ignoreMissingGitWarning": true,
        "editor.fontFamily": "Consolas, mononoki,'Courier New', monospace",
        "editor.renderLineHighlight": "none",
        "editor.lineHeight": 18,
        "editor.roundedSelection": false,
        "editor.fontSize": 14,
        "workbench.colorCustomizations": {
            "[Quiet Light]":{
                "editor.foreground": "#201515",
                
                
                "editor.selectionHighlightBorder": "#94767c00",
                "editor.selectionHighlightBackground": "#ff000078",
                "editorIndentGuide.activeBackground":"#81868d",
                "editorBracketMatch.background": "#ca9fdb5e",
                "editorBracketMatch.border": "#ff0000",
                "tab.activeBackground": "#ad9cd4b2",
                "textLink.foreground": "#d6561ac4",
                "descriptionForeground": "#ff0000",
                "selection.background": "#b98cd693",
                "textBlockQuote.background":"#b89a9a",
                "textSeparator.foreground": "#86c2df"
                
            },
            
            
        },
        "editor.tokenColorCustomizations": {
            "[Quiet Light]":{
                "comments": "#7e3648",
                "strings": "#519657",
                "functions": "#7e57c2",
                "keywords": "#8e1da1",
                "variables":"#e57373",
                "numbers": "#e62020",
                
                
                "textMateRules": [
                    {
                        "name": "Comment",
                        "scope":[
                            "comment" 
                        ],
                        "settings": {
                            "foreground": "#a7cca8",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition",
                        "scope": "punctuation.definition.variable.php",
                        "settings": {
                            "foreground": "#e57373"
                        }
                    },
                    {
                        "name": "String",
                        "scope":[
                            "string"
                        ],
                        "settings": {
                            "foreground": "#32a504",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML:Tags",
                        "scope":[
                            "meta.tag",
                            "punctuation.definition.tag.html",
                            "punctuation.definition.tag.begin.html",
                            "punctuation.definition.tag.end.html"
                        ],
                        "settings": {
                            "foreground": "#4b4444",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML:Tag Names",
                        "scope":"entity.name.tag",
                        "settings": {
                            "foreground": "#a617e9",
                            "fontStyle": ""
                        }
                    },
                    {
                        "name": "HTML: Attribute Names",
                        "scope": [
                            "meta.tag entity.other.attribute-name",
                            "entity.other.attribute-name.html"
                        ],
                        "settings": {
                            "fontStyle": "italic",
                            "foreground": "#f31616"
                        }
                    },
                    {
                        "name": "Operator",
                        "scope":"keyword.operator",
                        "settings": {
                            "foreground": "#e21d1d",
                            "fontStyle": ""
                        }
                    }
                    
                ]
            }
        },
        "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
        
        
    }
    
    

    小白解释不好,有什么错误的地方请大佬指出呢。
    贴上参考资料链接:
    启蒙篇
    https://www.liu.app/2018/08/29/VSCode/%E4%BF%AE%E6%94%B9VSCode%E7%9A%84%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2%E4%B8%BA%E6%8A%A4%E7%9C%BC%E7%BB%BF/
    vscode官网扩展自定义主题说明链接
    https://code.visualstudio.com/api/references/theme-color#text-colors
    下面这一篇写的很详细
    https://www.cnblogs.com/garvenc/p/vscode_customize_color_theme.html

    展开全文
  • vsCode好用的插件

    2020-07-20 20:39:10
    vsCode好用的插件 修改前标签后标签会自动更改 代码格式优化 优化前: **ctrl+T 进入命令行模式 ** 优化后 给{}添加颜色便于区分 给缩进添加颜色 LeetCode 算法练习题 代码预览到浏览器

    vsCode好用的插件

    修改前标签后标签会自动更改

    修改前标签后标签会自动更改
    代码格式优化

    在这里插入图片描述
    优化前:
    在这里插入图片描述
    ** Ctrl+Shift+P 进入命令行模式 **
    在这里插入图片描述
    优化后
    在这里插入图片描述
    给{}添加颜色便于区分
    在这里插入图片描述
    在这里插入图片描述
    给缩进添加颜色

    在这里插入图片描述
    LeetCode 算法练习题

    在这里插入图片描述
    代码预览到浏览器

    在这里插入图片描述
    css&js 代码压缩工具

    在这里插入图片描述
    使用:
    在要压缩的文件中输入:
    F1---->nimify—>

    在这里插入图片描述

    展开全文
  • VSCode超实用插件

    千次阅读 多人点赞 2021-02-22 14:11:52
    基础通用插件 Chinese vscode编辑器汉化包,安装后,在locale.json中添加"locale": "zh-cn",即可载入中文(简体)语言包。...该插件可以为你把成对的括号做颜色区分,并且提供一根连接线。方便我们审阅代码结构...
  • vscode 选择代码段高亮插件

    万次阅读 2019-10-28 10:24:28
    vscode 选择代码段高亮插件 vscode上实现vim那种任意代码多种颜色高亮 安装插件highlight-words 选中要高亮的代码,按F1 ,执行Highlight Toggle Current即可高亮当前选中文本。 ps: 还可以为此设置快捷键。 ...
  • vscode好用的插件插件

    2020-03-29 10:44:29
    cscode好用的插件 1,前端 css peek,html和css关联 prettier代码格式化 Icon Fonts:图标集 Auto Rename Tag:自动修改标签 Html Boilerplate:html模板 Color Info 颜色提示 Auto Close Tag:自动闭合标签 ...
  • VSCode for Mac插件推荐

    2020-12-07 00:14:39
    VSCode for Mac插件推荐 Dracula At Night(关键字变成粉粉的...Color Info( CSS 中需要使用的颜色块信息可以通过这个插件迅速找到) VSCode Icons(一些小图标,这样每个语言的文件都有不同的标识了) Korofileheader
  • vscode工具安装插件

    2019-12-17 11:18:37
    vetur :代码颜色插件 java Extension Packvsc:代码自动对齐
  • vscode的常用插件

    2021-04-27 10:56:49
    开发工具 vscode ...Bracket Pair Colorizer 2 为代码中的括号添加颜色 Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包 Highlight Matching Tag 突出显示匹配的开始或结束
  • vscode自定义代码注释颜色

    万次阅读 多人点赞 2019-03-26 22:34:32
      vscode 的扩展插件十分强大,在里面可以找到许多自己喜欢的插件,如:代码主题风格等。博主很喜欢 Monokai 的代码主题风格,但是也有美中不足的地方。该主题的注释是灰色的,在黑色的代码面板里面很难看清楚;...
  • vscode好用的插件

    2020-02-22 13:16:17
    众所周知,工欲善其事必先利其器,好的开发环境对于我们的开发过程来说,提高效率和体验上还是很明显的,这篇博客介绍几个自己在用的比较好用的vscode插件,如果以后用到新的好用插件,会持续更新的~ (基本的语法...
  • 前言 本人vscode中使用的插件列表,记录下。 列表 Auto Rename Tag 自动重命名成对的超文本标记语言/可扩展标记语言 background-cover 为vscode设置背景图片 Chinese (Simplified) Language Pack ...css颜色代码块...
  • vscode 前端常用插件

    2020-07-15 10:37:23
    Guides插件能够帮你在代码缩进的地方用竖线展示出索引对应的位置,而且点击代码,它还会将统一代码块范围的代码用统一颜色竖线标出 2.Auto Close Tag 插件会自动帮你补充HTML闭合标签,比如你输完的后面的尖括号后,...
  • ![图片说明](https://img-ask.csdn.net/upload/202010/14/1602656046_142813.png) 我想把VSCode代码颜色和主题换成跟IDEA的一样,怎么弄?
  • VSCode 前端常用插件

    千次阅读 2020-04-22 16:24:32
     格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则4.Bracket Pair Colorizer  给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色 5.Deb...
  • vscode 2020 最新 插件

    2020-09-26 01:54:53
    Super One Dark Theme 主题 ...Bracket Pair Colorizer 这个扩展允许匹配的括号用颜色标识 Chinese (Simplified) 中文插件 className 代码补全 Code Runner 代码一键运行,支持超过40种语言 code se
  • VSCode / 常用插件

    2020-10-16 17:54:07
    括号着色器,括号嵌套太多导致多个括号挨着时,会给他们设置不同的颜色 Chinese (Simplified) Language Pack for Visual Studio Code 中文包 ESLint 这个插件把ESLint集成到VS Code中。它是最流.
  • 语法突出显示插件,它使用VS Code的扩展名,主题和突出显示引擎。 VS Code支持的任何语言和主题(无论是内置的还是通过第三方扩展的)都可以在您的Gatsby网站上呈现。 包括操作系统暗模式支持 :crescent_moon: v3...
  • vscode前端必备插件

    2020-07-30 11:40:58
    2.Auto Close Tag 自动闭合标签 3.Auto Rename Tag 自动重命名标签 4.Bracket Pair Colorizer ...自动展示颜色 7.ESLint 代码检查,可自己配置,规范代码 8.Live Share 代码分享,可以让同伴在不拷贝你的项目的情
  • VSCode常用的插件 必备 插件 说明 Beautify 格式化各种语言的代码。ctrl + shift + p 打开控制面板,输入Beautify file, Auto Close Tag 自动添加HTML / XML关闭标签 Auto Rename Tag 自动重命名配对的...
  • Vscode前端开发插件

    2020-07-10 09:50:45
    Prettier:帮助我们格式化代码 Bracket Pair Colorizer 2:让配对的括号变成不同颜色方便我们区分 Auto Rename Tag: 跟HTML标签重命名有关 Liver Server:在本地开启服务 Live Sass Compiler:监听编译scss文件,输出css...
  • VSCode前端开发图片预览插件 Image preview 先上效果图 不仅html中可以预览 js代码里的引用也可以识别 功能 安装步骤 插件市场搜索 Image preview 点击安装 设置 ????下面是一些默认设置 // The default color ...
  • vsCode前端常用插件

    2019-09-03 23:20:53
    Auto Rename Tag 自动完成另一侧标签的同步修改 Beautify 格式化代码...Bracket Pair Colorizer 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色 Debugger for Chrome 映射vscod...
  • 因为vscode的sftp上传有问题重新安装 了vscode,发现vue代码没有颜色高亮 vscode css错误提示{ expected css(css-lcurlyexpected) 解决搜索vue安装插件 点击下图箭头处 选择vue就完美解决了
  • VSCode(入门插件

    2020-06-03 19:19:34
    鄙人不才,今年才发现这么好用的编程软件刚开始用的还不是特别的顺手,但随着插件的增多,敲起代码都丝滑了起来。废话补多少直接上插件名称,鄙人大肆收集,还不太全,对于英语,一窍不通(啊啊啊以后会补的)所以...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 224
精华内容 89
关键字:

vscode代码颜色插件