前端开发——VSCode

简介: 前端开发——VSCode

一、软件提取:

网盘链接:https://pan.baidu.com/s/1WG73GUPsyi4u0xvkxqtm2g

提取码:dgsb

二、软件安装:

提取软件后,无脑点击下一步即可完成安装;

注:(此处只提醒较为关键的几个步骤)


image.png

image.png

以下操作直接下一步即可。

安装成功界面:

image.png

三、主要插件:

1.安装中文插件【Chinese】

image.png

image.png


注:安装后在该应用右下角会出现restart...弹窗,点击重启该软件后软件将变为中文界面,中文插件生效。

2.安装源码格式化插件【JS-CSS-HTML Formatter】

image.png

3.安装实时预览插件【live Server】

在网页中展示所写操作的页面;代码每次保存后,浏览器就自动同步刷新显示。即目前很火的【热更新】。

image.png

四、软件入门:

1.修改主题颜色

image.png


image.png

image.png

添加浏览器配置

文件   ->   首选项   ->   设置

image.png

检查有无下面的内容,如果没有则:复制{}内的内容,粘贴到对应的位置

{

"view-in-browser.customBrowser": "chrome",

"open-in-browser.default": "firefox",

"editor.mouseWheelZoom": true

}

image.png

测试配置是否生效:(主要测试按Ctrl+鼠标滚轮,是否能放大缩小)image.png

相关文章
|
7月前
|
前端开发
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
|
2天前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
9月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
560 0
|
1天前
|
前端开发 JavaScript 开发工具
前端开发工具VS Code深度探索
前端开发工具VS Code深度探索
33 1
|
2天前
|
前端开发 JavaScript Windows
前端秘法引言(配置vscode, 以及html的基础)
前端秘法引言(配置vscode, 以及html的基础)
175 0
|
8月前
|
弹性计算 前端开发 JavaScript
前端开发基础2:VS Code和Edge的联动开发
介绍edge tools, live server两个常用插件的用法。
395 2
|
2天前
|
安全 IDE 前端开发
智能化时代前端开发使用Amazon CodeWhisperer在vscode中编写代码
智能化时代前端开发使用Amazon CodeWhisperer在vscode中编写代码
93 0
|
7月前
|
前端开发 JavaScript 编译器
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
355 0
|
9月前
|
前端开发
Web前端 — VSCode实用扩展插件
在Web前端开发中常用的 VSCode 插件 内容来源 前端VSCode常用插件-快捷键-以及常用技巧-pink老师 下面介绍插件如何下载和使用 如有帮助,请关注点赞支持博主,后期会出其他相关软件安装教程!!!
160 0
|
12月前
|
前端开发 Devops API
前端利器躬行记(8)——VSCode插件研发
前端利器躬行记(8)——VSCode插件研发