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

最新推荐文章于 2024-09-25 00:05:30 发布

Wjhsmart

最新推荐文章于 2024-09-25 00:05:30 发布

阅读量1w

点赞数 18

分类专栏： Vue 文章标签： vue 插件开发 VSCode

本文为博主原创文章，欢迎大家转载，转载请注明出处：

本文链接：https://blog.csdn.net/Wjhsmart/article/details/105705649

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

4、Bracket Pair Colorizer

5、Codelf

6、CSS Blocks

7、Document This

8、egg-jump-definition

9、VSCode Highlight Matching Tag

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
    }
}