Ubuntu安装VSCode以及常用快捷操作

最近在学习一些前端开发的知识，使用了Visual Studio Code，记录一下。

环境

• Ubuntu 20.04
• VSCode：1.67.2

安装

访问 https://code.visualstudio.com/ ：

网站会自动识别你的操作系统，并推荐对应的下载包。本例中使用的是Ubuntu Linux，所以默认提供了Linux下的 .deb 和 .rpm 两种安装包。对于Ubuntu，当然是使用 .deb 安装包了。

下载VSCode安装包，我下载的是 code_1.67.2-1652812855_amd64.deb 文件。

使用 sudo dpkg -i code_1.67.2-1652812855_amd64.deb 安装：

➜  Downloads sudo dpkg -i code_1.67.2-1652812855_amd64.deb
[sudo] password for ding: 
Selecting previously unselected package code.
(Reading database ... 237378 files and directories currently installed.)
Preparing to unpack code_1.67.2-1652812855_amd64.deb ...
Unpacking code (1.67.2-1652812855) ...
Setting up code (1.67.2-1652812855) ...
Processing triggers for desktop-file-utils (0.24-1ubuntu3) ...
Processing triggers for gnome-menus (3.36.0-1ubuntu1) ...
Processing triggers for mime-support (3.64ubuntu1) ...
Processing triggers for shared-mime-info (1.15-1) ...

安装过程很快，安装好以后，就能在 Applications 里找到它了。点击右键， Add to Favorites ，把它固定到docker栏，以后就方便使用了。

VSCode快捷操作

open in browser

打开VSCode，点击左边的 Extensions 图标，搜索 open in browser ，安装之，如下：

现在，在VSCode里点击右键，菜单就有 Open In Default Browser 和 Open In Other Browsers 选项了。

但是，如果选择 Open In Default Browser ，会报错说 Open browser failed!! Please check if you have installed the browser correctly! 原因是需要在插件里设置一下默认浏览器。

点击 open in browser 插件右边的齿轮图标，选择 Extension Settings ：

然后填入默认浏览器名称即可，比如 Firefox ：

现在，就可以在VSCode里点击右键，选择用浏览器打开文件了。

Auto Rename Tag

对于html的标签，当修改 <xxx> 时，希望 </xxx> 也联动修改，可以安装 Auto Rename Tag 这个插件。

注：VSCode已经自带这个功能了，叫做 editor.linkedEditing （在设置里搜索它），不知道是不是最新版的VSCode才有的。

Emmet语法

通常HTML文件中有大量重复繁琐的代码，Emmet能帮助我们简化编写代码的工作。

• 输入 ! ，然后按Tab键，就会生成HTML文件骨架。
• 输入 div ，然后按Tab键，就会生成 <div></div>
• 输入 div*3 ，然后按Tab键，就会生成3行 <div></div>
• > 表示父子关系。输入 ul>li ，然后按Tab键，就会生成 <ul><li></li></ul>
• + 表示兄弟关系。输入 div+p ，然后按Tab键，就会生成 <div></div><p></p>
• 输入 .xxx ，然后按Tab键，就会生成 <div class="xxx"></div>
• 输入 #xxx ，然后按Tab键，就会生成 <div id="xxx"></div>
• 输入 p.xxx ，然后按Tab键，就会生成 <p class="xxx"></p>
• 输入 p#xxx ，然后按Tab键，就会生成 <p id="xxx"></p>
• $ 表示自增值（从 1 开始）。输入 .xxx$*3 ，然后按Tab键，就会生成：

    <div class="xxx1"></div>
    <div class="xxx2"></div>
    <div class="xxx3"></div>

• {} 表示包含的内容。输入 p{xxx} ，然后按Tab键，就会生成 <p>xxx</p>
• {} 结合 $ ，可以生成自增的内容。输入 p{xxx$}*3 ，然后按Tab键，就会生成：

    <p>xxx1</p>
    <p>xxx2</p>
    <p>xxx3</p>

Emmet语法也可以快速生成css代码，比如 w200 生成 width: 200px; ， bgs300 生成 background-size: 300px; 等等。相对于快速生成HTML标签来说，快速生成css代码更简单一些，因为它就类似于关键字查询，在你打字的时候，提示信息里就会提供满足条件（也就是包含你所输入的关键字）的选项。

列操作

对于刚才生成的：

    <p>xxx1</p>
    <p>xxx2</p>
    <p>xxx3</p>

现在要把 1 、 2 、 3 变成 100 、 200 、 300 ，如果逐个修改，很麻烦，这时可以通过列操作来做，快捷简单。具体方法为，先把光标放在 1 处，然后按 Shift 键加 Alt 键不放，同时按 下箭头 键，光标就会变成跨多行的，此时再输入 00 ，就会在光标所在的每一行都输入 00 。删除文本也同理。