VScode前端常用插件

最新推荐文章于 2024-06-06 16:19:27 发布
最新推荐文章于 2024-06-06 16:19:27 发布
阅读量5k 收藏 34
点赞数 5
分类专栏： vscode 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44671994/article/details/120550578
版权

文章目录

VScode前端常用插件

VSCode下载

下载链接：https://code.visualstudio.com/Download
在这里插入图片描述

Windows有三种版本
User Installer：此版本安装在当前计算机帐户目录,这意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。
System Installer：此版本可以安装在非用户目录,例如C盘根目录,任何帐户都可以使用。
.zip：便携版，解压缩即可使用。

vscode默认提供的user版本，大多数人都是用的这个版本。

添加插件：

打开VScode左侧点击那个图标，在应用商店中搜索你需要的插件！
在这里插入图片描述

功能性插件

1、Chinese Simplified 输入Chinese 即可这是一个汉化补丁。

在这里插入图片描述

2、HTML CSS Support

在VScode中提示CSS相关扩展 这是写CSS代码快捷神器
在这里插入图片描述

3、JS-CSS-HTML Formatter

这个插件可以理解为：自动对齐文中不整齐的代码，ctrl+S保存就自动对齐了。
在这里插入图片描述

4、Auto Close Tag

输入开始标签后，自动添加结束标签。比如输入

，自动添加

在这里插入图片描述

5、Auto Rename Tag

修改了第一个标签，相对应的标签也会一起修改。
在这里插入图片描述

6、Bracket Pair Colorizer

括号颜色标签。最关键的作用就是让有嵌套关系的括号有颜色区分，在一定程度上利于查看
在这里插入图片描述

7、CSS Peek

这个插件厉害了，在源代码中，点一下就能够迅速找到你对应的CSS源代码。
详情点击下方链接：
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

在这里插入图片描述

8、Easy LESS

这个插件乃是学习less最佳的配方。它可以直接编译less 自动保存为css文件
在这里插入图片描述

9、JavaScript (ES6) code snippets

这个插件乃是写ES6语法的最佳神器，拥有补全ES6语法 和检查的功效。
在这里插入图片描述

10、jQuery Code Snippets

这个插件是写JQ的。
在这里插入图片描述

11、Live Server

这个插件用于在VScode中写好了Html+CSS+JavaScript中的任意一个文件，只要保存之后网页自动刷新，再也不用手动刷新了，在一定程度上简化操作。
使用方式：右击页面出现对话框，选择红色箭头处。
在这里插入图片描述
在这里插入图片描述

12、Image preview

这个插件用于什么嘞？让你左侧能看见图片，就怎么一回事。鼠标移到路径里显示图像预览.。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13、Code Spell Checker

这个插件用于什么嘞？让你检查你的单词拼写错误。会用波浪线提示。
在这里插入图片描述
在这里插入图片描述
其次这个东西对拼音是不友好的，拼音都是错的，那么怎么办呢？在这个词上面右键会出现这几个选项。选择红色箭头处，然后按回车即可！
在这里插入图片描述
在这里插入图片描述

14、Beautify

格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则

15、Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。

16、Debugger for Chrome

映射vscode上的断点到chrome上，方便调试

17、Courier New

一款好看字体

18、GitLens

方便查看git日志，git重度使用者必备

19、Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

20、markdownlint

markdown语法纠错

21、Material Icon Theme

个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

22、open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。

23、Path Intellisense

自动提示文件路径，支持各种快速引入文件

24、React/Redux/react-router Snippets

React/Redux/react-router语法智能提示

25、Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

26、vscode-icon

让 vscode 资源树目录加

27、HTMLHint

html代码检测

28、Project Manager

在多个项目之前快速切换的工具

29、fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间，快捷键ctrl+alt+i在文件开头自动输入作者信息和修改信息等内容

30、filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
　　在这里插入图片描述

31、quokka

一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用

32、HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

33、Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

34、Color Info

提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

35、Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons

36、Minify

这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。使用F1 运行文件缩小器Minify

37、VueHelper

snippet代码片段

38、Vue 2 Snippets

39、Vue VSCode Snippets

VUE代码自动补全插件

40、Git History

git提交历史

41、Setting Sync

同步你得设置和插件

42、Reactjs code snippets

一个 React 自动补工具。

43、Terminal

vs code 内置的命令行插件，也比较实用。

44、npm Intellisense

用于在import语句中自动填充npm模块。

45、npm

此扩展支持运行文件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。

46、Window Colors

每个VSCode窗口都可以独特地自动着色。

47、Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：
在这里插入图片描述
点击这个按钮就可以运行你的文件了（必备）

48、Dash

查文档必备，搭配 dash（不过似乎只有 mac 版）😁
快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

49、Document This

添加注释块
在这里插入图片描述设置：

“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
快捷键： 按两次Ctrl+alt+d

