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,一经查实,立即删除!

相关文章

ubantu获取信息_Ubuntu 下查看CPU 信息命令

查看当前操作系统内核信息uname -aLinux redcat 2.6.31-20-generic #58-Ubuntu SMP Fri Mar 12 05:23:09 UTC 2010 i686 GNU/Linux查看当前操作系统发行版信息cat /etc/issueUbuntu 9.10 /n /l查看cpu型号cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c2 Intel(R) Cor…

为什么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…

httphost设置socks_socks5代理使用和安装配置

Socks简介&#xff1a;详情可以百度&#xff0c;不过我猜你对那一大堆术语也会像我一样觉得无语&#xff0c;所以我觉得你可以简单理解为它可以比较完美代理http/ftp/smtp等多种协议的代理工具就行了。其中最具有典型例子的就是QQ的登录、foxmail的邮件、火狐的网页浏览都可以直…

百合数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…

reactnative 获取定位_【React Native】定位获取经纬度,当前城市等地址信息

最近做React Native时&#xff0c;需要用到城市定位的功能&#xff0c;React Native中文网的定位部分中也提供了相应的方法。主要用到的方法有&#xff1a;这里只需要获取到经纬度&#xff0c;城市等信息&#xff0c;持续监听的函数就不需要了。这里使用 getCurrentPosition 方…

linux hash 算法,识别哈希算法类型hash-identifier

识别哈希算法类型hash-identifier是一款哈希算法识别工具。通过该工具&#xff0c;用户可以识别哈希值所使用的哈希算法。确定算法后&#xff0c;就可以采用对应的工具进行xx。执行该命令如下所示&#xff1a;rootdaxueba:~# hash-identifier输出信息如下所示&#xff1a;#####…

calendar获取本周一的日期_Java Calendar 获取本周周一和周日代码

Java Calendar 获取本周周一和周日代码/*** 得到本周周一** return yyyy-MM-dd*/public static String getMondayOfThisWeek() {Calendar c Calendar.getInstance();int day_of_week c.get(Calendar.DAY_OF_WEEK) - 1;if (day_of_week 0)day_of_week 7;c.add(Calendar.DATE…

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

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

光学字符识别 android,基于Android的光学字符识别研究与实现

摘要&#xff1a;随着Android手机平台的普及和信息化进程的不断推进,利用手持设备高效地将文档信息录入已经成为一个亟需解决的问题,其关键技术光学字符识别在手机上的应用日益受到人们重视.本文所做工作正是针对这一问题而展开.本文设计的Android平台光学字符识别通过手机摄像…

适合程序员的耳机_为什么很多程序员工作时都戴耳机?

观点一&#xff1a;非诚勿扰&#xff0c;想静静。1、啥也没听&#xff0c;只是带着耳机而已。只是想告诉别人不要打扰我&#xff0c;选择性屏蔽一些讨厌的人说的话&#xff0c;不回答他。2、在听笑话或者有声小说。特别不想工作的时候会很认真地听&#xff0c;如果进入工作状态…

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

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

Android实现拍照并存储功能,Android实现拍照及图片显示效果

本文实例为大家分享了Android拍照及图片显示的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下1、功能声明当应用需要使用相机、NFC等外设时&#xff0c;需要在AndroidManifest.xml中进行声明。这样&#xff0c;当设备缺少这些外设时&#xff0c;应用商店的安装程序可…

list redis 怎样做排行_redis实现商品销量排行榜

之前练习做过一个网上商城&#xff0c;采用SSM框架实现。该项目有一个商品排行榜模块没有实现&#xff0c;决定采用springbootdubboredis实现该模块。1.新建springboot项目。本项目的springboot版本号为:org.springframework.bootspring-boot-starter-parent2.1.6.RELEASE引入d…

大学计算机基础python学多久_基于Python 的“大学计算机基础”课程教学设计

基于Python 的“大学计算机基础”课程教学设计 日期&#xff1a;2018-04-11 04:32 摘要 培养非计算机专业大学生的计算思维能力&#xff0c;在“大学计算机基础”课程教学中引入程序设计内容已成各大高校的共识&#xff0c;但选择何种程序设计语言仍然观点不一。本文针对大一新…

android设计招式之美,6 - 设计模式与Android框架设计f

本教程由麦可网录制&#xff0c;共55节&#xff0c;主要介绍的内容有设计模式与Android框架设计、Android框架与应用类别的接合卡榫(Hook)函数、 Template Method模式等&#xff0c;本站提供部分教程在线学习&#xff0c;全套教程请下载观看。完整目录如下&#xff1a;1 - 设计…

treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...

API: https://vue-treeselect.js.org/#events1.ids: 即value1.lable: 需要用到方法&#xff1a;select(node,instanceId) 和 deselect(node,instanceId)v-model"DRHA_EFaultModeTree_value":multiple"true":options"DRHA_EFaultModeTree_options"…

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

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

linux ofstream open,浅谈linux性能调优之十一:内存分配管理

linux下内存分配的管理主要通过内核参数来控制&#xff1a;1.与容量相关的内存可调参数以下参数位于 proc 文件系统的 /proc/sys/vm/ 目录中。overcommit_memory &#xff1a;规定决定是否接受超大内存请求的条件。这个参数有三个可能的值&#xff1a;* 0 — 默认设置。内核执行…