vscode几十款常用插件及emmet语法

2024-01-13 09:48

本文主要是介绍vscode几十款常用插件及emmet语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

开发中使用的一些vscode插件

文章目录

  • 开发中使用的一些vscode插件
    • EaseServer
    • Live Server
    • Live HTML Previewer
    • LiveReload
    • Auto Close Tag
    • Auto Rename Tag
    • Beautify
    • Beautify css/sass/scss/less
    • AutoFileName
    • Better Comments
    • Bracket Pair Colorizer
    • CSS tree
    • Code Outline
    • Code Runner
    • Code Spell Checker
    • Color Info
    • vscode-pigments
    • Coverage Gutters
    • Debugger for Chrome
    • Document This
    • Dracula Official
    • ECMAScript Quotes Transformer
    • ESLint
    • GitLens — Git supercharged
    • Guides
    • Highlight Matching Tag
    • HTML CSS Support
    • HTML Snippets
    • Icon Fonts
    • Image preview
    • Indenticator
    • jQuery Code Snippets
    • open in browser
    • Path Intellisense
    • PHP Debug
    • PHP Extension Pack
    • PHP Formatter
    • PHP IntelliSense
    • Quokka.js
    • Sass
    • Simple icons
    • stylelint
    • Terminal
    • TODO Highlight
    • 关于Vue
      • Vetur
      • Vue 2 Snippets
      • VueHelper
    • 关于wechat mini program
      • vscode wxml
      • vscode-wechat
  • vscode常用emmet 语法
    • 嵌套关系
    • 兄弟关系
    • 含类名标签
    • 含类名标签自然数

vscode快捷打开终端

1. 通过cmd+shift+p
2. Ctrl+t --->输入相关名称

EaseServer

此扩展使您可以在本地服务器上运行打开的文件

打开方式:

  1. default shortcut Ctrl+Shift+Enter
  2. 或Ctrl+t —》 >EaseServer Start
  3. 支持热更新, 无需刷新页面

特性

  1. 本地http服务器

  2. 自动打开文件在浏览器


Live Server

启动具有静态和动态页面实时重新加载功能的本地开发服务器

打开方式:

  1. 点击状态栏Go Live打开/关闭服务器
  2. 支持热更新, 无需刷新页面

Live HTML Previewer

这个扩展允许你在VS代码中预览html文件。使用它可以快速设置网页的html和css。

打开方式:

  1. Ctrl+t —》 >side preview
  2. vscode工具 左下方 点击 Preview Available

LiveReload

LiveReload

用途及参考

  1. 它可以监听你设置的文件夹中文件的改变,若是文件内容有改变,它会自动刷新浏览器
  2. chrome可以去应用商店下载扩展
  3. 具体使用需配置 https://www.cnblogs.com/liu-l/p/3902100.html

Auto Close Tag

自动添加HTML/XML关闭标签,就像Visual Studio IDE或Sublime Text所做的那样。


Auto Rename Tag

当重命名一个HTML/XML标记时,自动重命名成对的HTML/XML标记


Beautify

在VS代码中美化代码


Beautify css/sass/scss/less

美化css, sass和less的代码(Visual Studio代码的扩展)


AutoFileName

自动完成文件名


Better Comments

通过使用警告、信息、TODOs等注释来改进代码注释!


Bracket Pair Colorizer

一个可定制的扩展,用于对匹配的括号进行着色


CSS tree

选定HTML/JSX快速生成样式结构


Code Outline

VSCode的代码大纲树提供程序


Code Runner

vsCode中右键Run Code


Code Spell Checker

源代码的拼写检查器


Color Info

提供有关css颜色的快速信息


vscode-pigments

预览编辑器中使用的颜色


Coverage Gutters

显示由lcov或xml生成的测试覆盖范围-可用于多种语言


Debugger for Chrome

在Chrome浏览器或任何其他支持Chrome调试器协议的目标中调试JavaScript代码。


Document This

在TypeScript和JavaScript文件中自动生成详细的JSDoc注释。

default shortcut Ctrl+Alt+D


Dracula Official

官方吸血鬼主题。


ECMAScript Quotes Transformer

转换ECMAScript字符串文本的引号。


ESLint

将ESLint JavaScript集成到VS代码中。


GitLens — Git supercharged

增强Visual Studio代码中内置的Git功能

增强Visual Studio代码中内置的Git功能——通过Git blame注释和代码镜头直观地显示代码作者身份,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解,等等


Guides

Visual Studio代码,指南线,缩进背景线


Highlight Matching Tag

突出显示匹配的关闭或打开标记


HTML CSS Support

CSS支持HTML文档


HTML Snippets

完整的HTML标签,包括HTML5代码片段


Icon Fonts

为流行的图标字体的片段,如字体棒,离子图标,字形图标,八进制,材料设计图标和更多!


Image preview

显示图像预览在行号旁和悬停


Indenticator

突出显示当前缩进深度


jQuery Code Snippets

超过130个jQuery代码片段


open in browser

这允许您在默认浏览器或应用程序中打开当前文件。

右键选择打开


Path Intellisense

Visual Studio代码插件,自动完成文件名


PHP Debug

使用XDebug对PHP的调试支持


PHP Extension Pack

PHP开发所需的一切


