抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

VSCode 简介

Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT 等特性，支持插件扩展等等。

推荐理由：

  • 比 sublime 开源，比 webstorm 更轻

  • 智能提示很强大

  • 自带 emmet

  • 插件安装非常方便

  • 自带强大的调试功能

  • 软件跨平台支持 Win、Mac 以及 Linux。

VSCode 安装

官网下载地址： https://code.visualstudio.com/

安装步骤：默认傻瓜式安装，直接下一步即可。

  • 如果需要改变默认的安装路径，在选择目标位置时直接修改即可。

  • 为方便以后使用，建议创建桌面快捷方式。

VSCode 使用

文件目录管理

  • 选择File，然后选择Open Folder，打开文件夹。

  • 界面主要分为EXPLORER（资源管理界面）和代码编辑页面。

颜色主题

  • 设置首选项按钮 – Color Theme
  • 在弹出的选择主题界面，选择喜欢的主题界面即可。其中Monokai是与sublime一致的风格。

其他操作

  • 放大缩小视图：ctrl + 加号 和 ctrl + 减号

  • 向上复制一行：alt+shift+↑

  • 向下复制一行：alt+shift+↓

  • 当光标点击到某一行时，默认选中全行，可以直接复制粘贴

VSCode 插件

安装方法

点击左侧《扩展》图标，在搜索框输入需要安装的插件名称，点击install进行安装即可。安装完毕，需要重新加载软件使插件生效。

推荐安装的插件

插件 作用
Chinese (Simplified) Language Pack for VS Code 中文（简体）语言包（安装后重启）
Open in Browser 右击选择浏览器打开html文件
JS-CSS-HTML Formatter 每次保存，都会自动格式化js css 和html 代码
Auto Rename Tag 自动重命名配对的HTML / XML标签（更改前标签，后标签自动变）
CSS Peek 追踪至样式
Monokai Pro 一款漂亮的主题
Path Intellisense 自动补全引入文件路径
Vetur JS代码格式化

注意：插件安装需要联网。

快捷键

Shift+ Alt+ ↓：快速复制本行到下一行

禁用或卸载已安装的插件

在扩展界面，点击“更多操作”（三个点），选择“显示安装的扩展”，在列表中找到需要禁用的插件，点击“禁用”或者“卸载”即可。同样操作完毕需要重新加载生效。

使用Remote SSH连接远程服务器

  1. 安装插件Remote SSH；
  2. 点击窗口左下角远程连接图标（可能需要重启软件生效）；
  3. 选择Connect to Host；
  4. 选择Configure SSH Hosts；
  5. 打开第一个选项；
  6. 编写文件如下格式：
1
2
3
Host 连接名称
    HostName 服务器地址
    User 用户名

编写完成后，保存文件，输入密码即可访问远程服务器。

用了之后有个问题，一旦成功连接SSH服务器CPU立马100%，断开SSH也没有效果，只能重启服务器，无语了，还不如用软件麻烦点算了。

VSC调试运行JS

在VSC编写完JS代码，如果在放到浏览器中运行检查太过于麻烦，可以借助Node.js与Code Runner插件实现在VSC中运行JS代码。Node.js的安装可以查看docsify学习笔记，安装完成后，在VSC中安装插件Code Runner：

安装完毕之后可以在VSC中直接右键运行JS代码或者使用快捷键Ctrl + Alt + N。