50、Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。
在这里插入图片描述

51、Output Colorizer

输出提示的文字颜色有一些变化，方便获取关键信息
在这里插入图片描述
在这里插入图片描述

52、vscode-faker

生成假数据，地址，电话，图片等等
在这里插入图片描述

美化插件：

1、category:themes

这个是扩展性美化插件，只要在商店搜索这个，基本上显示出来的都是美化插件
安装以后就会在原来的地方，设置主题颜色。
美化插件个人不太喜欢，因为主题咋说呢，不如原来的看得顺眼，咋个设置嘞？
在这里插入图片描述
在这里插入图片描述

2、Power Mode

这个插件就有点骚气了！可以设置各种打代码时候的效果，就是添加一些粒子效果，颜色随着内容的颜色发生变化。
在这里插入图片描述
具体呢操作如下：
第一步：
在这里插入图片描述

第二步：
在搜索设置 搜索：code Actions on Save ，点在settingsjson中编辑
在这里插入图片描述
之后再最后一行输入：“powermode.enabled”: true 即可出现粒子效果。
“powermode.shakeIntensity”: 0 还有一定要添加这个玩意，取消抖动否则！会晕车的。
在这里插入图片描述

大哥_ZH
关注
  • 5
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vscode常用插件压缩包
07-13
这个"vscode常用插件压缩包"很可能是包含了多个为提升VSCode功能和效率而设计的扩展插件。接下来，我们将深入探讨VSCode插件系统以及一些常见的插件及其用途。 1. **代码高亮与美化**： - `Prettier`：这是一个...
vscode前端开发(html/js/css)配置(插件&快捷键&常用设置)
qq_29404373的博客
01-14 1万+
1.插件：Chinese (Simplified) Language Pack for Visual Studio Code（中文界面） 2.插件：vscode-icons(图标集，资源管理器一目了然) 3.插件：HTML CSS Support(智能提示CSS类名以及id) 4.插件：Live Server(标准HTML页面浏览器自动刷新)，修改默认的浏览器在插件的manage->extension settings->live server>custom browser-chro
html css support安装设置,jenkins的基本使用——解决html样式问题
weixin_39865440的博客
07-15 3520
一. jenkins未展示css样式的原理官方解释：https://stackoverflow.com/questions/35783964/jenkins-html-publisher-plugin-no-css-is-displayed-when-report-is-viewed-in-j简单来说，就是jenkins出于安全考虑，禁止了css和js的加载详细原因：Jenkins中配置的CSP(...
VS code上创建Vue项目详细化教程1-配置VScode与Vue
最新发布
Charles_Clark的博客
06-06 2286
VS code上创建Vue项目详细化教程1-配置VScode与Vue
前端简介--HTML与CSS
xwen1254288682的博客
05-22 4662
一. 了解前端 1. 什么是前端 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。 2. 前端开发概述 从软件分类来说: (根据使用的目的不同) 系统软件 应用软件 从软件信息存储位置的不同: ...
WebStorm前端开发神器：十大必装插件推荐
DevCorner的Pro技术博客
08-21 1万+
WebStorm是JetBrains推出的一款专业的JavaScript IDE,它提供了强大的JavaScript/TypeScript开发环境和工作流。HTML CSS Support插件可以为HTML和CSS文件提供高亮,自动完成,错误检查和格式化等功能。安装后,HTML和CSS文件会获得和JavaScript一样丰富的代码支持。ESLint插件可以实时检查JavaScript和JSX代码中的错误、风格问题和危险操作,同时也支持自动修复。Prettier插件可以自动格式化代码,保持统一的代码风格。
Css中calc, support, media各自的含义及用法
wylovely的博客
03-23 1266
1.calc calc() 函数用于动态计算长度值。 ● 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； ● 任何长度值都可以使用calc()函数进行计算； ● calc()函数支持 “+”, “-”, “*”, “/” 运算； ● calc()函数使用标准的数学运算优先级规则； css语法： calc(expression) width:calc(100% - 80px) 涉及兼容问题： calc()对大家来说，或许很陌生，不太会相信ca
vscode常用插件整理汇总
10-15
本文给大家整理汇总了17个常用的vscode装B插件,都是作者费心整理出来的,希望大家能够喜欢
VsCode常用插件(前端开发)
07-13
VsCode常用插件(前端开发)，上传备用，免费下载。
vscode插件vscode插件
12-22
3. **调试工具**：VSCode的强大调试功能也离不开插件的辅助，比如Debugger for Chrome用于前端开发时与Chrome浏览器的联动调试，Python Debugging插件则为Python开发者提供了强大的调试环境。 4. **版本控制**：Git...
便携式vscode,集成嵌入式常用插件（解压即用）
07-18
在“便携式vscode,集成嵌入式常用插件（解压即用）”的场景中，我们可以理解这是一个经过特殊配置的VSCode版本，特别适合于进行嵌入式开发工作，并且具有便携性的特点。 便携式软件通常指的是不需要安装即可使用的...
2023年超实用的27个VSCode插件推荐
热门推荐
前端达人
04-16 2万+
Visual Studio Code，或者称作VS Code，是一个广为人知且评价很高的代码编辑器，它有许多特性和扩展功能，以增强开发体验。使用VS Code的主要好处之一是它的灵活性，允许开发人员根据自己的特定需求进行自定义。此外，VS Code还非常轻便快速，适合处理大型项目或者资源有限的情况，它包含了调试工具、终端和Git集成等功能，使其成为开发人员的全能选择。不仅如此，在Visual St...
VSCode的一些技巧 (html提示css自动补全)
feifeiwuxian的专栏
03-17 1万+
1.在html代码里提示css，自动补全 安装插件 HTML CSS Support 之后在class="" 这里写的时候可以就有提示了，或者直接写.开头。 为了继续使用emmet语法，可以写完.提示css后，再ctrl + space自动补全emmet代码。 2.想要在微信小程序wxml里提示wxss 在设置里加入 "css.fileExtensions":[ "css", ...
前端开发推荐vscode安装什么插件？
SiKi学院的博客
05-15 1339
可以参考一下下面我推荐的插件，注意：插件的目的是用于提高开发的效率，节约开发的时间，像类似检查一些bug、拼写错误等这些可以使用插件快速的识别，避免在查找错误上浪费过多的时间，但切记不要过度依赖一些插件到最后反而使我们代码的能力水平下降，这样就适得其反了~~~，直接进入正题=>
【JavaWeb】前端基础(HTML+CSS+JavaScript)
qq_44544908的博客
03-31 2450
Web标准也称为网页标准，由一系列的标准组成，大部分由W3C ( World wide web Consortium，万维网联盟）负责制定。HTML：负责网页的结构（页面元素和内容)。CSS：负责网页的表现（页面元素的外观、位置等页面样式，如:颜色、大小等)。JavaScript：负责网页的行为（交互效果)。HTML ( HyperText Markup Language) ：超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
html css support安装设置,css - HTML tabs support - Stack Overflow
weixin_31110189的博客
07-15 1114
Here's a website I'm making, when I select tab 4 (POKEMON#4) it does not deselect the previous tab and when I select a new tab tab 4 (POKEMON#4) does not deselect but the tab I selected initially does...
30个最佳VS Code扩展：提升编码效率和体验
WPHunter的编程技术资料库！
01-06 1958
​ 无论您是JavaScript爱好者、Python大师，还是使用流行技术栈的开发人员，每个人都能找到适合自己的扩展。在这篇文章中，我们将对VS Code扩展进行探索和归纳，以帮助提高您的工作效率。
html css support安装设置,Support — CSS HTML Validator for Windows
weixin_35426348的博客
06-10 3222
Need Your Registration Key?Online DocumentationLicense AgreementsIntegration SupportForum VIP CodeThe VIP code you'll need to register for a forum account (if you don't already have one) is 73205.CSS ...
vs code html5中引用css,VS Code中6个令人惊叹的CSS扩展
weixin_39538607的博客
06-18 906
前言Visual Studio Code最令人印象深刻的部分之一是可定制性，尤其是通过扩展。随着大量开发人员创建扩展，功能实际上是无穷无尽的！作为一名程序猿，或多或少都会码一点点CSS，不管是简单的css颜色、字体设置，还是高级的css动画等。现在就为大家推荐一下VS Code中用于编写CSS的一些最佳扩展，让你编写CSS时更得心应手。1、HTML CSS Support2、Intellisens...
vscode 前端常用必备插件汇总。
07-27
对于前端开发，VS Code 是一个非常流行的编辑器，有许多常用的插件可以提高开发效率。以下是一些前端常用的必备插件： 1. ESLint：用于代码风格检查和自动修复，帮助保持代码质量。 2. Prettier：用于代码格式化，可以根据预设的规则自动格式化代码。 3. HTML CSS Support：提供 HTML 和 CSS 的智能提示和代码片段。 4. Auto Rename Tag：自动重命名 HTML 或 XML 标签的闭合标签。 5. Bracket Pair Colorizer：为代码中的括号提供颜色标识，方便查看代码结构。 6. Path Intellisense：路径自动补全插件，方便引入文件和库。 7. GitLens：增强了 Git 功能，可以在编辑器中显示 Git 信息和注释。 8. Live Server：提供一个本地开发服务器，实时预览前端页面效果。 9. Debugger for Chrome：在 VS Code 中调试 JavaScript 和 TypeScript 代码。 10. IntelliSense for CSS class names：CSS 类名的智能提示和补全功能。 这只是一些常用的插件，根据个人需求和项目特点，还可以安装其他插件来增强开发体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值