1、SCSS环境配置
第一步：安装ruby环境并使用gem install sass 安装sass（国内访问较慢，最好翻墙安装），如果不能翻墙则可以更换源路径
更换方式：
gem sources --remove https://rubygems.org/复制代码
gem sources -a http://gems.ruby-china.com/复制代码
或者
gem sources -a https://gems.ruby-china.com/复制代码
gem install sass复制代码
第二步：在WebStrom编辑器中选择File->Settings->File Watchers添加SCSS配置项
第三步：修改下面两个地方：
'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileNameWithoutExtension$.css复制代码
另一处：
'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map复制代码
修改完保存，现在新建'style.scss'后就会自动生成'style.css'和'style.css.map'
碰到的问题以及解决方法：
问题1：如果想把SCSS源文件与生成后的CSS和map文件分开目录，则如下设置：
'Arguments': --no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css复制代码
问题2：如果编译不了，并出现乱码问题：
找到ruby的安装目录并找到sass模块，修改文件目录下的 （C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass ）
engine.rb这个文件，在所有的require XXXX 之后添加Encoding.default_external = Encoding.find('utf-8')复制代码 即可 。
问题3：默认生成的csss是nested模式的，如果想换成其他模式（expanded、compact、compressed）怎么换？
Arguments:--no-cache --update --sourcemap --watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css --style compact复制代码
几种模式效果如图所示：
2、ES6环境配置
第一步：全局安装babel-cli
cnpm install -g babel-cli复制代码
第二步：在项目下执行命令npm init 创建一个package.json文件
npm init 复制代码
第三步：项目目录下安装babel-preset-es2015
npm install babel-preset-es2015 --save-dev复制代码
第四步：在IDE中选择File-->Settings-->Languages&Frameworks-->JavaScript JavaScript language version 选择ECMAScript 6.
第五步：File-->Settings-->Tools-->Files Watchers 中加上Babel，配置Babel解析
第六步：修改生成路径
Arguments改为：
--source-maps --out-file $FileParentDir$\compiled\$FileNameWithoutExtension$.js --presets es2015 $FilePath$复制代码
Output paths to refresh 改为：
$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map复制代码