chrome vue插件_VS Code 前端常用插件推荐

c5896681a63acbc256111002f1dfdbee.png

⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。

6923e0c7e0757c7b5292262ae54eaff6.png

 Ξ.当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。

761fd35b5dd4418c0e1555af1fe476b2.png

2.  前端常用插件  (ps: 必备 > 推荐 > 了解)

       必备的一定要装, 推荐的看自己需要, 了解的可不装 !!!(个人建议)

1.Auto Close Tag (必备)

  自动闭合HTML/XML标签

22231bde1c516450cfca30986b6aefd8.png

2.Auto Rename Tag (必备)

  自动完成另一侧标签的同步修改

a42df1feedd5e03cc19ada6d549ac938.png

3.Beautify (必备)

      格式化 html ,js,css

e91ae7353103b95406fc7384800c20c2.png

另一款  Prettier

     格式化JavaScript / TypeScript / CSS 

aba7de471326926f129ef511a8fc6f35.png

4.Bracket Pair Colorizer (必备)

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

5fd80925a628ad7de8bc9e7fb93bc5ab.png

5.Debugger for Chrome (推荐)

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

84e263597e6b69ad49567746c28077e5.png

6.ESLint (推荐)

  js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。

a66dba366c5c97fffbbdeb09c3bac3dd.png

7.GitLens(使用git的必备)

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

ff0cdf485b0a9fd946dd8e92a1d863bb.png

8.HTML CSS Support (必备)

  智能提示CSS类名以及id 

6a3add75b159fc88b298c6d7a5635e1e.png

9.HTML Snippets (必备)

  智能提示HTML标签,以及标签含义

3f128cab449ce950278eaa6ec86f3b2b.png

10.JavaScript(ES6) code snippets (必备)

  ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

c3988e693fe02b93acbeb4bb96232a7f.png

11.jQuery Code Snippets (推荐)

  jQuery代码智能提示

4281ee92ad3306cc1a8bf24b1c041164.png

12.Markdown Preview Enhanced (推荐)

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

4e5aeebac50dc5cf1d17580dd087c2d4.png

13.markdownlint (推荐)

  markdown语法纠错

186846c0a3a1d48dbca9b9c1cfef0d71.png

14.Material Icon Theme (推荐)

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

50d1c6153b23c6733591a114085a1388.png

       极简主义是不需要的

另一套 目录树图标主题 vscode-icons 

0b1063281cdbacb94ecd58ced43e505c.png

使用方法,配置如下json

c60ead66c34c7411cdefe0164bc6691f.png

15.open in browser (必备)

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

设置默认浏览器 

2293661f8c6f7d16589805891346a297.png

16.Path Intellisense (必备)

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

ad4bf3a1fa2a957c7ebbad6129f66798.png

17.React/Redux/react-router Snippets (推荐)(react必备)

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

补充两个

1) React-Native/React/Redux snippets for es6/es7

react代码片段,下载人数超多

2) react-beautify

格式化 javascript, JSX, typescript, TSX 文件

18.Vetur (推荐)(vue必备)

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

72fdb93574af24e23f30a774c9cfc0b2.png

补充 两个: 

1) VueHelper

vue代码片段

2) Vue TypeScript Snippets

vue的 typescript 代码片段

3) Vue 2 Snippets

vue 2代码片段

 19.Dracula Official (推荐)

  很好看的一款主题风格

50cfa56312ee8707ae518466cfa47410.png

这样的

755fb22889b6776f54f84a21e3f20596.png

20.filesize (了解)

  查看文件大小

5087257049256b5bff3c1a0d7f59e01f.png

5961b8ab60f8ff4b6f0632a5becb0ce3.png

21.HTMLHint(了解)

   静态检查规则

083f01e38e983a7735225762e3760d90.png

22. Class autocomplete for HTML (推荐)

     智能提示HTML class =“”属性(必备)

5ce0a58b3ff89b12567d69dbdb041d25.png

23. IntelliSense for CSS class names (推荐)

     智能提示 css 的 class 名

befc0b6dd57d3c83978eab456deaebc8.png

24.  Npm Intellisense(node必备)

     require 时的包提示

2b62a2c84b45a60d2f1935d9d5252966.png

相关推荐:

VS Code 使用指南-小白篇 2020-08-05

