1. 全栈程序员必看首页

vscode 前端常用插件推荐「建议收藏」

全栈程序员-站长 • • 未分类 • 阅读 56

1.vscode简介vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。 当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。 比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器； 比起sublime，…

大家好，又见面了，我是你们的朋友全栈君。

1.  vscode 简介

  1. vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。
  2. 当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。
  3. 比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器；
  4. 比起sublime，vscode颜值更高，安装配置插件更为方便；
  5. 比起atom，vscode启动速度更快，打开各种大文件不卡。
  6. 可以说，vscode既拥有高自由度、又拥有高性能和高颜值，最关键的是，vscode还是一款免费并且有团队持续快速更新的代码编辑器。
  7. 可以说，vscode是代码编辑器的首选。个人推荐编写前端代码时，代码编辑器选择vscode，IDE选择WebStorm。
  8. vscode安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启vscode使得插件生效。

    vscode 前端常用插件推荐「建议收藏」

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

    vscode 前端常用插件推荐「建议收藏」

 

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

       必备的一定要装, 推荐的看自己需要, 了解的可不装 !!!

　　1.Auto Close Tag (必备)

　　自动闭合HTML/XML标签

vscode 前端常用插件推荐「建议收藏」

 

 　　2.Auto Rename Tag (必备)

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

 

vscode 前端常用插件推荐「建议收藏」

　　

　　3.Beautify (必备)

      格式化 html ,js,css

　　vue 里面配置方法和快捷键配置 戳这里

 

vscode 前端常用插件推荐「建议收藏」

      另一款  Prettier

     格式化JavaScript / TypeScript / CSS 

     配置教程 戳这里

vscode 前端常用插件推荐「建议收藏」

 

　　4.Bracket Pair Colorizer (必备)

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

 

vscode 前端常用插件推荐「建议收藏」

 

　　5.Debugger for Chrome (推荐)

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

       调试方法戳这

 

vscode 前端常用插件推荐「建议收藏」

 

　　6.ESLint (推荐)

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

 

vscode 前端常用插件推荐「建议收藏」

 

　　7.GitLens(使用git的必备)

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

       使用教程

 

vscode 前端常用插件推荐「建议收藏」

 

　　8.HTML CSS Support (必备)

　　智能提示CSS类名以及id 

 

vscode 前端常用插件推荐「建议收藏」

 

　　9.HTML Snippets (必备)

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

 

vscode 前端常用插件推荐「建议收藏」

 

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

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

 vscode 前端常用插件推荐「建议收藏」

 

　　11.jQuery Code Snippets (推荐)

　　jQuery代码智能提示

 

vscode 前端常用插件推荐「建议收藏」

 

　　12.Markdown Preview Enhanced (推荐)

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

 vscode 前端常用插件推荐「建议收藏」

 

　　13.markdownlint (推荐)

　　markdown语法纠错

 vscode 前端常用插件推荐「建议收藏」

 

　　14.Material Icon Theme (推荐)

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

       极简主义是不需要的

 vscode 前端常用插件推荐「建议收藏」

 

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

vscode 前端常用插件推荐「建议收藏」

使用方法,配置如下json

vscode 前端常用插件推荐「建议收藏」

 

　　15.open in browser (必备)

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

vscode 前端常用插件推荐「建议收藏」

设置默认浏览器 

vscode 前端常用插件推荐「建议收藏」

 

　　16.Path Intellisense (必备)

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

 

vscode 前端常用插件推荐「建议收藏」

 

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

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

 

vscode 前端常用插件推荐「建议收藏」

补充两个

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开发者必备。

 

vscode 前端常用插件推荐「建议收藏」

补充 两个: 

1) VueHelper

vue代码片段

2) Vue TypeScript Snippets

vue的 typescript 代码片段

3) Vue 2 Snippets

vue 2代码片段

 

       19.Dracula Official (推荐)

　　很好看的一款主题风格

vscode 前端常用插件推荐「建议收藏」

    这样的

vscode 前端常用插件推荐「建议收藏」

       

       20.filesize (了解)

　　查看文件大小

 

vscode 前端常用插件推荐「建议收藏」

 vscode 前端常用插件推荐「建议收藏」

 

       20.HTMLHint(了解)

