原创

写代码头疼?那你肯定没用过这些 VSCode 插件

目录

一、前言

二、插件整理

1、Auto Close Tag

2、Auto Complete Tag

3、Auto Rename Tag

4、Bracket Pair Colorizer

5、Codelf

6、CSS Blocks

7、Document This

8、egg-jump-definition

9、VSCode Highlight Matching Tag

10、Indent-Rainbow

11、vscode-icons

12、vscode-pdf

13、vue

14、vue-format

15、ZZCLI Vue VSCode Snippets

16、background

17、Chinese (Simplified) Language Pack for Visual Studio Code

三、结尾


一、前言

本篇博客记录一下博主收藏的一些插件,可以大大的提升开发效率,如果你还没有安装,可以安装一下体验一下,你会发现,什么叫爽的飞起。

二、插件整理

1、Auto Close Tag

自动关闭标记:自动添加HTML/XML关闭标记,与Visual Studio IDE或Sublime Text相同。

2、Auto Complete Tag

自动完成标记:结合自动关闭标签和自动重命名标签的功能

3、Auto Rename Tag

自动重命名标记:自动重命名成对的HTML/XML标记,与Visual Studio IDE相同。

4、Bracket Pair Colorizer

括号对着色剂:大括号,小括号,花括号使用不同的颜色进行区分

5、Codelf

变量命名神器:从Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab中搜索项目以查找实际使用变量名

6、CSS Blocks

css块:css块自动完成并转到定义

7、Document This

文档注释:在TypeScript和JavaScript文件中自动生成详细的JSDoc注释

8、egg-jump-definition

函数跳转:点击函数名字,跳转到定义的函数。

9、VSCode Highlight Matching Tag

VSCode突出显示匹配标记:此扩展突出显示匹配的开始和/或结束标记。也可以选择在状态栏中显示标记的路径。尽管VSCode有一些基本的标记匹配,但它就是-basic。此扩展将尝试在任何地方匹配标记:从标记属性、字符串内部、任何文件,同时还提供大量样式设置选项,以自定义标记的突出显示方式。

官方支持的标记:HTML和JSX。其他风格(XML、Vue、Angular、PHP)应该可以工作,但没有保证。不管怎样,请随时报告他们的问题。

10、Indent-Rainbow

缩进着色:使缩进更可读的简单扩展,此扩展使文本前面的缩进着色,在每个步骤上交替使用四种不同的颜色。有些人可能会发现为Nim或Python编写代码很有帮助。

11、vscode-icons

文件图标:安装此插件不同的文件会有不同的图标展示,方便区分

12、vscode-pdf

pdf预览:安装后可使用vscode打开pdf文件预览

13、vue

vue:开发vue需要安装此插件,安装后Vue.js的语法突出显示

14、vue-format

vue格式化:格式化vue代码

15、ZZCLI Vue VSCode Snippets

ZZCLI Vue VSCode代码段:在vue中快速创建你的代码块,主要提供了大量TS的写法,让你更快更方便入手

16、background

背景图片插件:安装此插件可更换VSCode的背景图片

更换背景图片需要用到一下配置,最多支持3张背景图片

{
    "background.enabled": true,
    "background.useDefault": false,
    "background.customImages": [
    
        "file:///C:/Users/Wangchenchen/Pictures/5.jpg",
        "file:///C:/Users/Wangchenchen/Pictures/4.jpg",
        "file:///C:/Users/Wangchenchen/Pictures/2.jpg"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "100%",
        "height": "100%",
        "background-position": "center",
        "background-repeat": "no-repeat",
        "background-size": "100%,100%",
        "opacity": 0.1
    }
}

17、Chinese (Simplified) Language Pack for Visual Studio Code

中文插件:安装此插件,VSCode则可以变成中文的,菜单及配置汉化

三、结尾

大家可以根据自己的实际需求安装自己需要的插件,还有很多好用的插件等着你去发现呢。

正文到此结束
本文目录