715299df110e929b14f8cb068792fbe5.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/502069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么c语言读文件少内容,这个程序为什么在读文件时候读不全数据?

已结贴√问题点数:10 回复次数:7这个程序为什么在读文件时候读不全数据?txt(数据):4700.7100 -16.801 73.331 115.494 37.617 11414.634 1.009 8.802 9.738 9.444 15.011 10.455 20.906 …

@mapperscan注解_Spring的@Import注解详解

首先看下Import的javadoc文档&#xff1a;Provides functionality equivalent to the <import/> element in Spring XML. Allows for importing Configuration classes, ImportSelector and ImportBeanDefinitionRegistrar implementations, as well as regular componen…

百合数c语言360问答,《百合花》

满意答案fadess1d2013.02.26采纳率&#xff1a;51% 等级&#xff1a;12已帮助&#xff1a;7212人作者茹志娟&#xff0c;于1958年3月在《延安》上面发表。这篇小说具有清新俊逸的艺术风格。是她前期的代表作。她写这篇小说时&#xff0c;中那个是反右斗争扩大化&#xff0c;…

python 实现显著性检测_使用python轻松实现高大上的YOLOV4对象检测算法

YOLO系列对象检测算法&#xff0c;算是人工智能技术领域的一匹黑马&#xff0c;当开发者宣布不再为YOLO系列检测算法更新时&#xff0c;很多开发者瞬间失去了”精神食粮“。突然&#xff0c;当YOLOV4检测算法发布的时候&#xff0c;让很多开发者喜出望外。YOLOV4对象检测YOLOV4…

android source镜像源_【转载】Celadon快速上路指南Part2:编译Celadon镜像

Celadon快速上路指南Part2&#xff1a;编译Celadon镜像From: 孙晓璐 AndroidIA Celadon 9/20一目了然 | Celadon 新手上路快速通道隆重揭晓 | 打开Celadon 的正确姿势上一期我们向您介绍了如何安装Celadon预编译镜像&#xff08;Celadon快速上路指南 Part1&#xff1a;安装Cela…

python中os模块_Python的武器库11:os模块

说到编程语言python&#xff0c;有一个著名的格言"余生太短&#xff0c;只用python"。如果要分析为什么会存在这么一句格言&#xff1f;python的语法并不简单&#xff0c;有复杂难懂的部分&#xff0c;之所以有这样一句格言&#xff0c;是因为python中有很多强大的模…

java 同步锁_死磕 java同步系列之自己动手写一个锁Lock

问题&#xff08;1&#xff09;自己动手写一个锁需要哪些知识&#xff1f;&#xff08;2&#xff09;自己动手写一个锁到底有多简单&#xff1f;&#xff08;3&#xff09;自己能不能写出来一个完美的锁&#xff1f;简介本篇文章的目标一是自己动手写一个锁&#xff0c;这个锁的…

android里canvas视频帧,移动端用canvas截取视频封面,如何不截取第一帧,而是截取其它的帧?...

我在微信开发工具里截的图是可以的&#xff0c;但是在手机上截的图缺变成全透明的了。我猜是视频的第一帧的问题微信开发工具的截图手机的截图我的代码&#xff1a;JS&#xff1a;function captureImage(video) {var scale1var canvas document.createElement("canvas&qu…

python画正方形内切圆_python画出三角形外接圆和内切圆的方法

刚看了《最强大脑》中英对决&#xff0c;其中难度最大的项目需要选手先脑补泰森多边形&#xff0c;再找出完全相同的两个泰森多边形。在惊呆且感叹自身头脑愚笨的同时&#xff0c;不免手痒想要借助电脑弄个图出来看看&#xff0c;闲来无事吹吹牛也是极好的。 今天先来画画外接圆…

查看地区的ip段_「教程」CloudFlare 自选 IP优化网站速度

前言CloudFlare 官网虽然不提供 CNAME / AAAA / A 记录接入 CloudFlare 的 CDN &#xff0c;但是我们可以通过 CloudFlare Partner 免费使用 CNAME / A 记录接入 CloudFlare 。而我们正好利用 CloudFlare 使用 A 记录接入 CDN 的方式&#xff0c;自定义节点 IP &#xff0c;例如…

android手机可以设置屏幕锁定,安卓手机屏幕锁设置方法(九个点图案)