　　 静态检查规则 具体规则戳这

vscode 前端常用插件推荐「建议收藏」

 

     21. Class autocomplete for HTML (推荐)

     智能提示HTML class =“”属性（必备）

vscode 前端常用插件推荐「建议收藏」

 

     22. IntelliSense for CSS class names (推荐)

     智能提示 css 的 class 名

vscode 前端常用插件推荐「建议收藏」

     

     23.  Npm Intellisense(node必备)

     require 时的包提示

vscode 前端常用插件推荐「建议收藏」

 

如果还有好的插件我会随时补充 ~~~

这里有一份更详细的清单,欢迎参考

vscode 官方插件库​​​​​​​

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/126355.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 如何删除LDSGameMaster

    如何删除LDSGameMaster

    如何删除LDSGameMaster如何删除LDSGameMaster背景介绍方法一方法二背景介绍最近不小心下载安装了鲁大师，卸载之后，C盘中仍有一个名为LDSGameMaster的文件夹。虽然很小，之后18M，但是一定要删除掉，否则心里很不舒服。方法一百度告诉我，解决这个问题很简单。这个文件夹中有个uninstall，运行之后就没有了。但我没有发现我的文件夹中有这么一个东西。这个方法不提。方法二删除之后，提示：操作无法…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月13日
    214
  • 怎么查看matlab函数的源代码_matlab源代码怎么用

    怎么查看matlab函数的源代码_matlab源代码怎么用

    怎么查看matlab函数的源代码_matlab源代码怎么用如何查看ＭＡＴＬＡＢ函数的源代码　　　大家都知道ＭＡＴＬＡＢ是开源的，所有的函数源代码都是可以查看的。但是，对于初学者来说，可能还不知道如何查看ＭＡＴＬＡＢ函数的源代码。函数之　　ｔｙｐｅ　　　假设需要查看ｆｕｎｃｔｉｏｎ＿ｎａｍｅ的源代码，在命令窗口中键入　ｔｙｐｅ　　ｆｕｎｃｔｉｏｎ＿ｎａｍｅ　　即：>>typeimreadfunction[X,map,alp

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月4日
    0
  • dos2unix命令将dos文件转换为unix格式

    dos2unix命令将dos文件转换为unix格式

    dos2unix命令将dos文件转换为unix格式使用git的时候碰到git将unix换行符转换为windows换行符的问题，需要使用dos2unix命令将文件转换为unix格式。dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的（DOS/MACtoUNIXtextfileformatconverter）。DOS下的文本文件是以\r\n作为断行标志的，表示成十六进制就是0D0A。而Unix下的文本文件是以\n作为断行

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月31日
    48
  • 什么是java单例模式？[通俗易懂]

    什么是java单例模式？[通俗易懂]

    什么是java单例模式？[通俗易懂]关于java单例模式的文章早已是非常多了，本文是对我个人过往学习java，理解及应用java单例模式的一个总结。此文内容涉及java单例模式的基本概念，以及什单例模式的优缺点，希望对大家有所帮助。什么是java单例模式？单例模式是保证类的实例是单例的一种常见设计模式。单例模式的优点：(1)首先肯定是节省内存资源，不管多频繁的通过暴露的方法创建实例，都能保证创建的对象在系统内存中是同一实例对象;(2)灵活性，由于所有实例的创建都由该类控制，所有该类可以灵活的更改实例化过程;(3)实例的

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月11日
    4
  • Week04-面向对象设计与继承

    Week04-面向对象设计与继承

    Week04-面向对象设计与继承

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月7日
    32
  • Ubuntu彻底卸载jdk「建议收藏」

    Ubuntu彻底卸载jdk「建议收藏」

    Ubuntu彻底卸载jdk「建议收藏」参考链接原链接1、移除所有java相关的包（sun,Oracle,openJDK,lcedTeaplugins,GIJ)#apt-getupdate#apt-cachesearchjava|awk'{print($1)}’|grep-E-e’^(ia32-)?(sun|oracle)-java’-e’^openjdk-‘-e’^icedtea’-e’^(default|gcj)-j(re|dk)’-e’^gcj-(.*)-j(re|dk)’-e’

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号