Web前端 — VSCode实用扩展插件

简介: 在Web前端开发中常用的 VSCode 插件内容来源 前端VSCode常用插件-快捷键-以及常用技巧-pink老师下面介绍插件如何下载和使用如有帮助,请关注点赞支持博主,后期会出其他相关软件安装教程!!!

文章目录

前言

1.Chinese (Simplified) 汉化

2.Auto Rename Tag

3.One Dark Pro

4.格式化代码(vscode 系统自带)

5.open in browser

6.Live Server 实时预览

7.vscode-icons

8.Easy LESS

9.会了吧 (单词翻译插件)


1.Chinese (Simplified) 汉化

image.png

由于 vscode 下载完后是英文版,安装完这个插件后,重启vscode后,变为中文版


安装步骤(下面软件相同)

1.双击点击扩展

image.png

2.在搜索框中搜索相关软件名称

image.png

3.搜索后,点击软件安装即可,安装后重启vscode即可

image.png


2.Auto Rename Tag

image.png

修改开始标签,结束标签跟着自动变化


使用说明

image.png

3.One Dark Pro

image.png

可以修改颜色主题(可以修改代码的颜色)


安装后 代码颜色效果

image.png

4.格式化代码(vscode 系统自带)

开启步骤

1.点击设置图标,再点击设置(ctrl+,)按钮

image.png

2.进入后勾选,下面两项

image.png

3.在CTRL+S在保存时,会自动格式化


5.open in browser

image.png

代码编写完后,需要浏览器预览,安装这个插件即可


使用说明

image.png


6.Live Server 实时预览

image.png

这个插件,修改完代码后,自动会更新浏览器(懒人福音)


注意点:

要先用vscode打开文件夹所在的目录文件夹


7.vscode-icons

image.png

可以看到文件对应的图标,查看文件时更加直观


安装后效果

image.png

8.Easy LESS

image.png

这个插件会自动帮我们生成css文件


9.会了吧 (单词翻译插件)

image.png

一个翻译插件,还有发音,边学习编程还可以学习英语


效果图

image.png


如这篇博客对大家有帮助的话,希望 三连 支持一下 !!! 如果有错误感谢大佬的斧正 如有 其他见解发到评论区,一起学习 一起进步。

目录
相关文章
|
7天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
1天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
7天前
|
前端开发
|
7天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
7天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`<li>`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
|
7天前
|
前端开发
【前端web入门第五天】02 盒子模型基础
本文档详细介绍了CSS中的盒子模型及其组成部分,包括内容区域、内边距、边框线和外边距。通过具体示例展示了如何设置边框线、内边距及外边距,并解释了尺寸计算方法和版心居中的技巧。内容丰富,示例清晰,有助于理解盒子模型在网页布局中的应用。
|
7天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
7天前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
|
4月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
63 0
|
4月前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
231 0