这里以三星S5368手机屏幕锁为例随着三星S5368手机系统功能愈来愈完善&#xff0c;性能愈来愈强劲&#xff0c;越来越多的三星S5368用户们都喜欢把一些重要的信息甚至隐私放在三星S5368手机里面&#xff0c;但是这就有可能会让别人看到&#xff0c;这样一来你的三星S5368里面的信…

python win10 连接hive_使用win10+python3.5+impyla 连接大数据平台hive表的步骤与问题解决...

环境硬件配置及Hadoop&#xff0c;Hive版本一、安装步骤pip install pure-saslDownloading https://pypi.tuna.tsinghua.edu.cn/packages/16/83/30eaf3765de898083 75a8358f9c15d45a3dd44ed26be991471abc0b4480b/pure_sasl-0.5.1-py2.py3-none-any.whlpip install thrift_sasl0…

python将excel表按地方拆分_Python将一个Excel拆分为多个Excel

本文实例为大家分享了Python将一个Excel拆分为多个Excel的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 原始文档如下图所示将销售部门一、二、三科分别存为三个Excel 代码如下 # -*- coding: utf-8 -*- """ Created on Mon Jul 9 20:25:31 2018 au…

华为申请注册鸿蒙商标,华为申请“鸿蒙商标”,企业注册商标有什么价值?

原标题&#xff1a;华为申请“鸿蒙商标”&#xff0c;企业注册商标有什么价值&#xff1f;国家知识产权局商标局网站显示&#xff0c;华为已申请“华为鸿蒙”商标。申请日期为2018年8月24日&#xff0c;注册公告日期为2019年5月14日&#xff0c;专用权限期是从2019年5月14日到2…

html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文

摘 要随着通信技术的发展和智能设备的普及&#xff0c;移动互联网在近两年发展迅猛&#xff0c;新兴的移动社交软件“微信”逐渐走进了手机用户的生活&#xff0c;深受全国数亿用户的欢迎。随着微信版本的不断更新&#xff0c;微信也从单纯的聊天应用逐变成媒体信息、游戏娱乐…

python后端开发学什么_零基础学Python,这是阿里Python8年开发经验写给你的学习路线图...

今天给大家分享一位前辈整理的一个Python web学习路线。这位前辈由于有编程基础&#xff0c;所以采用了自学Python的方式。学完后主要做后端开发。希望对你有所启发。 整理的一个 python web 学习路线&#xff0c;这基本就是笔者自学后做后端的学习路线。入门基础 编程语言: Py…

如何把meshlab中的圆环去掉_如何设计一座太空城?

整整半个世纪前的今天&#xff0c;1969年7月20日&#xff0c;执行阿波罗11号计划的美国宇航员阿姆斯特朗和奥尔德林登上月球。而同一年&#xff0c;伍德斯托克音乐节的舞台前聚集了几十万名追求和平与爱的青年。在神奇的1969年&#xff0c;人类文明向着更为广袤与深邃的境地突飞…

axure html 360安装扩展,win10系统360浏览器添加Axure扩展的操作方法

win10系统360浏览器添加Axure扩展的操作方法?很多win10用户在使用电脑的时候&#xff0c;会发现win10系统360浏览器添加Axure扩展的的现象&#xff0c;根据小编的调查并不是所有的朋友都知道win10系统360浏览器添加Axure扩展的的问题怎么解决&#xff0c;不会的朋友也不用担心…

电信计算机知识考试,2020中国电信考试试题——专业知识一

1、我国对独立型STP设备要求其信令链路数不得小于( )A、7000MSU/s&#xff1b;B、10000MSU/s&#xff1b;C、14000MSU/s&#xff1b;D、20000MSU/s2、GSM的多址方式为( )A、FDMA&#xff1b; B、TDMA&#xff1b; C、CDMA&#xff1b; D、FDMA-TDMA混合技术3、以下属于被叫控制…

full outer join 与full join的区别_sleep、yield、join都是干啥的? sleep与wait有啥区别?中篇[十五]...

点击上方 “ 布衣码农 ” &#xff0c;免费订阅~选择“ 设为星标 ”&#xff0c;第一时间免费获得更新~「布衣码农」用不到却又不得不学习了解的底层方法1。Object中的wait、notify、notifyAll&#xff0c;可以用于线程间的通信&#xff0c;核心原理为借助于监视器的入口集与等…