简介

这将是一个新的系列,将会以 Visual Studio Code(后文都简称为 VSCode 啦)的操作,环境配置,插件介绍为主,为大家不定期的介绍 VSCode 的一些操作技巧,所以取名 VSCode 小鸡汤,本篇将会介绍最基础的 VSCode 安装,以及 VSCode 中基本的编辑功能

VSCode 安装

既然是 VSCode 小鸡汤,那么 VSCode 就是必不可少的了,不然就是白水煮葱姜了(´▽`) ,在 VSCode 官网 可以找到对应系统的 VSCode 的下载或是安装

Windows 和 macOS

Windows 用户和 macOS 用户安装起来都比较容易,通过下载官方的安装程序或是 DMG 文件即可完成安装

Linux

Linux 向来都是折腾的代言,所以 Linux 的安装会比较麻烦,不过对于主流 Linux 发行版 VSCode 官方都提供了对应的软件源,只要版本不是太偏应该都很容易安装的,这里列举一些发行版的安装方法

下面大部分内容来自官方文档 Visual Studio Code on Linux

Debian 和 Ubuntu

在 Debian 和 Ubuntu 下最快捷简单的安装方式就是直接下载安装包 .deb package (64-bit) 通过图形界面或是命令行直接安装,使用安装包安装会自动安装软件源,这样以后也能自动升级,如果不使用包安装,那么可以手动添加软件源来安装

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

之后可以通过 apt-get install code 来完成安装,或者 apt-get install code-insiders 安装 insider 版本(更新更快的测试版)

sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install code # or code-insiders

RH 系 —— RHEL,CentOS,Fedora

先安装软件仓库

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

之后如果是 Fedora 22 以后的版本可以直接通过 dnf 来安装

dnf check-update
sudo dnf install code

如果是其他的(Fedora < 22,CentOS,RHEL)那么通过 yum 来安装

yum check-update
sudo yum install code

RH 系也可以直接下载 rpm 包安装,但是这样安装后不会安装软件参数,无法自动更新,所以并不推荐这样安装

OpenSUSE 系

先安装软件仓库

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ntype=rpm-md\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/zypp/repos.d/vscode.repo'

使用 zypper 安装

sudo zypper refresh
sudo zypper install code

ArchLinux

ArchLInux 有一个社区维护的 aur 包,可以直接安装

开始使用

安装完成后,大部分系统都会建立一个应用程序的启动器或者快捷方式,一般来说直接点击就可以打开了,打开后可以看到 VSCode 的主界面

接下来介绍下使用 VSCode 时一些必备的知识

Activity Bar

左边竖着的是 VSCode 的 Activity Bar,上面初始从上到下分别是“Explorer(文件浏览器)”,“Search(搜索)”,“Source Control(代码控制)”,“Debug(调试)”,“Extensions(插件)”五个功能,这五个功能也是 VSCode 的基础功能,在安装其他插件后可能会在 Activity Bar 上增加新的按钮

VSCode 的项目结构组织

没有打开任何项目的情况下,打开 Explorer 界面我们可以看到当前打开的文件,下面会提示我们还没有打开目录

VSCode 中,一般来说打开目录就相当于是一个项目,我们在打开目录后可以在 Explorer 界面进行文件的增删改操作,也可以通过快速打开功能打开当前打开目录下的文件,查找功能也会搜索当前打开目录下的所有文件

如果需要一次打开多个目录,那么可以在 Explorer 空白处右键菜单中选择“Add Folder to Workspace”添加新的目录

这时候 Explorer 会自显示 Workspace 下的所有项目

这时候同样快速打开,搜索功能,都会支持搜索所有在 Workspace 中的目录,同时会显示文件是属于哪个目录

.vscode 目录

在打开项目的情况下,如果在当前项目或者工作空间,有特定的设置,或者有调试设置,那么 VSCode 会在项目目录下面建立一个 .vscode 目录用于存放 VSCode 对于项目或是工作空间的特定设置

使用 ⌘ - ,Ctrl - ,)打开设置界面,其中 Workspace Setting 就是针对当前工作空间的设定

如果打开的工作空间有多个目录,那么还可以针对每个目录单独设定

终端

使用 ⌘ - `Ctrl - `)可以快速在当前工作路径打开终端,使用加按钮,可以打开新的终端,使用垃圾桶按钮可以关闭当前的终端,点击终端选择下拉器可以选择当前终端,点击叉只是隐藏底部的区域,并不会关闭

其他常用小技巧

  • 最近项目:在启动页面,如果之前打开过项目的话可以使用 Ctrl - r 选择最近打开的项目(文件夹或是工作空间)

  • 快速打开:使用 ⌘ - p 可以打开快速打开界面,可以通过名称快速的搜索当前工作空间下的所有文件,在快速打开的搜索框中输入 > 可以打开 Command Palette(命令窗口),输入 @ 可以搜索当前文件的符号,输入 # 可以按名称搜索整个项目的 Tag,这些是常用的,输入 ? 可以看到所有的功能

  • 对于 VIM 用户:强烈建议使用 Vim 插件,并且开启 EasyMotion

  • 换个文件图标主题:Material Icon Theme 看上去挺不错,不过偶尔也可以换换其他的

  • 换点颜色主题:VSCode 中有很多颜色主题,过段时间换一换,感受下不同的气氛和心情

结语

这是我给大家带来的第一碗 VSCode 小鸡汤,内容含量可能不是很高,主要以安装和简单配置和使用为主,后续会跟上一些使用上的技巧或是环境搭建之类的主题,希望本文能给大家搬砖生活带来一些帮助,写的不好的地方大家也别吝啬该丢砖就丢砖

VSCode 之类的现代文本编辑器,在插件的搭配下已经可以慢慢的在部分方面接近 IDE 了,我已经全面使用 VSCode 约两年左右,目前在项目开发上已经慢慢疏远了曾经最爱的 VIM,毕竟搭配 Vim 插件后,与 VIM 已经非常接近了,并且有很多开箱即用的工具,个人一直侍奉的原则就是使用合适的称手的工具,而不为了炫技一定要用什么

最后欢迎大家订阅我的微信公众号 Little Code

  • 公众号主要发一些开发相关的技术文章
  • 谈谈自己对技术的理解,经验
  • 也许会谈谈人生的感悟
  • 本人不是很高产,但是力求保证质量和原创

VSCode 小鸡汤 第00期 —— 安装和入门的更多相关文章

  1. VSCode 小鸡汤 第01期 - REST Client 简单好用的接口测试辅助工具

    介绍 今天给大家介绍一个后端开发辅助的好工具 -- REST Client,插件如其名这就是一个 REST 的客户端插件,把我们的 VSCode 转化为一个 REST 接口测试的利器 我们一般都会用 ...

  2. 微信小程序项目使用npm安装vant-weapp的正确步骤,简单易懂!!

    微信小程序项目使用npm安装vant-weapp的正确步骤 1.在当前小程序项目目录npm init -y 构建npm项目 2.运行命令 npm install vant-weapp -S --pro ...

  3. Apache Hadoop2.x 边安装边入门

    完整PDF版本:<Apache Hadoop2.x边安装边入门> 目录 第一部分:Linux环境安装 第一步.配置Vmware NAT网络 一. Vmware网络模式介绍 二. NAT模式 ...

  4. 【django入门教程】Django的安装和入门

    很多初学django的朋友,都不知道如何安装django开发以及django的入门,今天小编就给大家讲讲django入门教程. 注明:python版本为3.3.1.Django版本为1.5.1,操作系 ...

  5. 虚拟光驱 DAEMON Tools Lite ——安装与入门

    DAEMON Tools Lite 是什么?它不仅仅是虚拟光驱.是的,你可以使用它制作.加载光盘映像,但是 DAEMON Tools 产品那么多,Lite版与其他版本究竟有什么不同呢?或者说,是什么让 ...

  6. Tensoflw.js - 01 - 安装与入门(中文注释)

    Tensoflw.js - 01 - 安装与入门(中文注释) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...

  7. bower安装使用入门详情

    bower安装使用入门详情   bower自定义安装:安装bower需要先安装node,npm,git全局安装bower,命令:npm install -g bower进入项目目录下,新建文件1.tx ...

  8. [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍

    前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...

  9. 小代码编写神器:LINQPad 使用入门

    原文:小代码编写神器:LINQPad 使用入门 一:概述 1:想查看程序运行结果,又不想启动 VS 怎么办? 2:想测试下自己的 C# 能力,不使用 VS 的智能感知,怎么办? 那么,我们有一个选择, ...

随机推荐

  1. java.util.logging使用笔记2

      java.util.logging是java自带的日志处理系统,其功能不如log4j/logback强大,但可以完成基本的日志需求. 另外,如果在一个项目中使用log4j, 而这个项目引用的第3方 ...

  2. UVALive - 4960 Sensor network(生成树+LCA)

    题目大意:给出N个点.M条边.问这N个点形成的生成树的最大权值边-最小权值边的最小值 解题思路:先排序,然后按生成树的kruscal算法进行加边,再维护一个最小权值边 加边的时候要考虑一下加下去的边是 ...

  3. [AngularJS] Using an AngularJS directive to hide the keyboard on submit

    Pleasea refer to Link <form ng-submit="foo()" handle-phone-submit> <input type=&q ...

  4. js实现操作等待提示loading……

    js实现操作等待功能,防止重复提交,界面友好,底部为灰色遮罩层,防止用户重复操作. 先看效果图:   接着看js代码: //关闭等待窗口 function closeWaiting() { var b ...

  5. android环境安装

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...

  6. Android JNI编程(七)——使用AndroidStudio编写第一个JNI程序

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 1.简单介绍一下NDK和JNI NDK:NDK是Native Develop ...

  7. Django项目开发实例之我的博客

    1.开发环境 2.创建virtualenv 3.安装相关包 Django Pillow 4.创建项目 添加应用: 5.设置静态文件和模板 6.运行测试 参考(http://www.cnblogs.co ...

  8. css选择器指定元素中第几个子元素

    tr td:nth-child(2){ background-color:gray; } 就是tr当中的td的第二个td的属性 tr:nth-child(2n+0){ background-color ...

  9. udp网络程序-发送、接收数据

    1. udp网络程序-发送数据 创建一个基于udp的网络程序流程很简单,具体步骤如下: 创建客户端套接字 发送/接收数据 关闭套接字 代码如下: #coding=utf-8from socket im ...

  10. STL map 按key值和按value值排序

    map是用来存放<key, value>键值对的数据结构,能够非常方便高速的依据key查到对应的value. 假如存储水果和其单位价格.我们用map来进行存储就是个不错的选择. 我们这样定 ...