VS Code 常用插件总结

原创已于 2023-02-23 10:42:25 修改 · 908 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-12-05 10:56:21 首次发布

前端专栏收录该内容

38 篇文章

订阅专栏

本文推荐了一系列VSCode插件，旨在提升前端开发效率。包括语法高亮、代码格式化、注释美化等实用工具，并介绍了部分插件的具体配置。

VS Code 开发插件

总结一些开发时常用的插件

1.Vetur（支持vue语法高亮）

在这里插入图片描述

2.Auto Close Tag（自动闭合标签）

在这里插入图片描述

3.Auto Rename Tag（自动重命名标签）

在这里插入图片描述

4.Beautify（格式化代码）

在这里插入图片描述

5.Better Comments（漂亮的注释，让你的注释从此与众不同）

在这里插入图片描述

6.Chinese (Simplified) (简体中文)

在这里插入图片描述

7.Color Highlight（代码中颜色样式提示）

在这里插入图片描述

8.CSS Peek（css样式查看器，可快速查看我们的css样式）

在这里插入图片描述

9.HTML Snippets（提供html标签的代码提示）

在这里插入图片描述

10.Image preview（图片预览）

11.indent-rainbow（彩虹缩进）

在这里插入图片描述

12.JavaScript (ES6) code snippets（ES6语法智能提示）

在这里插入图片描述

13.Live Server（本地服务器）

在这里插入图片描述

14.Path Intellisense （自动提示文件路径，支持快速引入文件）

在这里插入图片描述

15.vue init biaov（vue文件初始化）

在这里插入图片描述

16.Vue Language Features (Volar)（vue语言功能）

在这里插入图片描述

17.open in browser（快速打开html文件到浏览器预览）

在这里插入图片描述

18.vscode-icons（美化文件目录）

在这里插入图片描述

20.Settings Sync（插件同步）

21.koroFileHeader（头部注释、函数注释）

在这里插入图片描述
插件配置如下:

"fileheader.configObj": {
    "autoAdd": false, // 默认开启
    "autoAddLine": 100, // 默认文件超过100行就不再自动添加头部注释
    "wideSame": false, // 设置为true开启
    "wideNum": 13, // 字段长度 默认为13
    "headInsertLine": {
        "php": 2, // php后缀的文件，在第二行插入文件头部注释
        "*": 3, // 所有文件都在第3行插入注释(除了php)
    }
},
"fileheader.cursorMode":{
    "Author": "zwt",
    "Date": "Do not edit",
    "param": "",
    "return": "",
    "Description": ""
},