PHP Formatter

格式化


PHP IntelliSense

PHP的高级自动完成和重构支持


Quokka.js

JavaScript的即时编译。


Sass

Sass


Simple icons

图标主题


stylelint

Modern CSS/SCSS/Less linter


Terminal

Visual Studio代码的终端


TODO Highlight

突出显示TODOs、FIXMEs和任何关键字、注释……


关于Vue

Vetur

Vue工具用于VS代码


Vue 2 Snippets

Vue 2 code Snippets, 快速编码


VueHelper

Vue、Vue-router和Vuex的代码片段



关于wechat mini program

vscode wxml

微信wxml支持/ vscode片段


vscode-wechat

vscode支持微信wxss



vscode常用emmet 语法

可以快速生成需要的结构,提高开发效率。

嵌套关系

  1. 如何快速生成 列表中嵌套a标签呢?

    • ul>li>a
    • 可见a标签href属性默认为空
    • 效果如下:
    <ul><li><a href=""></a></li>
    </ul>
    
  2. 如何设置a标签的属性?

    • []表示设置属性

    • ul>li>a[href="#"]

    • ul>li>a[href="javascript:;"]

    <ul><li><a href="#"></a></li>
    </ul><ul><li><a href="javascript:;"></a></li>
    </ul>
    
  3. 如何批量生成?

    • ul>li*3>a[href="#"] 或者 ul>(li>a[href="#"])*3
    • ()表示数量
    <ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li>
    </ul>
    
  4. 多层嵌套关系

    • ul>li*5>a[href="#"]>img[src=""]
    <ul><li><a href="#"><img src="" alt=""></a></li><li><a href="#"><img src="" alt=""></a></li><li><a href="#"><img src="" alt=""></a></li><li><a href="#"><img src="" alt=""></a></li><li><a href="#"><img src="" alt=""></a></li>
    </ul>
    

兄弟关系

  1. 如何快速生成?

    • 使用+号连接可生成多个平级标签
    • a+p+span
    <a href=""></a>
    <p></p>
    <span></span>
    
  2. 嵌套加平级

    • div>a[href="#"]+p+span
    <div><a href="#"></a><p></p><span></span>
    </div>
    

含类名标签

  1. 快速生成含类名标签

    • .wrap
    <div class="wrap"></div>
    

    同理 id选择器

    • #wrap
    <div id="wrap"></div>
    
  2. 指定标签生成类名

    • a.link
    <a href="" class="link"></a>
    

含类名标签自然数

  1. 如何快速生成自然数标签?

    • .module$*3
    <div class="module1"></div>
    <div class="module2"></div>
    <div class="module3"></div>
    
  2. 多层级

    • .module$*3>ul>li.item$*2>a[href="#"]
    <div class="module1"><ul><li class="item1"><a href="#"></a></li><li class="item2"><a href="#"></a></li></ul>
    </div>
    <div class="module2"><ul><li class="item1"><a href="#"></a></li><li class="item2"><a href="#"></a></li></ul>
    </div>
    <div class="module3"><ul><li class="item1"><a href="#"></a></li><li class="item2"><a href="#"></a></li></ul>
    </div>
    

这篇关于vscode几十款常用插件及emmet语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/601044

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客: mac安装jdk oracle 版本:https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本:https://adoptium.net/zh-CN/temurin/releases/ 阿里版本: github:https://github.com/

30常用 Maven 命令

Maven 是一个强大的项目管理和构建工具,它广泛用于 Java 项目的依赖管理、构建流程和插件集成。Maven 的命令行工具提供了大量的命令来帮助开发人员管理项目的生命周期、依赖和插件。以下是 常用 Maven 命令的使用场景及其详细解释。 1. mvn clean 使用场景:清理项目的生成目录,通常用于删除项目中自动生成的文件(如 target/ 目录)。共性规律:清理操作

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

019、JOptionPane类的常用静态方法详解

目录 JOptionPane类的常用静态方法详解 1. showInputDialog()方法 1.1基本用法 1.2带有默认值的输入框 1.3带有选项的输入对话框 1.4自定义图标的输入对话框 2. showConfirmDialog()方法 2.1基本用法 2.2自定义按钮和图标 2.3带有自定义组件的确认对话框 3. showMessageDialog()方法 3.1

工作常用指令与快捷键

Git提交代码 git fetch  git add .  git commit -m “desc”  git pull  git push Git查看当前分支 git symbolic-ref --short -q HEAD Git创建新的分支并切换 git checkout -b XXXXXXXXXXXXXX git push origin XXXXXXXXXXXXXX

Maven(插件配置和生命周期的绑定)

1.这篇文章很好,介绍的maven插件的。 2.maven的source插件为例,可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example,然后配置到riil-collect.xml中。  <build>   <plugins>    <pl

java常用面试题-基础知识分享

什么是Java? Java是一种高级编程语言,旨在提供跨平台的解决方案。它是一种面向对象的语言,具有简单、结构化、可移植、可靠、安全等特点。 Java的主要特点是什么? Java的主要特点包括: 简单性:Java的语法相对简单,易于学习和使用。面向对象:Java是一种完全面向对象的语言,支持封装、继承和多态。跨平台性:Java的程序可以在不同的操作系统上运行,称为"Write once,