FECS -- 百度前端代码风格工具套件

---

FECS 是基于 Node.js 的前端代码风格工具套件，包含对 JavaScript、CSS 与 HTML 的检查及格式化。

• 安装FECS以及sublime插件
• 代码检查
• 代码格式化
  官方github说明

Mac下FECS以及sublime插件安装说明

$ [sudo] npm install fecs -g

//没了..就是那么简单
//fecs -v能看到版本就是安装成功了

接下来我们来装sublime插件(Baidu-FE-Code-Style（下载地址），也可以直接使用命令)

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/
git clone https://github.com/leeight/Baidu-FE-Code-Style.git
chmod -R 777 Baidu-FE-Code-Style/

//一定要开读写权限，755就够了

装完插件记得配置node和fecs的环境变量 Preferences -> Package Settings -> Baidu-FE-Code-Style -> Settings -User。

{
  "env": {
    "fecs_bin": "/usr/local/bin/fecs",
    "node_bin": "/usr/local/bin/node"
  }
}
//填写系统路径

---

FECS的代码检查功能

$ fecs check [target...]

$ fecs check [target...] --type=js,css

$ fecs check [target...] --type=html

//[target...]为目录名称

结果

以上省略一万行...
fecs ERROR → line 134, col 2: Newline required at end of file but not found. //书写不规范的地方
fecs  INFO Linter found 24,517 errors in 93 of 100 files.
//文件数、错误数
[email protected]: 8216ms //耗时

---

FECS的代码格式化功能

$ fecs format [target...]

$ fecs format [target...] --type=js,css

//[target...]为目录名称

//Input

cd /Applications/XAMPP/htdocs/cli-im-new/Fist/static/
fecs format css --type=css

$$在当前目录下生成了一个output文件夹，用于存放格式化后的文件$$

百度声明：目前对 HTML 代码的格式化的实现还处于测试阶段，不建议使用时作自定义配置。（所以批量代码格式化功能目前目测只能用于格式化HTML与css，不敢去替换js）

---

作者 @郑小明
2016 年 08 月 15 日