安装使用vsCode教程什么是vsCode? vsCode安装vsCode汉化vsCode通用命令说明vsCode左侧的图标说明vsCode基本上是通过前端通用插件在vosCode上显示html界面
什么是vs代码
Visual Studio Code (简称VS Code/VSC )是一个免费的开源现代化轻量级代码编辑器,提供几乎所有主要开发语言的语法亮点、智能代码完成、自定义热键、括号匹配、代码片段软件支持Win、Mac和Linux。
vsCode安装voCode是免费软件
下载地址链接:官网下载。
在vsCode汉化F1中搜索Configure Display Language并配置zh-cn,关闭软件重启。
如果重新启动后仍为英语,则只需确认商店安装的插件,再次安装中文插件Chinese(simplified ),然后重新启动软件即可。
vsCode的一般命令说明
注意
Ctrl shift F可以在文件中搜索并同时替换。 还可以指定要指定给哪个文件,以及排除哪个文件等。 安装vscode后,可以在任何项目目录下单击鼠标右键,在服务中打开该项目。 (如果已经有打开的窗口,他会打开一个新窗口) vsCode左侧图标的说明
vsCode基本上是直接拖动到项目文件夹中进入软件的
方法1 )拖动到工作空间(这样会保留当前和打开的项目文件夹)。)。
方法2 )将其拖动到工作区右侧的窗口中。 这样,拖动的窗口就会覆盖原始窗口和打开的窗口。
(此时,vscode会保存原始工作区信息,并询问您是否要保存该文件以供下次打开。)
备注:对于左侧的文件夹,请使用快捷键复制&; 可以糊等。
方式3 :
您也可以安装http服务器插件。 安装完成后,按f1键,输入http将显示以下两个选项: 选择“with current file”可创建服务器并运行当前文件。 另一个找到当前目录下的index.html,然后打开它。
在vscode中创建项目文件夹
格式代码
在代码中右键单击菜单可以显示相应的格式设置等功能选项,还有用于定义查找引用等的菜单。
在浏览器中打开网页
安装插件: Open HTML in Default Browser
在默认浏览器中打开HTML文件
在资源管理器中,右键单击HTML文件以在浏览器中打开菜单
编辑器将在浏览器中显示HTML文件的右键,并打开菜单
可以同时打开多个页面
在工作区中的项目上单击鼠标右键可显示用于在资源管理器中打开文件的选项
以服务器形式打开文件
方式1 :
您可以安装live server插件,单击重新加载或重新启动vscode,然后单击鼠标右键在服务器上将其打开。
打开此模式后,页面将自动刷新。
方式2 :
按快捷键:打开Ctrl `命令行终端并运行cnpm install live-server -g
要在安装后每次运行,只需打开终端,然后运行实时服务器即可
使用live-server是将整个网站打开到服务器上。 无论您当前移动到哪个目录,他打开的都是默认的首页文件。 例如,index.html
如果根目录下都是文件夹,或者没有缺省的首页文件(如index.html ),服务器上将显示几个文件夹以供选择。 例如:
要关闭live-server,只需在控制台中运行以下ctrl c,然后输入y确认即可关闭:
Live-server可以在任何项目根目录下打开一个终端窗口,然后输入Live-server在服务器上打开并运行当前项目
在服务器打开模式下,更改文件内容,然后保存,无需在浏览器就会自动的刷新**中明确地在浏览器中进行更新。
前端常见插件说明HTML Boilerplate只需在空文件中输入html并打开html:5即可创建新的网页文件。 您也可以输入感叹号vscode-browser-plus以在编辑器中预览html (快捷键Ctrl F1 ) CSS Peek并跟踪样式表。yydqz在html文件中右键单击选择器选择“Go to Definition和Peek definition”选项会向您发送一个名为CSS代码Color Info的有用插件,用于设置样式。 提供有关在CSS中使用颜色的信息。 只需将光标悬停在颜色上,即可预览有关颜色块中颜色模型的(HEX、RGB、HSL、CMYK )的信息。 名为Auto Close Tag的有用插件提供了有关在CSS中使用颜色的信息。 只需将光标悬停在颜色上,即可预览有关颜色块中颜色模型的(HEX、RGB、HSL、CMYK )的信息。 Auto Close Tag会自动关闭HTML/XML标签Auto Rename Tag,并自动修改另一个标签。 只有. js不支持HTML Snippets智能队列HTML标记和标记含义JavaScript(es6 ) code snippetsES6语法的智能队列和快速填充. vue无需设置为支持包含各种js代码的文件,Path Intellisense会自动提示文件路径。 jQuery Code SnippetsjQuery代码智能提示Icon Fonts支持各种可以向项目添加图标字体的插件。该插件支持Font Awesome、Ionicons、狂野哈密瓜如果你是mhdwt,你就不需要了解插件的作用。 先安装一下,以后用用看就清楚了
安装方法
在vosCode中显示html界面
如果你认为对你有帮助的话,请点击赞支持。 如果有什么问题的话,请在评论区留言