2021-前端-VsCode插件

article/2025/10/4 5:32:26

此乃吾习前端,VsCode之插件,个人所装,喜着自拿,不足之处还望海涵,多加批评。

1.Auto Close Tag——自动闭合尾部的标签
在这里插入图片描述

2.Atuo Rename Tag——修改 html 标签

自动帮你完成头部和尾部闭合标签的同步修改

在这里插入图片描述

3.Bracket Pair Colorizer——用于颜色匹配括号

在这里插入图片描述
在这里插入图片描述

4.Chinese (Simplified)Language Pack for Visual Studio Code——汉化VsCode在这里插入图片描述

5.Code Spell Checker——代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
在这里插入图片描述
6.CodeIf——变量取名神器
在这里插入图片描述
在这里插入图片描述

7.CSS Peek——
查看 css 定义
在这里插入图片描述

8.Easy LESS——less动态样式语言,极大的提高了我们书写css样式的效率在这里插入图片描述
在这里插入图片描述

9.Error Lens —— 代码错误立即提示

有时编码过于认真,可能看不到 vscode 报出的错误,或者有时候 vscode 不能提示代码中潜在的错误。这个插件可以帮助你

在这里插入图片描述
10. ESLint

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,推荐 ESLint+vscode 来写 vue,有种飞一般的感觉。

每次保存,vscode就能标红不符合ESLint规则的地方,同时还会做一些简单的自我修正。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.gitlens —— 一款好用的vscode插件

gitlens插件可以直接在光标处显示代码编写人以及时间;方便共同开发时候git做版本控制时候的相关代码管理。

在这里插入图片描述
在这里插入图片描述

12.Guides——显示代码对齐辅助线,很好用

在这里插入图片描述
在这里插入图片描述

  1. Highlight Matching Tag —— 高亮匹配标签 在这里插入图片描述
    .-在这里插入图片描述

  2. HTML CSS Support —— CSS 类名感知
    在这里插入图片描述
    这货和下边那货不用说了,看这安装量也得装。自行体会……

15.HTML Snippets——完整的HTML代码提示,包括HTML5

在这里插入图片描述

在这里插入图片描述

16.HTMLHint——html代码检测,支持html5

在这里插入图片描述
17.Debugger for Chrome——从VS Code调试在Google Chrome中运行的JavaScript代码。
用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

在这里插入图片描述
18.Image Preview——预览图片

在这里插入图片描述
在这里插入图片描述

19.Import Cost——对引入的计算大小

在这里插入图片描述
在这里插入图片描述

20.Indent-Rainbow——用四种不同颜色交替着色文本前面的缩进
在这里插入图片描述
在这里插入图片描述

21.JavaScript(ES6) code snippets (必备)——

ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
在这里插入图片描述
22.jQuery Code Snippets——jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

在这里插入图片描述
在这里插入图片描述

23.Live Server——本地服务器
在这里插入图片描述
24.Npm Intellisense——用于在 import 语句中自动填充 npm 模块
require 时的包提示(最新版的vscode已经集成此功能)

在这里插入图片描述
25.One Dark Pro —— 主题插件(在用😎)
在这里插入图片描述
26.open in browser (必备)——vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
在这里插入图片描述
设置默认浏览器
在这里插入图片描述

27.Path Intellisense——智能路径提示

在这里插入图片描述
28.Prettier-Code formatter / Beautify —— 两个都是代码格式化插件,看自己选择

  • beautify:格式化代码工具
    美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。

在这里插入图片描述

  • Beautify-使用方法:
    在这里插入图片描述

在这里插入图片描述
29. Project Manager —— 多个项目之间快速切换

安装这个插件之后会在你的左栏中新建一个图标
在这里插入图片描述
在这里插入图片描述

30.TODO Highlight —— 代办事项高亮,配合 Todo Tree 使用
在这里插入图片描述
31. Todo Tree —— 代办事项树

在这里插入图片描述
32.Vetur (推荐)(vue必备)——
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
在这里插入图片描述
33. Vue 3 Snippets —— Vue 智能感知

在这里插入图片描述
34.Visual Studio IntelliCode —— .辅助开发
说实话,我也没看懂啥意思,但就这安装量,并且还是微软官方推出的。装上之后确实好用了。
在这里插入图片描述
35.vscode-icons
显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”
在这里插入图片描述
在这里插入图片描述

就先到这里了,后面有好玩的东西的话会更新上去,大佬多指点😁


http://chatgpt.dhexx.cn/article/Fxe9MhW6.shtml

相关文章

关于VSCode插件的安装位置

VSCode的插件地址修改_上善若泪-CSDN博客_vscode插件位置文章目录1 data文件夹2 使用--extensions-dir命令3 使用mklink命令vscode编辑器强大的地方是可以使用各种各样的插件,但是插件默认的地方是在:C盘,让一些强迫症可能会受不了,非要迁移到…

vscode 插件-常用插件

VSCode常用插件(安装步骤同汉化) 1、*Auto Close Tag (自动闭合HTML/XML标签) 2、*Auto Rename Tag (自动帮你完成尾部闭合标签的同步修改,不过有些bug) 3、*Prettier(Prettier 是目前 Web 开发中最受欢迎的代码格式化程序) 安装Prettier -Code formatter这个插件…

Vscode 插件包下载并离线安装

