在开发代码时,通常需要配置一些额外的代码质量校验工具来保证代码质量,像我们这边使用的就是fecs。因为平常都是用Webstorm来开发,正好fecs有提供这样的插件,用起来却也很方便。

安装

  1. 把代码下载或者git clone到本地某个目录
  2. 然后全局安装fecs, npm i -g fecs
  3. 然后修改jscs的配置, 目录指向下载的Baidu-FE-Code-Style即可
  4. 然后可能还需要指定一个jscs的配置文件,可以在Baidu-FE-Code-Style下新建一个.jscsrc文件,内容随意一个json就行,fecs并不会用到这个配置,我配置的是:
    1
    2
    3
    {
    "preset": "airbnb"
    }

原理

每次文件文件有变更时,会执行Baidu-FE-Code-Style工程目录下的[bin/jscs](https://github.com/leeight/Baidu-FE-Code-Style/blob/master/bin/jscs), 最主要的代码:

1
2
3
spawn('fecs',
['--silent', '--reporter=baidu', '--format=checkstyle', file],
{stdio: 'inherit'});

即执行全局的fecs命令,--fotmat=checkstyle是指输入符合webstorm规范的xml形式的检测结果,内容大致为:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<checkstyle version="4.3">
<file name="/Users/xxx/project/util.js" count="1">
<error line="107" column="24" severity="error" source="fecs" message=" JS021: [强制] 不得省略语句结束的分号。" rule="semi"/>
</file>
</checkstyle>

webstorm会根据error标签中的信息展示相关的提示。

其他

由于webstorm只支持给统一设置检测错误提示的颜色,所以这里没有办法根据severity的不用取值,例如error, warning等展示不同的颜色。

扩展阅读

leeight/Baidu-FE-Code-Style

Contents
  1. 1. 安装
  2. 2. 原理
  3. 3. 其他
  4. 4. 扩展阅读