VSCode 前端常用插件集合

摘要:
1.AutoCloseTag自动关闭HTML/XML标记2.AutoRenameTag自动完成另一侧标记的同步修改3.美化格式代码。值得注意的是,美化插件支持自定义格式代码规则4.BracketPairColorizer为括号添加不同的颜色以区分不同的块。用户可以定义不同的括号类型和颜色5

1.Auto Close Tag
  自动闭合HTML/XML标签

VSCode 前端常用插件集合第1张

 2.Auto Rename Tag
  自动完成另一侧标签的同步修改

VSCode 前端常用插件集合第2张

3.Beautify
  格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则

VSCode 前端常用插件集合第3张

 VSCode 前端常用插件集合第4张


4.Bracket Pair Colorizer
  给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色VSCode 前端常用插件集合第5张

 VSCode 前端常用插件集合第6张

 VSCode 前端常用插件集合第7张 


5.Debugger for Chrome
  映射vscode上的断点到chrome上,方便调试

VSCode 前端常用插件集合第8张

 VSCode 前端常用插件集合第9张 


6.Courier New
  一款好看字体 


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


8.HTML CSS Support
  智能提示CSS类名以及id 


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

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


11.jQuery Code Snippets
  jQuery代码智能提示 


12.Markdown Preview Enhanced
  实时预览markdown,markdown使用者必备 


13.markdownlint
  markdown语法纠错 


14.Material Icon Theme
  个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致 


15.open in browser
  vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,

       支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari 


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


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


18.Vetur
  Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。

       vscode官方钦定Vue插件,Vue开发者必备。 


19.vscode-icon
  让 vscode 资源树目录加 


20.HTMLHint
  html代码检测 


21.Project Manager
  在多个项目之前快速切换的工具


22.fileheader
  顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间,快捷键ctrl+alt+i在文件开头自动输入作者信息和修改信息等内容 


23.filesize
  在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间 


24.quokka
  一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。

       另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用 


25.CSS Peek
  使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,

       选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。 


26.HTML Boilerplate
  通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。

        你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。 


27.Prettier
  Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。

       如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯! 


28.Color Info
  提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。 


29.Icon Fonts
  这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons 


30.Minify
  这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。

       它能够分别通过 uglify-js、clean-css 和 html-minifier,与 JavaScript、CSS 和 HTML 协同工作。使用F1 运行文件缩小器Minify 


31.VueHelper
  snippet代码片段


32.Vue 2 Snippets


33.Vue VSCode Snippets
  VUE代码自动补全插件


34.Git History 
  git提交历史

35 Setting Sync
  同步你得设置和插件

36.Reactjs code snippets

  一个 React 自动补工具。

37.Terminal 

   vs code 内置的命令行插件,也比较实用。


38.npm Intellisense

  用于在import语句中自动填充npm模块。

39.npm

      此扩展支持运行文件中定义的npm脚本,package.json并根据中定义的依赖项验证已安装的模块package.json

 40.Window Colors

    每个VSCode窗口都可以独特地自动着色。

VSCode 前端常用插件集合第10张

41.live server 插件

   开启本地服务器

免责声明:文章转载自《VSCode 前端常用插件集合》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notifyPowerBI [视图]下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

阿里云 OSS文件存储挂到云服务器ESC文件系统中

ossfs能让您在Linux系统中,将对象存储OSS的存储空间(Bucket)挂载到本地文件系统中,您能够像操作本地文件一样操作OSS的对象(Object),实现数据的共享。 使用限制 ossfs使用有以下限制: 不支持挂载归档型Bucket。 编辑已上传文件会导致文件被重新上传。 元数据操作,例如list directory,因为需要远程访问OSS服务...

前端大文件上传解决方案支持分片断点上传

最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请...

电脑使用网络调试助手连接阿里云步骤

阿里云物联网平台创建设备 创建产品 1.首先进入阿里云首页,登录,并进入控制台 2.点击产品与服务,点击物联网平台。 3.点击公共实例 4.点击创建产品,按如下设置建立WIFI联网方式的设备: 创建设备 1.点击设备->添加设备,输入设备 2.添加物理模型,再创建产品时,如果选择标准品类,则在设备的物模型数据中有自动定义的属性。如果选择自定...

golang之vscode环境配置

go语言开发,选择vscode作为IDE工具也是一个不错的选择,毕竟goland收费,老是破解也挺麻烦,除了这点,不过说实话挺好用的。vscode的话相对来说就毕竟原始,适合初学者。 1、vscode首先需要安装go语言插件,在vscode扩展中搜索“go”,如下图,下载安装go插件 2、vscode环境配置  打开vscode设置,菜单File -&g...

IOS学习1——IOS应用程序的生命周期及基本架构

一、应用程序的状态和多任务 有时系统会从app一种状态切换另一种状态来响应系统发生的事件。例如,当用户按下home键、电话打入、或其他中断发生时,当前运行的应用程序会切换状态来响应。应用程序的状态有以下几种: Not running:app还没运行 Inactive:app运行在foreground但没有接收事件 Active:app运行在foregr...

Visual Studio Code 的使用方法和技巧

VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验。 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`,`GIT`,`调试`,`插件`,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边。 底栏:依次是`Git Branch`,`error&wa...