vscode安装使用教程

 

vscode 官网： https://code.visualstudio.com/

1. 汉化vscode

按f1 搜索 Configore Display Language 设置 zh-cn 关闭软件重启。

注意：
如果重启后还是英文的，那么在商店查看已安装的插件，把中文插件Chinese(simplified) 重新安装一遍，然后重启软件即可。

汉化成功：

2. 在浏览器中打开网页

1.以file文件协议形式打开文件

1.    在扩展栏的搜索栏中输入open in browser，找到open in browser这款插件，点击右下角“安装”字样即可安装
2.    在默认浏览器中打开是：Alt + B，在其他浏览器中显示是：Shift+Alt+B
3.    在文件中鼠标右键单击，在弹出的窗口中选择使用默认浏览器打开或者其他浏览器打开，也可以使用我们上面说的快捷键（Alt + B或Shift+Alt+B）打开

4.    用其他浏览器打开，就选择Open In Other Browsers（Shift+Alt+B，顶部会出现一个命令框，其中会显示可以使用的浏览器

特点

• 用默认浏览器打开 HTML 文件
• 在资源管理器中，HTML 文件右键显示 在浏览器中打开 菜单
• 在编辑器中，HTML 文件右键显示

我们在工作区项目上右键菜单就能看到在资源管理器中打开文件的选项

2.以服务器形式打开文件
方式一：
    安装live server 插件，点击重新加载或者重启vscode，然后鼠标右键就可以在服务器上打开，
这种模式打开会自动刷新页面。
方式二：
    1.按下快捷键：Ctrl+` 打开命令行终端，执行cnpm install live-server -g

    2.安装好后每次要运行只需要打开终端后执行一下live-server即可

    3.使用live-server是把整个网站打开到服务器上的。不管你当前定位到哪一个目录，他打开的都是默认的首页文件，如：index.html

    4.如果你根目录下全是文件夹，或者没有index.html等默认首页文件，那么服务器就会显示一些文件夹让你选择。
如：

    5.如果要关闭live-server那么只需要在控制台执行以下ctrl+c，然后输入y确认下即可关闭。
    6.Live-server可以在任意项目根目录下，打开终端窗口，然后输入live-server即可让当前项目在服务器上打开执行
    7.在以服务器打开的模式下，我们更改了文件内容后只要保存下，浏览器就会自动的刷新，而不需要我们显式的在浏览器里面刷新。
方式三：
    也可以安装http server插件，安装完成后按下f1,然后输入http会看到下面两个选项，选择with current file那个能够创建一个服务器运行当前文件。另外一个会找当前目录下的index.html,然后打开它。

选择一个后，会再让你选择在浏览器里面打开还是vscode里面打开。

其他
    你也可以全局安装此模块【cnpm install http-server -g 】
    安装到全局后：在终端里面输入hs就可以使用。

3. 插件安装

一直在用的几个插件，附图：