【VScode】前端实用插件推荐-子許导航-学习分享

点击蓝字关注我们

图片[3]-【VScode】前端实用插件推荐-子許导航-学习分享

简介

VSCode 全称 Visual Studio Code，是微软出的一款轻量级代码编辑器，免费、开源而且功能强大。它支持几乎所有主流的程序语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。
比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；

比起sublime，vscode颜值更高，安装配置插件更为方便；
比起atom，vscode启动速度更快，打开各种大文件不卡。
可以说，vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。
可以说，vscode是代码编辑器的首选。个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。

1、Chinese (Simplified) Language Pack for Visual Studio Code.

此中文（简体）语言包为 VS Code 提供本地化界面。安装后，直接重启vscode，界面就变成中文了。

图片[4]-【VScode】前端实用插件推荐-子許导航-学习分享

2、Live Server

在 vscode 中就可以直接启动一个本地服务，并且能监听文件变化自动刷新网页（就是保存文件，页面就自动刷新）

图片[5]-【VScode】前端实用插件推荐-子許导航-学习分享

图片[6]-【VScode】前端实用插件推荐-子許导航-学习分享

3、Visual Studio IntelliCode

微软推出的一款代码智能提示插件，和别的插件不同的是，采用的是 AI 技术，吸收了 github 上成千上万的优秀代码，还会结合你日常的编码习惯不断学习进化

4、vscode-icons 图标美化

VSCode官方出品的图标库，能让你的文件类型分类看得更清楚

图片[9]-【VScode】前端实用插件推荐-子許导航-学习分享

5、CSS Peek

使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

6、Turbo Console Log

快速添加 console.log 信息，js debug 必备

快捷键

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log

alt + shift + d 删除所有 console.log

图片[12]-【VScode】前端实用插件推荐-子許导航-学习分享

图片[13]-【VScode】前端实用插件推荐-子許导航-学习分享

图片[14]-【VScode】前端实用插件推荐-子許导航-学习分享

7、Quokka

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

8、Codelf —给变量起名的神器

图片[18]-【VScode】前端实用插件推荐-子許导航-学习分享

点个“在看”不失联

版权声明 1 本网站名称：子許博客
2 本站永久网址：https://www.axuzi.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ3176914080进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

实用工具