下一篇：Web前端开发（HTML部分之基础概念篇四）——HTML常用标签（上篇）目录
一、前端开发之vscode使用步骤
①双击打开vscode软件
②新建文本文件（Ctrl+N）
③保存（Ctrl+S），文档保存为.html格式
④"Ctrl"+"+"放大页面，"Ctrl"+"-"缩小页面
⑤在创建好的.html文本文件中输入英文!点击!选项或者在创建好的.html文本文件中输入英文!然后点击Tab键，两种方法都可以生成页面 基本骨架结构。
⑥编辑好相关内容后，安装插件open in browser，在编辑界面鼠标右键弹出窗口并点击open in default browser,即可在浏览器中看到编 辑好的文本内容。
二、前端开发必备vscode插件
Easy LESS
由于less文件不能直接引入到html文件中，Easy LESS插件可以自动把less文件转化成css文件，而css文件可以引入到html文件中。
Live Server
使用Live Server插件实时更新浏览器页面内容需要先用vscode打开相应文件所在的文件夹，若你没有文件夹，可以在桌面等新建文件夹，vscode打开该文件夹后新建相应格式的文件，在编辑界面鼠标右键并点击Open with Live Server，修改代码之后Ctrl+S保存，此时浏览器页面的内容就会自动更新了。
One Dark Pro
One Dark Pro 主题提供了一种深色的界面，旨在提高开发者的工作效率。它的色彩配比是精心设计的，旨在提供优秀的代码高亮效果，帮助开发者快速识别代码结构。此外，One Dark Pro 还提供自定义的选项，例如不同的色彩强调，以及对各种编程语言的高亮支持。
open in browser
编写、保存完代码后需要浏览器预览，安装open in browser插件后，在vscode编辑界面鼠标右键弹出对话框并点击Open In Default Browser（以默认浏览器打开），编辑好的文本内容就会在浏览器页面显示出来。值得注意的是，该插件修改并保存完代码后需刷新浏览器才会更新浏览器页面的内容。（Open In Other Browser选项可以指定以其他浏览器打开）
vscode-icons
直观展现不同类型文件的图标，例如.css/.js/.html/.less等格式的文件图标都是不同的。
会了吧
安装会了吧插件后，vscode界面最左侧会出现一个"会"的图标，点击该图标就可以查看编辑页面中你不会的英文单词了。
Auto Rename Tag
修改开始标签时结束标签也会同时发生相同的变化。例如修改<p></p>，双击<p>并修改p为div，<p></p>会变成<div></div>
Chinese (simplified)(简体中文）：
下载好的vscode软件界面是英文， Chinese (simplified)(简体中文）插件可以汉化界面，安装该插件后重启vscode，界面就会变成中文的。
注意：1.初学者直接利用vscode自带的格式化代码功能就好。点击管理（左下角小齿轮图标），设置---用户---文本编辑器---格式化---勾选Format On Paste和Format On Save选项，修改完代码，Ctrl+S保存后代码会自动格式化，再也不用担心写的代码格式不规范了。2.写完或者修改完代码后要及时保存，养成良好的习惯。
三、好用的vscode快捷键
①快速复制某一行：Shift+AIt+上箭头或下箭头
②同时选定多个相同的单词：Ctrl+d
双击选定一个词，Ctrl+d同时选中多个相同的词可同时修改多个相同的词
③添加多个光标：Ctrl+AIt+上箭头或下箭头
同时增、删多行内容
④全局替换某个单词：Ctrl+h
⑤快速定位到某一行：Ctrl+g
Ctrl+g后输入想到达的行数并回车就可以找到某一行
⑥选择某个区块：Shift+AIt+拖动鼠标
⑦放大、缩小整个编辑器界面："Ctrl"+"+"放大页面，"Ctrl"+"-"缩小页面
⑧管理（左下角小齿轮图标）---键盘快捷方式，可以自定义快捷方式
vscode使用、vscode插件、vscode快捷键详细教学视频
扫一扫
1582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