打开VSCode插件官网 官网链接是https://marketplace.visualstudio.com/vscode 搜索Go 在输入框中输入go,搜索,结果如下: 点击Download Extension下载 注意:有时候找不到Download Extension,可能是网速加载慢&…

VsCode插件安装及推荐

1、快捷键Ctrl P,打开插件,输入 ext install (我习惯的输入方式); 2、或者点击图片中的圈红的按钮,也可以进入插件安装商城; 3、下面开始说下我目前安装的插件(我目前是vue开发&…

VScode安装离线插件

1. 下载及安装 首先在VScode官方插件库下载自己所需要的插件:https://marketplace.visualstudio.com/vscode 下载成功之后是以**.vsix**结尾的文件 然后再VScode软件中进行导入刚下载的文件 如果提示蓝色信息则为安装成功,红色则为失败 2. 版本不兼容报…

VSCode前端必备插件

跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些…

如何写一个vscode插件

1.运行yo code创建项目 2.选择使用yarn或者npm 3.运行 官网这个例子需要我们 ctrl shirt p 调出输入框, 然后在里面输入hello w 就可以如图所示 activationEvents: 当什么情况下, 去激活这个插件 activationEvents.onCommand: 在某个命令下激活(之后会专门列出很多其他条件…

Python好用的VSCode插件

1. Better Comments 这是一个让你能更好地编写注释的工具,它能根据关键词用不同的颜色高亮代码片段。支持以下类型的高亮: 感叹号 “!” 代码警告。问号“?”代表存留疑问。TODO 代码未来将要进行的操作。param 参数 2. autoDocstring 能够自动生成函…

VScode插件(自用)

一、Material Icon Theme 图标插件 它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面。 二、 颜色主题插件Themes(代码颜色)中的 Monokai Dimmed 三、css peek 使用此插件,你可以追踪至样式表中 CSS…

2022年好用的Vscode插件

Chinese(VSCode汉化插件) 第一款推荐的插件叫Chinese 是一款VSCode汉化插件 这样,VSCode就完成了汉化 Material Theme(主题插件) 第二款插件是一个好看的主题插件Material Theme 它包含了多套不同色彩风格的主题,以及好看的图标样式。 选择不同主题可以…

VSCode 插件

文章目录 VSCode 插件 VSCode 插件 图标插件作用Auto Import在j\ts文件中,直接使用外部依赖包的变量名,此时,会自动写入导入语句Bracket Pair Colorizer2VS Code 已经内置Chinese (Simplified) (简体中文)汉化Code Spell Checker适用于代码和…

vscode常用插件总结

1、Code Spell Checker 检查单词拼写 2、Auto Rename Tag html/xml标签改变,将会成对改变~ 3、Color Highlight 颜色标记 4、vscode-icon 文件图标 5、Turbo Console Log 或者 javascript console utils 按ctrlAltL可以快速输出console.log 6、v…

vscode插件(个人正在用的)

插件目录 any-ruleAuto Close TagAuto Rename Tagbackground-coverChinese (Simplified) (简体中文) Language Pack for Visual Studio CodeDebugger for JavaError LensESLintExtension Pack for JavaImage previewIntelliCodeIntelliCode API Usage ExamplesLanguage Support…

Vue3 (Vscode插件)

前端开发的编辑器有很多种如DW,hubilder,Web Storm,sublime,vscode,等等。 Vue3 vite Ts pinia 实战 源码 全栈_哔哩哔哩_bilibili 视频教程 随着VsCode开源免费,丰富的插件,也是深受前端开发人员爱戴,在我们使…

vscode插件开发

目录 插件在 VSCode 中能做什么 1、发布应用市场 1、申请Microsoft账号 2、创建Azure DevOps组织 3、创建令牌 4、创建发布账号 5、发布应用市场 2、本地打包不发布 1、本地打包 2、导入应用商店 ​编辑 3、插件开发前的环境准备 2、项目初始化 3、运行项目 4、文件…

VSCode插件推荐

1. VSCode汉化包插件 :Chinese (Simplified) (简体中文) Language VSCode汉化包,原始默认是英文的所以我们需要下一个中文插件。 2. VSCode自动补全标签 :Auto Close Tag Auto Close Tag 对Html或Xml文件自动创建结束标签; 如在…

vscode常用插件大全

vscode常用插件大全 参考文章 https://mp.weixin.qq.com/s/1PkWPApvn5uWJl_cdzcoTA 说明 该片文章基本介绍了 vscode 常用插件 , 已经很全面 本文不做任何编辑器的比较,只是我本人日常使用 vscode 进行开发,并且比较喜欢折腾 vscode ,会到处…

最新最全 VSCODE 插件推荐(2023版)

目录 一、主题及图标 二、功能强化 三、Git 集成 四、数据库 五、编程美化 六、开发效率 七、前端开发 八、数据分析 九、修仙插件 一、主题及图标 GitHub Theme 黑白两款皮肤 Material Theme 集成了多种主题皮肤,搭配 Material Icon Theme 食用更佳…

千锋重庆web前端技术分享之前端VSCode常用插件

一、VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷。 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥。因为有些插件…

30个实用VSCode 插件,让你的开发效率倍增!

1. Image preview 通过此插件,当鼠标悬浮在图片的链接上时,可以实时预览该图片,除此之外,还可以看到图片的大小和分辨率。 2. Auto Rename Tag 使用该插件,可以在重命名一个 HTML 标签时,自动重命名 HTML…