VsCode 使用基础_VsCode入门小技巧

VSCode入门小技巧

什么是VSCode

Visual Studio Code（简称VS Code / VSC）是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。

安装与汉化VSCode

安装VSCode

你可以从VSCode官网下载安装版可执行程序，安装后很多东西都不需要你自己配置了。

汉化VSCode

按F1搜索Configure Display Language设置zh-cn关闭软件重启。如果重启后还是英文的，那么在商店查看已安装的插件，把中文插件Chinese(simplified)重新安装一遍，然后重启软件即可。

常用命令说明

• Ctrl+Shift+F 在文件中查找，可以同时替换。还可以指定在什么文件中，同时指定要排除什么文件等。
• Ctrl+~` 可以将命令窗口打开在VSCode中，使用起来就比较方便了。
• 右键项目目录 在任意一个项目目录下，鼠标右键然后将这个项目在服务器上打开。如果你已经有打开了一个窗口，那么他会打开一个新窗口。

基本使用技巧

项目文件夹操作

• 直接拖入项目文件夹进入软件。方式一：拖入工作区（这样的话，会保留当前以及打开的项目文件夹）。方式二：拖入工作区右边的窗口，这样的话会让拖入的窗口覆盖掉原本以及打开的窗口（这时VSCode会问你是否保存一个文件，用来保存原本工作区信息，以便下次打开此文件）。
• 在VSCode里面创建项目文件夹。
• 格式化代码 在代码里面右键菜单，会弹出相应的格式化等功能选项，也有定义引用查找等菜单。

在浏览器中打开网页

• 以file文件协议形式打开文件 用默认浏览器打开HTML文件 在资源管理器中，HTML文件右键显示在浏览器中打开菜单 在编辑器中，HTML文件右键显示 我们在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项。
• 以服务器形式打开文件
• 安装liveserver插件，点击重新加载或者重启VSCode，然后鼠标右键就可以在服务器上打开，这种模式打开会自动刷新页面。
• 安装好后每次要运行只需要打开终端后执行一下live-server即可。
• 使用live-server是把整个网站打开到服务器上的。不管你现在定位到哪一个目录，他打开的都是默认的首页文件，如：index.html。
• 如果你根目录下全是文件夹，或者没有index.html等默认首页文件，那么服务器就会显示一些文件夹让你选择。
• 如果要关闭live-server那么只需要在控制台执行以下ctrl+c，然后输入y确认下即可关闭。
• Live-server可以在任意项目根目录下，打开终端窗口，然后输入live-server即可让当前项目在服务器上打开执行。
• 在以服务器打开的模式下，我们更改了文件内容后只要保存下，浏览器就会自动的刷新，而不需要我们显式的在浏览器里面刷新。
• 也可以安装httpserver插件，安装完成后按下F1，然后输入http会看到下面两个选项，选择withcurrentfile那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html，然后打开它。选择一个后，会再让你选择在浏览器里面打开还是VSCode里面打开。你也可以全局安装此模块【cnpm install http-server -g】 安装到全局后:在终端里面输入hs就可以使用。

插件安装与管理

安装插件

在左边最下面是哪个图标点击搜索插件进行安装即可。如果安装了某个插件后无法看到效果，那么请重启下VSCode，或者重新加载。

常用插件推荐

• HTMLBoilerplate 通过使用HTML模版插件，你就摆脱了为HTML新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入html，选中html:5即可生成一个新的网页文件，也可以输入一个感叹号。
• browser-plus 使用方法 WindowCtrl+F1，默认10086端口预览网页。
• CSSPeek 使用此插件，你可以追踪至样式表中CSS类和ids定义的地方。
• ColorInfo 这个便捷的插件，将为你提供你在CSS中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的(HEX、RGB、HSL和CMYK)相关信息了。
• AutoCloseTag AutoRenameTag 自动完成另一侧标签的同步修改 HTMLSnippets。

通过以上技巧，你可以更高效地使用VSCode进行开发工作。希望这些信息对你有所帮助！