VScode cssPeek快速找到CSS定义

最新推荐文章于 2024-03-04 21:28:24 发布
最新推荐文章于 2024-03-04 21:28:24 发布
阅读量9.5k 收藏 13
点赞数 8
分类专栏： vscode 文章标签： css peak
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fd2025/article/details/124462556
版权

我们在html 查看样式的时候，常常会找到一个样式，如果CSS文件样式比较多，我们就会使用搜索类名的方式，那么有没有一种插件，可以点击跳转。

1.打开VSCODE编辑器，点击左侧菜单最下方的四方形的菜单按钮。在打开的扩展程序市场内搜索CSS Peek。
在这里插入图片描述
2.在CSS Peek详细页面点击【Install】按钮安装扩展程序。
在这里插入图片描述
3.安装完成后打开HTML文件，按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。
按住 Ctrl键，鼠标放上去。会显示调用的CSS样式
在这里插入图片描述
4.跳转到样式的定义，按住CTRL键同时点击样式类的名称或者在类的名称上按F12键即可跳转到样式的定义。CSS Peek在开前端开发过程中节省了好多查找样式的时间，真的方便极了

在这里插入图片描述

编写测试所，这个仅仅对html中引用外部样式(即单独css文) 件有用,对vue内部样式没有用

半夏_2021
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
cssgrid
03-30
cssgrid
27 个实用的 Visual Studio Code 扩展插件，让工作效率翻倍
zz_jesse的博客
06-06 3484
Visual Studio Code （ VS Code ）是一个知名且评价很高的代码编辑器，具有大量功能和扩展以增强开发体验。使用 VS Code 的主要好处之一是它的灵活性，允许开发人员根据他们的特定需求对其进行自定义。此外，VS Code 轻巧且快速，使其成为从事大型项目或资源有限的开发人员的绝佳选择。它带有调试工具、终端和 Git 集成，使其成为开发人员的一体化解决方案。不仅如此，Visu...
vscode插件推荐2020_2020年，前端开发者必备的10个VS Code扩展插件
weixin_39839162的博客
11-23 414
全文共1689字，预计学习时长5分钟图源：Unsplash在2017年，VSCode有260万月活跃用户(这是我找到的最新官方数据，现在肯定更多)，可以说是目前最好的代码编辑器。它最大的一个特点是，插件多可自定义。MarketPlace(插件商店)提供了大量扩展插件，开发人员完全可以根据需求进行自定义设置，这也有助于编写高质量的代码。本文将为编写HTML，CSS，JavaScript以及使用Vue...
Visual Studio Code 里的 Peek 操作
最新发布
SAP 资深技术专家 Jerry Wang 的技术分享
03-04 531
VS Code 的Peek功能系列为开发者提供了一组强大的工具，用于提高代码的可读性和可维护性。通过使用这些工具，开发者可以在保持当前上下文的同时，深入理解代码的结构和行为。无论是在进行日常的代码审查，还是在解决复杂的软件架构问题时，Peek功能都能够大大提升你的效率。
vscode-cssvar:VSCode扩展以支持CSS变量Intellisense
03-28
CSSVar（VSCode扩展） 另一个CSSVar扩展。 此扩展有助于自动完成全局共享CSS变量。 仅扩展files配置中提供的文件中存在的那些变量将被视为全局变量。 支持的配置： 以下是默认值，您可以在User settings.json或Workspace settings.json覆盖它们。 cssvar.files ： ["index.css"] cssvar.extensions ： ["css", "scss", "sass", "less"] 快照： 工作实例
widgets.css
03-01
widgets.css
vscode推荐插件的安装
03-06
一直以来，大家对开发的代码编辑器都没有一个最好的选择，而vscode是我发现速度相对快，对于新版的html css js元素及属性过滤、提示最准确的代码编辑器，因为插件太多，有的人不知道选择哪些插件最好，本文档教你安装哪些，那些可选
VSCode入门——插件安装
橙子的博客
01-02 466
CSS Peek插件 HTML与CSS关联，点击扩展插件——搜索CSSPeek——点击安装： 回到编辑器新建css文件： 然后在index.html中引入index.css文件： 可以通过Ctrl+鼠标左键点击index.css进入文件： 在html中新建一个id为nav的div元素，并通过Ctrl+鼠标左键进入index.css： 并在为#nav设置背景颜色...
提高 Web 开发效率的10个VS Code扩展插件，你知道吗？
葡萄城技术团队博客
09-07 945
一个出色的开发工具可以显著提高开发人员的开发效率，而优秀的扩展插件则能更进一步地提升工具的效率。希望这些插件能够满足开发者的需求，在开发过程中更加高效、便捷。JavaScript(ES6)代码片段插件可以帮助开发人员节省时间：开发人员可以在一个地方获取所有的代码，而不需要重复的输入。Live Server（实时服务器）插件无疑是开发者中使用最为广泛的插件之一，它能够启动本地开发服务器，并具备静态和动态页面的实时重新加载功能。借助这个强大的插件，开发者能够享受到实时预览的便利，极大地提升开发效率。
VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）
xiadaocc的博客
06-26 1545
VSCode 是我们前端开发的一个强大的IDE，所以选择趁手好用的插件是提高开发效率，然后剩下的时间用来摸鱼是很有必要滴。
推荐13款常用的Vscode插件，提高前端日常开发效率
热门推荐
DEVELOPERAA的博客
11-02 2万+
推荐13款常用的Vscode插件，提高前端日常开发效率
CSS 不起作用
qq_45193988的博客
04-01 983
解决CSS有时不起作用的问题 CSS 有时不起作用的问题 在使用HTML、CSS的时候发现，对写好的CSS进行更改的时候，有的是时候不起作用，上网去查找资料发现可能是浏览器的问题，于是Ctrl+F5刷新，发现真的有用，但是后来不好用了，无论按了多少次Ctrl+F5，CSS代码还是不起作用，后来发现可以把浏览器缓存清理掉，这样就好用了。 解决办法 1、Ctrl+F5 2、清空浏览器缓存 ...
vscode-css-languageserver-bin：在VSCode树中提取的vscode-css-languageserver的npm上发布的二进制版本
02-05
vscode-css-languageserver-bin 从提取的npm上发布的二进制版本 产品特点 CSS支持 更少的支持 SASS支持 完成提供商（需要代码片段支持） 代码操作（重命名拼写错误的属性） 验证（语法和皮棉错误） 悬停工具提示提供者 定义提供者 悬停提供商 参考提供者 文件符号和突出显示 重命名符号 客户群 入门 这些说明将为您提供在本地计算机上运行并运行的项目的副本，以进行开发和测试。 有关如何在实时系统上部署项目的注释，请参阅部署。 先决条件 要安装此语言服务器，您的计算机上需要 正在安装 npm install --global vscod
vscode-css-sort:s Vscode扩展可以对CSS属性进行排序，并使它们易于阅读...
03-29
:antenna_bars: CSS排序 阅读以解释如何使用它。
vscode插件
12-18
vscode插件vscode插件vscode插件vscode插件vscode插件
css-minify:vscode扩展以最小化CSS文件
05-14
最小CSS 这是一个非常简单的vscode扩展。 获取您的css文件并将其最小化。 它不需要任何特殊的配置，也不会弄乱您的css文件。 此测试基于Mocha框架。如何只需按Ctrl|Cmd + F1|F2并输入css minify特征从0值中删除单位...
vscode-css-variables:vscodeCSS变量自动完成
05-27
您需要提供包含变量定义的css。 配置 .vscode / settings.json { " cssVariables.lookupFiles " : [ " node_modules/common-ui/dist/CommonUIVariable.css " , " assets/styles/variables.css " ] }
vscode-custom-css:Visual Studio Code的自定义CSS插件。 基于vscode-icon
05-05
自定义CSS和JS特别说明：如果... 添加到settings.json ： " vscode_custom_css.imports " : [ " " ] 非常重要： vscode_custom_css.imports项目必须为URL 。 纯文件路径不是URL 。 Windows文件URL示例： file:///C:/U
vscdoe 的 markdown 显示风格定义 css 文件
06-06
vscode 本身已经支持 markdown 语法是文档预览，但是预览分割不好看，可以通过自己定义 vscode 的 markdown 显示 css 风格来改变显示效果。
vscode运行html+css+js项目
08-30
VSCode是一款强大的代码编辑器，不仅支持各种编程语言的编辑，还可以很方便地运行HTML、CSS和JS项目。下面是运行HTML、CSS和JS项目的步骤： 1. 在VSCode中打开你的项目文件夹。可以通过“文件”->“打开文件夹”选择并打开项目文件夹。 2. 在项目文件夹中新建一个HTML文件，可以使用“新建文件”按钮或者右键点击项目文件夹选择“新建文件”。为了方便起见，将HTML文件命名为“index.html”。 3. 在index.html文件中编写HTML代码，可以使用VSCode提供的HTML代码提示和自动补全功能，来快速编写HTML结构和标签。 4. 在HTML代码中引入CSS文件和JS文件。可以使用link标签引入CSS文件，使用script标签引入JS文件。例如： ```html <link rel="stylesheet" href="style.css"> <script src="script.js"></script> ``` 5. 在项目文件夹中创建一个CSS文件和JS文件，分别命名为“style.css”和“script.js”。在这些文件中编写CSS和JS代码。 6. 在VSCode的顶部菜单栏中选择“查看”->“终端”，打开终端面板。可以使用终端运行项目。 7. 在终端中使用命令“cd 项目文件夹路径”切换到项目文件夹路径。例如：“cd Documents/MyProject”。 8. 使用命令“start index.html”运行项目。会自动在默认浏览器中打开index.html文件，并展示项目效果。 通过以上步骤，你就可以在VSCode中成功运行HTML、CSS和JS项目了。在运行项目时，可以随时修改代码并保存，浏览器会自动刷新，以便实时查看修改后的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半夏_2021

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值