vscode使用插件和快捷总结

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

简介

VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。VSCode推荐一个项目以文件夹的方式打开。

一、设置首选项

下载安装完成后，打开编辑器，首先要设置主题、字体大小等。

1. 设置主题

文件→首选项→颜色主题

2. 设置字体大小

文件→首选项→设置，打开了一个setting.json文件，将左边的设置复制到右边进行覆盖生效，所有编辑器的设置都在这里修改。 

二、Emmet插件

最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能 

三、快捷键

所有快捷键设置：文件→首选项→键盘快捷方式 
1. 在当前行中间换行到下一行：ctrl+enter 
2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切 
3. 直接删除某一行：shift+delete或者ctrl+shift+k 
4. 多行光标选择：alt+鼠标左键 
5. 自动生成html结构和meta声明：首先输入“!”，然后按tab键 
6. 标签自动补全：tab键 
7. 折叠所有代码：ctrl+k、ctrl+0 
8. 拆分编辑器：ctrl+\ 
  查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则 
 
9. 跳转行号：ctrl+G 
10. 添加函数注释：在函数上方输入“/**”，然后点击enter 
 
11. 格式化：alt+shift+f 
12. 注释：ctrl+/ 
13. 全部保存：ctrl+k, 然后只按s一个键 
14. 向上移动一行：alt+↑ 
15. 向下移动一行：alt+↓ 
16. 向上复制一行：alt+shift+↑ 
17. 向下复制一行：alt+shift+↓ 
18. 查找：ctrl+F 
19. 替换：ctrl+H 
20. 文件中查找：ctrl+shift+f 
可以在打开的文件夹中搜索所有文件内容 
21. 文件中替换：ctrl+shift+h 
22. 转到定义：F12 
23. 转到实现：ctrl+F12 
24. 打开文件夹：ctrl+k, ctrl+o 
25. 关闭文件夹：ctrl+k, 然后单按一个f 

26. 选中一段代码，通过“ctrl+[”可以左移，“ctrl+]”可以右移

open in browser

插件功能描述：从浏览器中查看html文件，使用系统的当前默认浏览器

Atuo Rename Tag

修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些bug。

fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

Live Sass Compiler

 

vscode--搭建自动编译sass环境

一，安装插件及使用步骤

1、vscode安装Live Sass Compiler，由于该插件依赖Live Server ，所以会自动安装Live Server

2、点击vscode底部的Watch my Sass

3、按F1键，在输入栏中输入Live Sass: Watch Sass来监听Sass文件（ Live Sass: Stop Watching Sass 停止监听文件）

4、同样在输入栏中输入 Live Sass: Compile Sass - Without Watch Mode，就会自动编译scss文件为css文件

二，配置编译规则

1、在项目的根目录下创建一个文件夹，命名为 .vscode(只能通过Linux命令创建)，并且在该文件夹下面创建一个文件settings.json

2、配置settings.json

1 {
2 "liveSassCompile.settings.savePath": "./dist/css",//指定编译完的css文件路径
3     "liveSassCompile.settings.format": "expanded",//指定编译css的样式类型，有这四种 expanded（默认）, compact, compressed or nested
4     "liveSassCompile.settings.extensionName": ".css",//指定编译完的文件后缀名，.css为普通代码，.min.css为压缩代码
5     "liveSassCompile.settings.excludeFolders": [
6         "**/node_modules/**",//指定忽略的文件
7         ".vscode/**"
8     ]
9 }

三、其他注意事项

如果要对多个文件进行监听和编译，那么只要重复操作一，安装插件及使用步骤》的2/3/4步骤。（每个scss文件只要操作一次，以后一旦保存，就会自动编译）

Easy Sass

安装 Ruby 时一定要勾选 Add Ruby executables to your PATH，用来将 Ruby 添加到系统变量，这样后续可以省却很多不必要的麻烦。装好后在命令行输入 gem sass 来安装 Sass，安装完成后启动 VSCode，在拓展商店里搜索“easy sass”，并安装，安装成功后重启 VSCode。

接下来进行配置。在 VSCode 菜单栏依次点击“文件 首选项 设置”，打开 settings.json 全局配置文件。搜索“easysass”，然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中，再根据实际情况修改配置项。

一般生产环境中用到其中两个设置项（上图红框处中的代码）：

/** Easy Sass 插件 **/
    "easysass.formats": [
        {
            "format": "compressed",  // 压缩
            "extension": ".css"
        }
    ],
    "easysass.targetDir": "./"  // 自定义css输出文件路径

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

其中 easysass.formats 是设置编译输出的 css 风格的，可以同时编译输出多个不同风格的 CSS 文件，此处我只设置了一个 easysass.formats 项目，所以编译时只生成一个 CSS 文件。

easysass.formats[i].format 支持四个选项用以编译生成对应风格的 CSS：
　　 nested：嵌套缩进的 css 代码。
　　 expanded：没有缩进的、扩展的css代码。
　　 compact：简洁格式的 css 代码。
　　 compressed：压缩后的 css 代码。
easysass.formats[i].extension 顾名思义就是设置编译输出的文件名了，此处可以自定义文件名，输出的 CSS 文件名会按照“当前 Sass 文件名（不含拓展名）+此处自定义文件名”的格式来生成。例如：设置 easysass.formats[i].extension 为 ".min.css"，假设当前的 Sass 文件名为“style.scss”，则编译输出的 CSS 文件名为“style.min.css”。

我们的生产环境中，在很多情况下 Sass 文件和 CSS 文件是不在同一个目录下的，而Easy Sass 默认输出的 CSS 是和当前 Sass 文件处于相同目录的，为此我们需要配置输出路径。

easysass.targetDir 提供 CSS 输出路径的设置，值可以是绝对路径或相对路径。例如：设置 easysass.targetDir 为 "./css/"，此时保存修改完毕的 Sass 文件，VSCode 会自动编译并在当前 Sass 文件的上级文件夹 css 目录下输出生成 CSS 文件（见下图）。

本文所述的只是采用 VSCode 编辑器编译生成 CSS 的一种方式，可能比较原始，实际生产环境中大多采用自动化构建方案，比如 grunt、gulp、fis 等。

S-CSS-HTML Formatte

安装JS-CSS-HTML Formatter 右键格式化文件