webstorm（Mac环境下）配置sass，jade, 自定义代码块

一、安装及配置sass

SASS是Ruby语言写的，安装sass必须先安装Ruby，mac下自带Ruby，通过命令 ruby -v  查看当前是否已安装ruby：

国外的镜像较慢，这里更改镜像源，然后下载安装

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/  // 淘宝镜像停止维护 使用下边

gem sources -a https://gems.ruby-china.com  

# 查看当前源 
gem sources -l 

# 提权安装 

sudo gem install sass

安装完sass后，通过命令 sass -v 查看是否安装成功：

配置webstorm自动编译sass

打开webstorm，快捷键： commond + , 打开preferences

            

webstorm会自动识别出sass的安装目录，确定即可

Program:  /usr/local/bin/sass

Arguments: --no-cache --update $FileName$:$FileNameWithoutExtension$.css

Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

 

二、安装及配置jade

全局安装jade

npm i jade -g

这里使用的是淘宝镜像的 cnpm ，使用的是nvm管理的npm，这里需要记下全局安装的路径，如图

在webstorm中配置jade，同sass的配置，打开preferences，其中的Program就是上图中的路径

 三、webstorm自定义代码块（快捷方式）

command + ，打开设置，后搜索 live templates ，可以先参考下自带的一些快捷方式，

举个🌰：

选中 JavaScript 点击右边的 + 号，

 填写快捷方式，说明及代码块后，点击Defined

点击ok，就可以在写js的时候出现快捷方式了。

《完》