vscode使用插件和快捷总结

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40190624/article/details/79515090

官网: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。
east

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

一般生产环境中用到其中两个设置项(上图红框处中的代码):

/** 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 文件(见下图)。
生成css路径

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

S-CSS-HTML Formatte

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

展开阅读全文

没有更多推荐了,返回首页