Skip to content

CSShint

Jump to bottom Edit New page
chris edited this page May 12, 2016 · 10 revisions

CSSHint

FECS 对 CSS 的检查是基于 EFE 团队王磊 专门针对我们的 CSS 编码规范 打造的 CSSHint。

使用方式

最常用的方式就是直接调用fecs，此时会递归的扫描当前目录下面的所有的 JavaScript、CSS 和 HTML 文件（默认已经忽略 node_modules, bower_components 目录），然后依次调用 CSSHint 检查得到的 CSS 文件。

如果想要忽略某些文件或目录，可以使用 ignore 参数执行，例如：

$ fecs --ignore='**/cli/**'

同时也可以使用 .fecsignore 文件来配置类似 Git 方式的 .gitignore 忽略规则。

另外，需要同时检查多个目录时，可以这样：

$ fecs dir1 dir2

可以指定只检查 CSS 文件：

$ fecs dir1 --type=css

如果觉得默认显示的英文提示不易懂，或者需要看我们对应的规范定义，可以指定 reporter 参数为 baidu：

$ fecs --reporter=baidu

默认规则

  1. https://github.com/ecomfe/node-csshint/blob/master/lib/config.js
  2. https://github.com/ecomfe/fecs/blob/master/lib/css/csshint.yml

由于部分规则无法实现，加上时间关系，目前对规范的覆盖率只有 62%，以下规则尚未实现：

  • require-after-linebreak
  • group-properties 
  • font-family-space-in-quotes, 
  • font-family-sort, 
  • unifying-font-family-case-sensitive

以上规则之后将达到 72%。

如果想查看检查结果对应的规则名称，可以在执行时使用 rule 参数：

$ fecs --rule

如何针对检查结果作修复

CSSHint 大部分给出的是关于代码风格方面的问题，一般没有特殊情况的话，需要全部都修复掉。对于确实无法修复或有足够理由不作修复的，可以使用 .csshintrc .fecsrc 来覆盖默认的配置（暂不支持文件内注释方式的规则）。

{
    "csshint": {
        "min-font-size": 10
    }
}

如果确定代码在当前场景下合理，可以针对当前文件使用以下语法禁止指定的规则 (需要 [email protected] 以上版本支持)：

/* csshint-disable rule1[,rule2,...] */

后续将实现 format 命令来修复大部分代码风格上的问题。

// Learn TypeScript: // - https://docs.cocos.com/creator/manual/en/scripting/typescript.html // Learn Attribute: // - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html // Learn life-cycle callbacks: // - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

import AssetMgr from './framework/AssetMgr'; import AudioMgr from './framework/AudioMgr'; import EventMgr from './framework/EventMgr'; import ObjectPoolMgr from './framework/ObjectPoolMgr'; import TimerMgr from './framework/TimerMgr'; import UIMgr from './framework/UIMgr'; import Instance from './framework/utils/Instance'; import PropMgr from './logic/common/PropMgr'; import UserInfo from './logic/common/UserInfo'; import ArtDataMgr from './logic/data/ArtDataMgr'; import ConfigArtGroupMgr from './logic/data/ConfigArtGroupMgr'; import ConfigArtMgr from './logic/data/ConfigArtMgr'; import ConfigMgr from './logic/data/ConfigMgr'; import SaveDataMgr from './logic/data/SaveDataMgr'; import HttpLogicMgr from './logic/net/HttpLogicMgr'; import GridMgr from './logic/painting/GridMgr'; import PaintingGridDataMgr from './logic/painting/PaintingGridDataMgr'; import PaintingPaletteDataMgr from './logic/painting/PaintingPaletteDataMgr'; import StarBlinkEffectMgr from './logic/ui/effects/StarBlinkEffectMgr';

const { ccclass, property } = cc._decorator;

