前端开发必备的VSCode插件
本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件,好的工具可以事半功倍。主要分为:基础通用篇,自由可选篇,框架工具篇,主题篇(按照我自己的想法分的)
基础通用篇
Chinese
vscode编辑器汉化包,安装后,在 locale.json 中添加 “locale”: “zh-cn”,即可载入中文(简体)语言包。
Auto Rename Tag
自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改。
Auto close tag
自动闭合 HTML / XML 标签,非常快速的编写 HTML 代码。
Material icon theme
VSCode文件图标,根据文件类型展示不同图标。
koroFileHeader
在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,使用简单!(可以查询一下配置)
TODO Highlight
高亮展示TODO
TODO Tree
我们经常会在代码中使用TODO来标记我们的代码,提高可读性,TODO Tree提供在VSCode 树形图标里面显示打上TODO标记的文件。
GitLens
详细的 Git 提交日志。Git 重度使用者必备,尤其是多人协作时:哪一行代码,何时、何人提交都有记录。再也不用担心背锅了!
Git History
GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作,非常方便。
JavaScript (ES6) code snippets
该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。ES6 语法智能提示及快速输入,不仅仅支持 .js,还支持.ts,.jsx,.tsx,.html,.vue。
ESLint
JavaScript 语法纠错,可以自定义配置,也可以参照官网的配置,摆正开发者的代码格书写格式。(语法配置很多正在研究中。。。)
TSlint (注意:TSLint将在2019年废弃,TSLint官方推荐使用ESLint)
Prettier
代码格式工具,和esLint不同在于,ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量,等等);而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见,代码格式统一的问题,交给Prettirer再合适不过了。和Eslint配合使用,风味更佳。
Beautify
Beautify是格式化代码的插件可美化JS、JSON、CSS、Sass、HTML(其他类型的文件不行),可在文件夹根目录下创建 .jsbeautifyrc 文件。一般用Eslint + prettier + beautify组合使用 ,Beautify格式化vue的html部分。
Stylelint
StyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。stylelint是运行工具,stylelint-config-standard是stylelint的推荐配置,stylelint-order是CSS属性排序插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)。
Better comments(代码注释高亮)
Document This
添加注释快
marketplace.visualstudio.com/items?itemN…
此插件可以统一大家的注释块,可统一生成注释文档
快捷键: ctrl+alt+dd(连续按两次d)
设置文件中还可配置:
“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
自由可选篇
Markdown All in One
这款神器可以让我们在vscode里面快乐的书写Markdown,功能强大。提供了丰富的快捷键,可边写边看,轻松转化为html或pdf文件,十分好用,强烈推荐。
(我平时主要就是用它编写边看写readme文档,预览快捷键command+shift+v)
HTML Snippets
HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了(一般适用于新手前端开发)。
open in browser
从浏览器中查看html文件,使用系统的当前默认浏览器。默认的快捷键Ctrl+1,可以自定义修改。(适用于平时写一些静态页面)
vscode-fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间(只安装koroFileHeader也可以)
Language-Stylus
对stylus的支持和格式化,如项目中没有请忽略
Live Server
如果我们是在做一个静态页排版,这个插件可以提供给我们一个本地实时预览服务器,预览会在谷歌浏览器打开。。右键“Open With Live Server”开启。
Path Intellisense
文件自动补全功能,加入此插件让我们在应用文件(例如图片)时,有智能的路径提示。
vscode-icon
让 vscode 资源树目录加上图标,必备良品!这一款是VSCode官方的图标主题包,有超过500万+下载量。与Material Icon最大的区别在于文件夹。
cssrem
px2rem
px换成rem的插件
CSS Peek
调试css样式的必备插件,鼠标放在类名,id上的时候,显示出此类型下的css样式,并可以直接跳转到css文件。
Bracket Pair ColorZer
颜色识别匹配括号
Indenticator
突出目前的缩进深度
Project Manager
如果你的公司有非常多项目,需要来回切换的话,推荐Project Manage可以让你轻松在项目直接替换,无需在导入项目文件夹打开。
Settings Sync
如果你有多台设备,或者以后不想在重新配置vscode,推荐你用Settings Sync,将vscode上传到gist,以后登录账号就可以一键完成。
project-tree
在README.md里面自动追加生成项目树状图;很好用,使用简单;
- 在项目下 Shift + Cmd + p
- 输入:Project tree
- 回车
框架工具篇
VUE
Vetur
开发Vue的童鞋必装插件之一。支持标签、属性的智能补全等等。
Vue 2 Snippets
这个插件加入了Vue2的代码块,让我们开发的过程中可以快速生成Vue2的代模版。
Angular
Angular Extension Pack
最全的全家桶之一,里面包括各种你需要的插件,基本安装它一个就可以了。
Angular Language Service(1中已包括)
超好用的从模板(html)F12一键定位变量定义位置
Angular 10 Snippets(1中已包括)
React
ES7 React/Redux/GraphQL/React-Native snippets
这个扩展为你提供了JavaScript和ES7中的React/Redux代码片段,以及VSCode的Babel插件特性。编写React的童鞋,这个插件是必备之一。
React.js code snippets
用ES6语法去开发React.js应用非常方便。
小程序
minapp-vscode
微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021021623002413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pENzE3ODIyMDIz,size_16,color_FFFFFF,t_70
NPM
NPM(NPM支持)
这个扩展支持运行包中定义的npm脚本。并根据包中定义的依赖项验证已安装的模块。最喜欢这个插件的功能就是可以自动检测依赖是否安装,还可以提示依赖的版本和具体项目地址。使用npm的童鞋必备插件之一。
npm Intellisense(NPM智能提示)
加入此插件可以让我们在编写JavaScript的时候有npm依赖包的提示。特别是引用的过程中会有丰富的提示。
常用主题篇
Dracula Theme(Dracula Official)
这款主题主调色是偏深紫色,里面代码的高亮和颜色都很细致,很适合长期看。这个主题的颜色有根据不同的语言做了适配,无论我们是在开发什么语言都非常好看。
Material Theme(Material Theme)
这款也是非常出名的主题,在非常多的IDE/编辑器都有。用习惯这个主题的可以在VSCode中安装使用。使用量也是有200多万+。
Nebula Theme(Nebula Theme)
这一款是小众主题。配色与Dracula非常相似,但是有更多的亮色,颜色的变化幅度也没有那么大,相比Dracula更为顺眼。当然这个也要看个人喜好。
Atom One Dark Theme(Atom One Dark Theme)
有一部分小伙伴特别喜欢这个主题。
One Monokai Theme(One Monokai Theme)
对长期使用SublimeText的Monokai的童鞋们,对这款主题应该感兴趣。毕竟Monokai主题陪伴了我们挺长一段时间的。(不好了要暴露年龄了
前端开发必备的VSCode插件相关推荐
- 分享 6 个 Vue3 开发必备的 VSCode 插件
今天分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用. 如果有觉得有帮助,还请点赞
- Vue2 开发必备的 VSCode 插件
10个vue2必备开发插件 Vetur:Vue.js开发插件,提供了语法高亮.错误提示.自动补全等功能. Vue 2 Snippets:Vue.js 2代码段,可以快速生成常用的Vue.js代码. E ...
- [转]前端开发必备神级资源(转载请删除括号里的内容)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
- 前端开发必备神级资源
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
- Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
- 精选!必备的VSCode插件
精选!必备的 VSCode 插件 1.Chinese Language 简体中文汉化插件,和我一样英文不好的童鞋可以安装这个插件进行汉化.这个插件重载之后还没有汉化成功的话,把编辑器关闭重新打开就行了 ...
- 前端开发必备工具-网页调试工具
前端开发必备工具-网页调试工具 在前端开发中我们经常会要调试页面,主要html.css调试和js调试,这里整理一些工具: 一.firefox网页调试插件 1.firefox插件Firebug 主要用于 ...
- 前端开发推荐的火狐插件扩展
前端开发推荐的火狐插件扩展 火狐好用的插件有很多,主要看你是做什么工作了,比如我是做网站前端的,有一些调试页面的插件就不可缺少了,如firebug.web developer等. 秀一下我收藏的火狐插 ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
最新文章
- 使用webpack、vue来开发一个todo项目
- php 输出方法,PHP输出打印方法
- ①你真的学会Java了吗?来自《卷Ⅰ》的灵魂提问
- Python实现股票数据下载工具
- tomcat下载安装及配置教程
- VGG-16网络结构
- 系统篇: ext4 文件系统
- gmail无法登陆的解决!!
- [UE4]风格化渲染
- java equal_Java equal() 和 == 详细分析
- 2003服务器开机无限重启,Windows2003 系统自动重启
- 运维派社区赞助商计划
- ACL and SCO
- html5及CSS的学习2
- 测试开发工程师mac电脑常用软件推荐
- CSS-精灵图片的使用(从一张图片中截图指定位置图标)
- 怎么解决localhost打不开
- 用过最好用的swf格式视频转换器,swf转成mp4
- 【Nest教程】Nest项目配置http和https
- 沃尔沃国产S80L 最安全的豪华车
热门文章
- 毕业论文中的“页眉页脚”设置(经验一)
- JavaScript-模块化开发(一)基础知识
- android recovery设置selinux为permissive
- mysql 宽容模式_SELinux 宽容模式(permissive) 强制模式(enforcing) 关闭(disabled) 几种模式之间的转换...
- Vue3的组合式函数
- 高效能人士的7个习惯-读书摘录和心得
- R语言时间序列代码整理
- Occlusion-Aware Cost Constructor for Light Field Depth Estimation论文阅读
- 数据结构与算法设计思路和考察点
- 重庆一人将土狗扔50公里外一星期后跑回家,狗狗这么忠心怎么舍得丢。