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


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

目录
相关文章
|
6天前
|
Web App开发 JavaScript 前端开发
推荐几个 vscode开发需要的插件
推荐几个我在开发中使用到的vscode的几个插件:
45 0
|
7天前
|
Rust
安装vscode的rust插件
安装vscode的rust插件
14 0
安装vscode的rust插件
|
8天前
|
C++
美化----VS Code 文件小图标插件 “VScode icon”
美化----VS Code 文件小图标插件 “VScode icon”
18 0
|
16天前
|
Android开发
[√]addr2line vscode插件
[√]addr2line vscode插件
11 0
|
1月前
|
前端开发
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
|
1月前
|
前端开发 JavaScript 编译器
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
28 0
|
3月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
330 0
|
6月前
|
前端开发 Devops API
前端利器躬行记(8)——VSCode插件研发
前端利器躬行记(8)——VSCode插件研发
|
7月前
|
前端开发 JavaScript IDE
前端基本开发工具的IDE/编辑器之VSCode
VsCode是一个轻量级的、跨平台的开源编辑器,是Microsoft开发的一款非常流行的前端开发工具。下面就让我们来看看VsCode的特点和优势。
115 0
|
9月前
|
Web App开发 存储 人工智能
用了这些vscode插件前端同学再也不996了
用了这些vscode插件前端同学再也不996了
322 0
用了这些vscode插件前端同学再也不996了
相关产品
云迁移中心
推荐文章
更多