bixi/docs/style.zh-CN.md

企业级中后台前端解决方案

---
order: 2
title:
  en-US: Code Style
  zh-CN: 代码风格
type: Basic
---

## 命名风格

|       | 👎 Bad | 👍 Good |
| ----- | ---    |     --- |
| 常量   | `taskEvents` | `TASK_EVENTS` |
| 类     | `task` | `Task` |
| 类型   | `Task`、`Status` | `ITask`、`EStatus`|
| CSS    | `task-page_menu` | `task-page-menu` |
| 变量/方法 | `task_list` | `taskList` |
| 文件    |  `ediitTask.ts` | `edit-task.ts` |
| i18n    | `taskStatusStop` | `task_status_stop` |

## 配置文件

tslint.json 推荐配置

``` json
{
  "extends": "tslint:recommended",
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    "array-type": false,
    "arrow-parens": false,
    "deprecation": {
      "severity": "warn"
    },
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "interface-name": [true, "always-prefix"],
    "max-classes-per-file": false,
    "max-line-length": [
      true,
      150
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-consecutive-blank-lines": false,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-empty": true,
    "no-inferrable-types": [
      true,
      "ignore-params"
    ],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-use-before-declare": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [
      true,
      "as-needed"
    ],
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [
      true,
      "single"
    ],
    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
    "no-output-on-prefix": true,
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": false,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "curly": false,
    "variable-name": false,
    "no-any": true,
    "semicolon": [true, "always"],
    "directive-selector": [
      true,
      "attribute",
      [
        "app",
        "passport",
        "exception",
        "layout",
        "header",
        "auth",
        "shared",
        "chart",
        "upload"
      ],
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      [
        "app",
        "passport",
        "exception",
        "layout",
        "header",
        "auth",
        "shared",
        "chart",
        "upload"
      ],
      "kebab-case"
    ]
  }
}
```



stylelintrc.json 推荐配置

``` json
{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-css-modules",
    "stylelint-config-rational-order"
  ],
  "plugins": [
    "stylelint-order",
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "no-descending-specificity": null,
    "font-family-no-missing-generic-family-keyword": null,
    "plugin/declaration-block-no-ignored-properties": true,
    "selector-type-no-unknown": [
      true,
      {
        "ignoreTypes": [
          "/^nz-/",
          "/^app-/"
        ]
      }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": [
          "ng-deep"
        ]
      }
    ],
    "selector-class-pattern": "^[a-z][a-z0-9]*((-[a-z0-9]+)*|[a-z0-9]*)$"
  },
  "ignoreFiles": [
    "src/assets/**/*"
  ]
}
```


## 提交时检查

安装 [lint-staged](https://github.com/okonet/lint-staged)
``` 
yarn add lint-staged
```

增加 scripts
``` json
{
  "scripts": {
    "lint:ts": "tslint -p src/tsconfig.app.json -c tslint.json 'src/**/*.ts'",
    "lint:style": "stylelint 'src/**/*.less' --syntax less",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.ts": "npm run lint:ts",
    "src/**/*.less": "npm run lint:style"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
}
```