@ccclass export default class App extends cc.Component { static UIRoot: cc.Node = null; static timerMgr: TimerMgr = null; static eventMgr: EventMgr = null; static assetMgr: AssetMgr = null; static uiMgr: UIMgr = null; static poolMgr: ObjectPoolMgr = null; static httpMgr: HttpLogicMgr = null; static audioMgr: AudioMgr = null; static userInfo: UserInfo = null; static gridMgr: GridMgr = null; static paintingPaletteDataMgr: PaintingPaletteDataMgr = null; static saveDataMgr: SaveDataMgr = null; static paintingGridDataMgr: PaintingGridDataMgr = new PaintingGridDataMgr(); static propMgr: PropMgr = null; static artDataMgr: ArtDataMgr = null; private static configMgr: ConfigMgr = null; static configArtMgr: ConfigArtMgr = null; static configArtGroupMgr: ConfigArtGroupMgr = null;; /** * 测试网络开关 / static isOpenNetwork: boolean = true; /* * 是否是链接本地 / static isLocalNetwork: boolean = true; /* * 是否开启网络log */ static isOpenNetworkLog: boolean = true;

async onLoad() {
    App.UIRoot = cc.find('Canvas/UIRoot');
    // cc.debug.setDisplayStats(false);
    // cc.game.setFrameRate(30)
    // 注册单例
    App.eventMgr = Instance.get(EventMgr);
    App.timerMgr = Instance.get(TimerMgr);
    App.assetMgr = Instance.get(AssetMgr);
    App.poolMgr = Instance.get(ObjectPoolMgr);
    App.httpMgr = Instance.get(HttpLogicMgr);
    App.audioMgr = Instance.get(AudioMgr);
    App.userInfo = Instance.get(UserInfo);
    App.paintingGridDataMgr = Instance.get(PaintingGridDataMgr);
    App.paintingPaletteDataMgr = Instance.get(PaintingPaletteDataMgr);
    App.propMgr = Instance.get(PropMgr);
    App.saveDataMgr = Instance.get(SaveDataMgr);
    App.artDataMgr = Instance.get(ArtDataMgr);
    App.gridMgr = Instance.get(GridMgr);


    /** ----初始化数据库 */
    const dbOk = await App.saveDataMgr.init(UserInfo.PaintingDataKey);// 增加新的数据表需要同时修改版本号
    console.log('dbOk = ' + dbOk);
    // App.userInfo.clearAllDatas()

    /** ----加载数据 */
    App.userInfo.loadData();


    /** ----初始化ui管理 */
    // 注册事件监听
    App.eventMgr.registerOwner(UIMgr);
    // 初始化ui管理类
    App.uiMgr = Instance.get(UIMgr).init(App.UIRoot);

    /** ----加载art数据 编辑器生成的 */
    await App.artDataMgr.loadData();
    await this.cacheViews(['PaintingView']);

    /** ----初始化configs */
    App.configMgr = Instance.get(ConfigMgr);
    await App.configMgr.loadConfig('dataConfigs');

    App.configArtGroupMgr = Instance.get(ConfigArtGroupMgr).init(App.configMgr.getTable('artGroup'));
    App.configArtMgr = Instance.get(ConfigArtMgr).init(App.configMgr.getTable('art'));


    /** ----初始化tile缓存 */
    let prefab = await App.assetMgr.load('prefabs/TiledTile', cc.Prefab);
    App.poolMgr.createObjectPool('TiledTile', (prefab as cc.Prefab), 110 * 110 * 4);

    prefab = await App.assetMgr.loadPrefab('prefabs/StarArrayEffect');
    App.poolMgr.createObjectPool('StarArrayEffect', (prefab as cc.Prefab), 110 * 110 * 4);

    prefab = await App.assetMgr.loadPrefab('prefabs/StarBlinkEffect');
    App.poolMgr.createObjectPool('StarBlinkEffect', (prefab as cc.Prefab), 300);


    /** ----进入游戏 */
    App.uiMgr.showView('HomeBottomView', 0);
    cc.game.setFrameRate(30);
}
private async cacheViews(names: string[]) {
    for (let index = 0; index < names.length; index++) {
        const name = names[index];
        const Prefab = await App.assetMgr.load(`ui/${name}`, cc.Prefab);
        App.poolMgr.createObjectPool(name, (Prefab as cc.Prefab), 1);
    }
}
update(dt) {
    App.timerMgr.update(dt);
}
/**
 * 显示绘制界面
 * @param data
 */
static async GotoPainting(data: any) {
    App.userInfo.paintingRecord(data.id);
    App.userInfo.saveData();
    await App.uiMgr.showView('PaintingView', data);
    App.uiMgr.hideView('HomeBottomView');
    App.uiMgr.hideView('CutImageView');
    // cc.game.setFrameRate(60);
}
/**
 * 回到主界面
 */
static async GotoHome() {
    if (!App.uiMgr.isViewShow('HomeBottomView')) {
        await App.uiMgr.showView('HomeBottomView');
    }
}

}

Add a custom sidebar
Clone this wiki locally