基于Visual Studio Code 编译Scss和Souce map协议

微软公司发布的著名软件,开源、跨平台,已经日益成为开发者最偏爱的工具,我们来指引使用vs code进行Scss编译。

安装ruby与sass环境

诚然,vs code中提供了丰富的插件,都能提供scss的编译,但是如果追求性能并同步生成source map,则部署ruby是关键一环,关于什么是Source map请移步这里浏览。

sass依赖于ruby环境,所以装sass之前先确认装了ruby,从而支持实时编译与更新sass。ruby官网下载地址:http://rubyinstaller.org/downloads/,直接下载“WITH DEVKIT”的版本,或在我的网盘下载(64位):https://share.weiyun.com/53Fvb8Y,安装完成弹出命令行窗口,选择3回车就能完成安装,安装完整教程可点此浏览,接下来三步操作。

#1-查看是否安装成功,如能正确显示ruby版本号,表明安装成功:
ruby -v
#2-安装ruby环境运行的gem源淘宝镜像:
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
#3-安装sass:
gem install sass
gem install compass

安装成功后,同样可通过sass -v检测是否安装成功,若能显示版本号则表示安装成功。

Sass编译基本设定

这步是实现.scss向.css格式转换的关键。进入到编译文件所在的目录底下,编译命令如下:

sass input.scss output.css
sass编译

Sass编译参数选择

你可能需要更加能的模式,比如自动侦测伺服,自动加上各种参数,不要急下面为你一一道来。

1、wath伺服侦测自动编译程式

动态编译(即当.scss改变就会马上编译成.css文件),需要增加--watch参数,启用伺服器,编译命令如下:

 sass --watch input.scss:output.css
动态编译

多文件或目录伺服式编译:

#从aa目录自动编译到dd目录覆盖全目录
sass --watch aa:dd

#从aa目录自动编译到cc目录只输出output.css文件
sass --watch aa:cc/output.css
多文件或目录伺服式编译-全目录覆盖 从aa目录自动编译到cc目录只输出output.css文件

2、输出Css代码样式选择

众所周知css代码可以有多种形式,如一行一个属性,或是大站模式的多属性合并一行,甚至整个css样式表合为一行以做到最大化压缩。
其四种模式: 编辑出来的文件有四种排版可配置,分别是nested、expanded、compact和compressed。以expanded为例,配置时只需在命令行末尾加入--style expanded即可。

sass --watch input.scss:output.css --style expanded
nested模式

↑ nested:嵌套模式,每个属性占一行,会有嵌套缩进规范,默认程式。

expanded模式

↑ expanded:扩展模式,没有任何缩进。

compact模式

↑ compact:紧凑模式,每条规则占用一行,不区分属性占用一行,一般推荐此模式。

compressed模式

↑ compressed:压缩模式,尽可能的占用最小空间。

3、支持中文变量

默认ruby是不支持中文变量的,需要找到ruby目录(默认在C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\sass-3.7.4\lib\),用编辑器打开sass.ruby文件,在require XXXX 之后添加一行代码:

Encoding.default_external = Encoding.find('utf-8')
支持中文变量

3、Source map输出支持

仅仅支持sass编译其实作用有限,如果结合source map,则可以进行定点跟踪分析,效率就大大提升了。

#自动侦测伺服编译指定文件,会产生source map文件不需要另加参
sass --watch system.scss:system.css --style compact
#自动侦测伺服编译当前目录,会产生source map文件不需要另加参
sass --watch ..\:..\
#自动侦测伺服编译当前目录,会产生source map文件,且代码格式为紧致compact压缩
sass --watch ..\:..\ --style compact

关于Source map技术可以点此了解:
什么是Source map?.Map文件是什么,它的作用是什么?JQurey中的Source map使用技术放送 www.z01.com/help/web/3207.shtml

启动Visual Studio Code

依赖于微软精湛的软件集成技术,其Visual Studio Code工具一推出,就以开源、开放、跨平台、性能卓越赢得广大开发者的心声,成为热门的开发工具,开发者只要访问https://code.visualstudio.com/就能快速下载部署,启动开发。

1、vs code自动换行

vs code如何换行?

文件 -> 首选项 -> 设置 -> 编辑器

找到 // 控制折行方式。可以选择: - “off” (禁用折行), - “on” (视区折行), - “wordWrapColumn”(在“editor.wordWrapColumn”处折行) 或 - “bounded”(在视区与“editor.wordWrapColumn”两者的较小者处折行)。 "editor.wordWrap": "off", 在右侧把off换成on.

2、推荐几个vs code插件

vscode-icons:显示文件图标的插件工具。
SFTP:FTP管理文件插件。
Sass:如果你不需要输出source map,用这个插件完全可以解决sass编译问题。
Easy Sass:同上。
Debugger for Chrome:使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试.
TODO Highlight:备忘插件,简而言之你可以设置关键字所在的行高亮显示,用于备忘或演示代码有所裨益。

3、vs code技巧大全

启动命令行面板

在命令面板中你可以输入命令进行搜索(中英文都可以),然后执行。
命名面板中可以执行各种命令,包括编辑器自带的功能和插件提供的功能。 所以一定要记住它的快捷键Cmd+Shift+P

