VSCode 开发前端常用插件及配置

已于 2022-09-29 16:55:29 修改
阅读量6.1k 收藏 34
点赞数
分类专栏： 开发工具 文章标签： 编辑器 vscode
于 2022-03-03 00:36:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WindSneaker/article/details/123244006
版权

1、Auto Close Tag (自动闭合 html / xml 标签)

在这里插入图片描述

2、Auto Rename Tag (自动完成另一侧标签的同步修改)

在这里插入图片描述

3、Prettier - Code formatter (配合eslint 进行代码自动修复，注意配置自己需要的规范

在这里插入图片描述

4、Better Comments (注释分类高亮)

在这里插入图片描述

5、Chinese (Simplified) Language Pack for Visual Studio Code (中文简体语言包)

在这里插入图片描述

6、Guides (代码的标签对齐线)

在这里插入图片描述

7、Highlight Matching Tag (高亮显示对应的HTML标签以及标识出对应的各种括号)

在这里插入图片描述

8、HTML Boilerplate (新文件如果是html，可以输入html，会提示设置好的html模板)

在这里插入图片描述

9、Path Intellisense (路径自动补全，比如引入一个写好的js文件，html，css都会提示)

在这里插入图片描述

10、One Dark Pro / One Monokai Theme (配一个不伤眼的主题色，可以多撸代码好几年!)

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

11、Power Mode (酷炫的敲击代码效果，让你欲罢不能，我选了敲击时屏幕不抖，给个烟花)

在这里插入图片描述

    //是否开启
    "powermode.enabled": true,
    //效果样式  "水花-particles", "烟花-fireworks", "火焰-flames", "雪花-magic", "幽灵-clippy", "激光-simple-rift", "大激光-exploding-rift"
    "powermode.presets": "particles",
    //时间间隔
    "powermode.combo.timeout": 5,
    //是否抖动
    "powermode.shake.enabled": false

12、JavaScript (ES6) code snippets ( es6 语法缩写，常用比如fre => forEach, fof => for of，nfn => const xxx = (params) => {})

在这里插入图片描述

13、JavaScript Booster (大神都在用，js写法优化提示，写的不够好，或有其它写法，有灯泡提示)

在这里插入图片描述

14、Live Server (和open in browser 的区别就是会起服务，出一个ip+端口的链接 )

在这里插入图片描述

15、Git History (查看git日志以及图表和详细信息)

在这里插入图片描述

16、ESLint (检测代码的语法格式，以便我们规范书写，避免因编译所发生的错误 )

在这里插入图片描述

17、Vetur (Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript)

在这里插入图片描述

18、Vue VSCode Snippets (生成vue代码片段)

在这里插入图片描述

VSCode 2025最新前端开发必备插件推荐汇总（提效指南）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-11 2469
VSCode 2025最新前端开发必备插件推荐（提效指南）
vscode的前端常用插件
ranweidaoke的博客
02-19 721
为 PostCSS 提供高亮、格式化、语法检查等功能，适用于 Vue、React 项目。CSS 代码规范检查工具，支持 SCSS、LESS，类似 ESLint 之于 JS。SCSS（SASS）代码智能提示，支持变量、混入（mixin）和继承等功能。结合 Prettier 使用，自动格式化 CSS 代码，提高可读性。自动同步修改 HTML/Vue 代码中的标签对，提高开发效率。自动补全 HTML 标签，减少输入错误，提高开发速度。路径自动补全，适用于导入图片、CSS、JS 文件等。
VsCode适合前端开发的部分小插件
qq_52939119的博客
03-31 1380
VsCode前端开发常用的小插件 -----相信很多小伙伴刚安装VsCode都会选择安装插件，这里我给各位小伙伴推荐一些适合前端开发的小插件 首先介绍一下界面左侧的小工具 一、首当其选的当然是汉化了(Chinese) 在扩展中搜索Chinese选择中文（简体），在右边选择安装即可，安装好后需要重启一下软件才可生效。 二、自动闭合HTML/XML标签（auto close tag） 安装步骤同上，在扩展中搜索auto就可以看到啦，选择箭头所指安装。 三、智能提示HTML标签（HTML Snippets
vscode前端开发常用插件
坚持，努力，奋斗不止
04-22 343
1. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件 2. VSCode Great Icons 设置文件图标主题 3. Auto Close Tag 自动闭合 HTML/XML 标签 4.Auto Rename Tag 自动完成另一侧标签的同步修改 5.Beautif...
Vue代码片段自动生成插件：VSCode扩展实操指南
最新发布
weixin_42186015的博客
04-27 1114
Vue.js是一个流行的开源JavaScript框架，用于构建用户界面和单页应用程序。由Evan You创建并维护，Vue以其轻量级、易上手和组件化的特点，迅速成为前端开发领域的佼佼者。Vue的核心库只关注视图层，但同时也能够通过其生态系统支持如路由、状态管理和Vue.js核心库的扩展功能，实现更复杂的应用。代码片段是一种预定义的代码结构，允许开发者快速插入常用的代码模式。在VSCode中，代码片段由一系列标签化的代码行组成，它们可以包含静态文本、占位符以及变量等元素。
VScode 前端常用配置/设置/问题
雪急飞绪博客
09-17 6238
！+ tab 快速生成html代码 shift + alt + ↓ 快速复制当前行到下一行
vscode前端开发插件
weixin_39277183的博客
08-25 290
vscode前端开发个人存储的干货（前端开发使用的插件）： 1. Auto Close Tage 自动闭合HTML/XML标签 2. Auto Rename Tag 自动重命名配对的HTML / XML标签 3. AutoFileName 文件路径提示 4. EaseServer ...
VSCode前端开发插件
weixin_45703724的博客
06-30 828
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。
便携式vscode,集成嵌入式常用插件（解压即用）
07-18
在“便携式vscode,集成嵌入式常用插件（解压即用）”的场景中，我们可以理解这是一个经过特殊配置的VSCode版本，特别适合于进行嵌入式开发工作，并且具有便携性的特点。 便携式软件通常指的是不需要安装即可使用的...
在前端记录书籍和常用工具、插件和VSCode配置.zip
10-29
前端开发者通常会参考各种书籍来夯实基础，使用工具和插件来提升开发效率，以及配置VSCode等集成开发环境(IDE)来优化编码体验。本篇内容旨在详细探讨这些资源的整合与应用。 首先，前端书籍是知识体系构建的基石。...
VSCode 开发Vue必备插件
u011174978的博客
06-02 4258
VSCode 开发Vue必备插件 1.Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着） 2.EsLint ——  检查代码是否符合规范 3.Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个） 4.Auto Close Tag —— 自动闭合HTML/XML标签 5.Auto Rename Tag ——
前端开发必备的VSCode插件
一个女胖子的博客
02-16 3931
本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件，好的工具可以事半功倍。主要分为：基础通用篇，框架工具篇，自由可选篇（按照我自己的想法分的） 基础通用篇 1. Chinese vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。 2. Auto Rename Tag 自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。 3. Auto close tag 自动闭合 HTML / XML
VSCode 前端必备插件
weixin_30782331的博客
02-22 1441
VSCode 前端必备插件 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试 { "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "launch", "name": "...
VsCode开发前端常用插件
Major_S的博客
03-18 397
VsCode开发前端常用插件VsCode开发前端常用插件VsCode开发前端常用插件 jshint:
vscode开发前端必备插件
小蜜蜂的博客
12-06 208
vscode开发前端必备插件
VsCode前端开发插件推荐
wam923259736的博客
03-01 1615
HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 新版已经支持scss文件检索 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试 jQuery Code Snippets jquery 重度...
VScode前端开发常用插件
一捆铁树枝的博客
07-03 2283
1.Auto Rename Tag 自动重命名配对的HTML / XML标记。 2.Background Phi Colors README 为背景着色 3.Chinese (Simplified) Language Pack for Visual Studio Code 此中文（简体）语言包为 VS Code 提供本地化界面。 4.CSS Peek 快速匹配CSS样式名 5.ES...
vscode设置前端vue常用插件
01-13
### 如何在 VSCode 中安装和配置 Vue 前端开发所需插件 #### 安装插件 为了提升 Vue 开发体验，可以考虑安装一系列有助于提高生产力的扩展工具。通过VS Code内置的市场搜索功能来查找并安装这些有用的插件[^1]。 对于Vue项目来说，有几款特别推荐使用的插件： - **Vetur**: 提供了针对Vue 2 和 Vue 3 的代码片段、语法高亮以及智能感知等功能，极大地提高了编码效率[^2]。 - **Auto Rename Tag**: 当修改HTML/XML标签名时会自动更新对应的闭合标签，减少了手动调整的工作量[^3]。 - **Live Server**: 可以为开发者快速启动一个本地HTTP服务器，并实现页面实时刷新预览效果。 - **vscode-icons**: 更换了资源管理器里文件夹与文件类型的图标样式，使整个IDE看起来更加美观整洁。 - **Debugger for Chrome (可选)**: 如果涉及到浏览器环境下的JavaScript调试，则此插件可以帮助映射源码断点至Chrome DevTools中以便更便捷地排查问题；不过其配置相对复杂一些[^4]。 #### 配置插件 大多数情况下，默认设置已经能够满足日常需求，但对于某些特定场景可能还是需要做一些额外定制化处理。比如`vetur`可以通过编辑工作区或用户的settings.json来自定义规则，像格式化选项等都可以在此处指定。 ```json { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier-eslint", "vetur.format.defaultFormatter.ts": "prettier-eslint" } ``` 以上JSON对象展示了如何改变 Vetur 默认采用哪种工具来进行 HTML, JavaScript 和 TypeScript 文件的格式化操作。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值