命令面板是vscode快捷键的主要交互界面,可使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打开。
启动命令行面板 用命令打开文件或文件夹
code 文件夹地址  # vscode会在新窗口中打开该文件夹
code 文件名称 -r  # vscode打开该文件开始编辑
用命令打开文件或文件夹 光标的移动

基础

  1. 移动到行首 Cmd+左方向键 (win Home)
  2. 移动到行尾 Cmd+右方向键 (win End)
  3. 移动到文档的开头和末尾 Cmd+上下方向键 (win Ctrl+Home/End)
  4. 在花括号{}左边右边之间跳转 Cmd+Shift+ (win Ctrl+Shift+)

进阶

  1. 回到上一个光标的位置,Cmd+U(win Ctrl+U) 非常有用,有时候vue文件,你改了html,需要去下面改js,改完js又需要回去,这时候Cmd+U直接回
  2. 在不同的文件之间回到上一个光标的位置 Control+- (win 没测试,不知道),你改了a文件,改了b文件之后想回到a文件继续编辑,mac使用controls+-
文件选择
  1. 你只需要多按一个shift键就可以在光标移动的时候选中文本
  2. 选中单词 Cmd+D 下面要讲的多光标也会讲到Cmd+D
  3. 对于代码块的选择没有快捷键,可以使用cmd+shift+p打开命令面板,输入选择括号所有内容,待会说下如何添加快捷键
光标操作 快速删除文本内容
  1. 你可以选中了代码之后再删除,再按Backpack(是backpack吗)或者delete删除,但是那样做太low了
  2. 所以,最Geek的删除方式是Cmd+Shift+K (win Ctrl+Shift+K),想删多少删多少,当前你可以使用ctrl+x剪切,效果一样的
快速删除文本内容 代码块移动
  • Option+上下方向键(win: Alt+上下)
代码块移动
  • 代码移动的同时按住shift就可以实现代码复制 Option+Shift+上下
代码块移动时复制 添加注释 注释有两种形式,单行注释和块注释(在js中,单行注释//,块注释/**/)
  1. 单行注释 Cmd+/ (win Ctrl +/)
  2. 块注释 Option+Shift+A
代码格式化
  • 对整个文档进行格式化:Option+Shift+F (win Alt+Shift+F),vscode会根据你使用的语言,使用不同的插件进行格式化,记得要下载相应格式化的插件
  • 对选中代码进行格式化: Cmd+K Cmk+F win(Ctrl+K Ctrl+F)
代码缩进
  • 整个文档进行缩进调节,使用Cmd+Shift+P打开命令面板,输入缩进,然后选择相应的命令
  • 选中代码缩进调节:Cmd+] Cmd+[ 分别是减小和增加缩进(win:ctrl+[ ctrl+])
调整字符的大小写

选中要调整的代码,然后在命令面板输入转化为大写或者转化为小写

调整字符的大小写 合并代码行

合并代码行,多行代码合并为一行,Cmd+J(win下未绑定)

合并代码行 行排序

行排序,将代码行按照字母顺序进行排序,无快捷键,调出命令面板,输入按升序排序或者按降序排序

行排序 使用鼠标控制多光标

按住Option(win Alt),然后用鼠标点,鼠标点在哪里哪里就会出现一个光标
注意:有的mac电脑上是按住Cmd,然后用鼠标点才可以。

使用鼠标控制多光标 快速选词

Cmd+D (win Ctrl+D) 第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。(注:cmd-k cmd-d 跳过当前的选择)。这相当于双击鼠标选择一个词。

快速选词 快速定义光标到行尾

Option+Shift+i (win Alt+Shift+i) 首先你要选中多行代码,然后按Option+Shift+i,这样做的结果是:每一行后面都会多出来一个光标。这样你就可以在行尾进行编辑,也可以按Home键跳到行首编辑。

快速定义光标到行尾

撤销上面的光标,只要按下ESC或鼠标点任意一处。

快速打开文件

Cmd+P (win Ctrl+P)输入你要打开的文件名,回车打开.

快速打开文件

这里有个小技巧,选中你要打开的文件后,按Cmd+Enter,就会在一个新的编辑器窗口打开(窗口管理,见下文)

就会在一个新的编辑器窗口打开 行跳转

Ctrl+g 输入行号

行跳转 编辑指定文件特定行

如果你想跳转到某个文件的某一行,你只需要先按下 “Cmd + P”,输入文件名,然后在这之后加上 “:”和指定行号即可。

编辑指定文件特定行 符号跳转

符号可以是文件名、函数名,可以是css的类名
Cmd+Shift+O(win Ctrl+Shift+o) 输入你要跳转的符号,回车进行跳转
win下输入Ctrl+T,可以在不同文件的符号间进行搜索跳转

编辑指定文件特定行 定义(definition)和实现(implementation)处
  • f12跳到函数的定义处
  • Cmd+f12(win Ctrl+f12)跳转到函数的实现处
定义(definition)和实现(implementation)处 引用跳转

很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 Shift + F12,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

引用跳转 代码重构

当我们想修改一个函数或者变量的名字时候,我们只需把光标放到函数或者变量名上,然后按下 F2,这样这个函数或者变量出现的地方就都会被修改,一次全搞定。

代码重构