我们推荐在团队中使用统一的 Lint 规范和 commit 约束项目进行规范开发， Lint 可以根据现在团队中的使用情况

推荐 airbnb javascript style guid： https://github.com/airbnb/javascript

TS 代码规范

  1. {
  2.     // - Enforces function overloads to be consecutive. -
  3.     adjacent-overload-signatures: true,
  4.     // - 禁止逗号运算符。 -
  5.     ban-comma-operator:true, 
  6.     // - 禁止类型 -
  7.     ban-type: [true, ["object","User {} instead."],["string"]],
  8.     // - 类成员必须声明 private public ...
  9.     member-access:  [true , "no-public"||"check-accessor"|| "check-constructor" || "check-parameter-property"  ],
  10.     // - 类声明排序 -
  11.     member-order: [true, {order:....}],
  12.     // - 不需使用any类型 -
  13.     no-any: true,
  14.     // - 禁止空接口 -
  15.     no-empty-interface:true,
  16.     // - 禁止导入带有副作用的语句
  17.     no-import-side-effect: [true, {"ignore-module": "(\\.html|\\.css)$"}],
  18.     // - 不允许将变量或参数初始化为数字,字符串或布尔值的显式类型声明。 - 
  19.     no-inferrable-types: [true, "ignore-params", "ignore-properties"],
  20.     // - 不允许内部模块
  21.     no-internal-module:true,
  22.     // - 不允许在变量赋值之外使用常量数值。当没有指定允许值列表时,默认允许-1,0和1
  23.     no-magic-numbers: [true,1,2,3],
  24.     // - 不允许使用内部modules和命名空间
  25.     no-namespace: [ true,"allpw-declarations"],
  26.     // - 不允许使用!后缀操作符的非空断言。
  27.     no-non-null-assertion: true ,
  28.     // - 不允许重新分配参数
  29.     no-parameter-reassignment: true,
  30.     // - 禁止使用/// <reference path=> 导入 ,使用import代替
  31.     no-reference: true,
  32.     // - 如果类型断言没有改变表达式的类型就发出警告
  33.     no-unnecessary-type-assertion: true,
  34.     no-var-requires:  true, //不允许使用var module = require("module"),用 import foo = require('foo')导入
  35.     only-arrow-functions: [true,"allow-declarations","allow-named-functions"], //允许箭头表达式,不需要传统表达式 ； 允许独立的函数声明  ；允许表达,function foo() {}但不是function() {}
  36.     prefer-for-of:true,  //建议使用for(..of)
  37.     promise-function-async: true, 要求异步函数返回promise
  38.         typedef: [true, "call-signature", "parameter", "member-variable-declaration"], //需要定义的类型存在
  39.     typedef-whitespace: true, //类型声明的冒号之前是否需要空格
  40.     unified-signatures: true, //重载可以被统一联合成一个
  41.     //function 专用
  42.     await-promise:  true,  //警告不是一个promise的await
  43.     ban: [
  44.         true,
  45.         "eval",
  46.         {"name": "$", "message": "please don't"},
  47.         ["describe", "only"],
  48.         {"name": ["it", "only"], "message": "don't focus tests"},
  49.         {
  50.             "name": ["chai", "assert", "equal"],
  51.             "message": "Use 'strictEqual' instead."
  52.             },
  53.         {"name": ["*", "forEach"], "message": "Use a regular for loop instead."}
  54.     ],
  55.     curly: true, //for if do while 要有括号
  56.     forin:true, //用for in 必须用if进行过滤
  57.     import-blacklist:true, //允许使用import require导入具体的模块
  58.     label-postion: true, //允许在do/for/while/swith中使用label
  59.     no-arg:true, //不允许使用 argument.callee
  60.     no-bitwise:true, //不允许使用按位运算符
  61.     no-conditional-assignmen: true, //不允许在do-while/for/if/while判断语句中使用赋值语句
  62.     no-console: true, //不能使用console
  63.     no-construct: true, //不允许使用 String/Number/Boolean的构造函数
  64.     no-debugger:  true, //不允许使用debugger
  65.     no-duplicate-super: true, //构造函数两次用super会发出警告
  66.     no-empty:true, //不允许空的块
  67.     no-eval: true, //不允许使用eval
  68.     no-floating-promises: true, //必须正确处理promise的返回函数
  69.     no-for-in-array: true, //不允许使用for in 遍历数组
  70.     no-implicit-dependencies: true, //不允许在项目的package.json中导入未列为依赖项的模块
  71.     no-inferred-empty-object-type:  true, //不允许在函数和构造函数中使用{}的类型推断
  72.         no-invalid-template-strings:  true, //警告在非模板字符中使用${
  73.     no-invalid-this: true, //不允许在非class中使用 this关键字
  74.     no-misused-new: true, //禁止定义构造函数或new class
  75.     no-null-keyword: true, //不允许使用null关键字
  76.     no-object-literal-type-assertion: true, //禁止objext出现在类型断言表达式中
  77.     no-return-await: true, //不允许return await
  78.     arrow-parens:  true, //箭头函数定义的参数需要括号
  79.     "quotemark":[true, "single","avoid-escape"], //引号的使用规则
  80.     "semicolon":[true, "never", "ignore-interfaces"], //分号的使用规则
  81.     "indent":[true, "tabs", 2], //使用Tab进行缩进,每次强制缩进2个字符
  82.     "typedef-whitespace": false, //在类型定义的时候,是否允许使用空格, 使用false,表示不对此项进行校验,不启用此项的校验
  83.     "whitespace": false, //空格的校验
  84.     "member-access": false, //类成员的显示可见性声明,即显示定义一个类的成员是否可见,即对类成员定义public | static 等
  85.     "one-line": false, //要求指定的标记与它们之前的表达式位于同一行
  86.     "trailing-comma": [true, { //对尾随逗号的校验
  87.         "multiline": {
  88.             "objects": "ignore",
  89.             "arrays": "never",
  90.             "functions": "never",
  91.             "typeLiterals": "ignore"
  92.             },
  93.         "esSpecCompliant": true //是否允许尾随逗号出现在剩余变量中
  94.         }]
  95. }

CSS 代码规范

image.png
Those layers are:

  • Settings – used with preprocessors and contain font, colors definitions, etc.
  • Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
  • Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
  • Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
  • Objects – class-based selectors which define undecorated design patterns, for example the media object known from OOCSS
  • Components – specific UI components. This is where most of our work takes place. We often compose UI components of Objects and Components**
  • Utilities – utilities and helper classes with ability to override anything which goes before in the triangle, e.g. hide helper class
  1. .declaration-order {
  2.     display: block;
  3.     float: right;
  5.     position: absolute;
  6.     top: 0;
  7.     right: 0;
  8.     bottom: 0;
  9.     left: 0;
  10.     z-index: 100;
  12.     border: 1px solid #e5e5e5;
  13.     border-radius: 3px;
  14.     width: 100px;
  15.     height: 100px;
  17.     font: normal 13px "Helvetica Neue", sans-serif;
  18.     line-height: 1.5;
  19.     text-align: center;
  21.     color: #333;
  22.     background-color: #f5f5f5;
  24.     opacity: 1;
  25. }
  26. // 下面是推荐的属性的顺序
  27. [
  28.     [
  29.         "display",
  30.         "visibility",
  31.         "float",
  32.         "clear",
  33.         "overflow",
  34.         "overflow-x",
  35.         "overflow-y",
  36.         "clip",
  37.         "zoom"
  38.     ],
  39.     [
  40.         "table-layout",
  41.         "empty-cells",
  42.         "caption-side",
  43.         "border-spacing",
  44.         "border-collapse",
  45.         "list-style",
  46.         "list-style-position",
  47.         "list-style-type",
  48.         "list-style-image"
  49.     ],
  50.     [
  51.         "-webkit-box-orient",
  52.         "-webkit-box-direction",
  53.         "-webkit-box-decoration-break",
  54.         "-webkit-box-pack",
  55.         "-webkit-box-align",
  56.         "-webkit-box-flex"
  57.     ],
  58.     [
  59.         "position",
  60.         "top",
  61.         "right",
  62.         "bottom",
  63.         "left",
  64.         "z-index"
  65.     ],
  66.     [
  67.         "margin",
  68.         "margin-top",
  69.         "margin-right",
  70.         "margin-bottom",
  71.         "margin-left",
  72.         "-webkit-box-sizing",
  73.         "-moz-box-sizing",
  74.         "box-sizing",
  75.         "border",
  76.         "border-width",
  77.         "border-style",
  78.         "border-color",
  79.         "border-top",
  80.         "border-top-width",
  81.         "border-top-style",
  82.         "border-top-color",
  83.         "border-right",
  84.         "border-right-width",
  85.         "border-right-style",
  86.         "border-right-color",
  87.         "border-bottom",
  88.         "border-bottom-width",
  89.         "border-bottom-style",
  90.         "border-bottom-color",
  91.         "border-left",
  92.         "border-left-width",
  93.         "border-left-style",
  94.         "border-left-color",
  95.         "-webkit-border-radius",
  96.         "-moz-border-radius",
  97.         "border-radius",
  98.         "-webkit-border-top-left-radius",
  99.         "-moz-border-radius-topleft",
  100.         "border-top-left-radius",
  101.         "-webkit-border-top-right-radius",
  102.         "-moz-border-radius-topright",
  103.         "border-top-right-radius",
  104.         "-webkit-border-bottom-right-radius",
  105.         "-moz-border-radius-bottomright",
  106.         "border-bottom-right-radius",
  107.         "-webkit-border-bottom-left-radius",
  108.         "-moz-border-radius-bottomleft",
  109.         "border-bottom-left-radius",
  110.         "-webkit-border-image",
  111.         "-moz-border-image",
  112.         "-o-border-image",
  113.         "border-image",
  114.         "-webkit-border-image-source",
  115.         "-moz-border-image-source",
  116.         "-o-border-image-source",
  117.         "border-image-source",
  118.         "-webkit-border-image-slice",
  119.         "-moz-border-image-slice",
  120.         "-o-border-image-slice",
  121.         "border-image-slice",
  122.         "-webkit-border-image-width",
  123.         "-moz-border-image-width",
  124.         "-o-border-image-width",
  125.         "border-image-width",
  126.         "-webkit-border-image-outset",
  127.         "-moz-border-image-outset",
  128.         "-o-border-image-outset",
  129.         "border-image-outset",
  130.         "-webkit-border-image-repeat",
  131.         "-moz-border-image-repeat",
  132.         "-o-border-image-repeat",
  133.         "border-image-repeat",
  134.         "padding",
  135.         "padding-top",
  136.         "padding-right",
  137.         "padding-bottom",
  138.         "padding-left",
  139.         "width",
  140.         "min-width",
  141.         "max-width",
  142.         "height",
  143.         "min-height",
  144.         "max-height"
  145.     ],
  146.     [
  147.         "font",
  148.         "font-family",
  149.         "font-size",
  150.         "font-weight",
  151.         "font-style",
  152.         "font-variant",
  153.         "font-size-adjust",
  154.         "font-stretch",
  155.         "font-effect",
  156.         "font-emphasize",
  157.         "font-emphasize-position",
  158.         "font-emphasize-style",
  159.         "font-smooth",
  160.         "line-height",
  161.         "text-align",
  162.         "-webkit-text-align-last",
  163.         "-moz-text-align-last",
  164.         "-ms-text-align-last",
  165.         "text-align-last",
  166.         "vertical-align",
  167.         "white-space",
  168.         "text-decoration",
  169.         "text-emphasis",
  170.         "text-emphasis-color",
  171.         "text-emphasis-style",
  172.         "text-emphasis-position",
  173.         "text-indent",
  174.         "-ms-text-justify",
  175.         "text-justify",
  176.         "letter-spacing",
  177.         "word-spacing",
  178.         "-ms-writing-mode",
  179.         "text-outline",
  180.         "text-transform",
  181.         "text-wrap",
  182.         "-ms-text-overflow",
  183.         "text-overflow",
  184.         "text-overflow-ellipsis",
  185.         "text-overflow-mode",
  186.         "-ms-word-wrap",
  187.         "word-wrap",
  188.         "-ms-word-break",
  189.         "word-break"
  190.     ],
  191.     [
  192.         "color",
  193.         "background",
  194.         "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
  195.         "background-color",
  196.         "background-image",
  197.         "background-repeat",
  198.         "background-attachment",
  199.         "background-position",
  200.         "-ms-background-position-x",
  201.         "background-position-x",
  202.         "-ms-background-position-y",
  203.         "background-position-y",
  204.         "-webkit-background-clip",
  205.         "-moz-background-clip",
  206.         "background-clip",
  207.         "background-origin",
  208.         "-webkit-background-size",
  209.         "-moz-background-size",
  210.         "-o-background-size",
  211.         "background-size"
  212.     ],
  213.     [
  214.         "outline",
  215.         "outline-width",
  216.         "outline-style",
  217.         "outline-color",
  218.         "outline-offset",
  219.         "opacity",
  220.         "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
  221.         "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
  222.         "-ms-interpolation-mode",
  223.         "-webkit-box-shadow",
  224.         "-moz-box-shadow",
  225.         "box-shadow",
  226.         "filter:progid:DXImageTransform.Microsoft.gradient",
  227.         "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
  228.         "text-shadow"
  229.     ],
  230.     [
  231.         "-webkit-transition",
  232.         "-moz-transition",
  233.         "-ms-transition",
  234.         "-o-transition",
  235.         "transition",
  236.         "-webkit-transition-delay",
  237.         "-moz-transition-delay",
  238.         "-ms-transition-delay",
  239.         "-o-transition-delay",
  240.         "transition-delay",
  241.         "-webkit-transition-timing-function",
  242.         "-moz-transition-timing-function",
  243.         "-ms-transition-timing-function",
  244.         "-o-transition-timing-function",
  245.         "transition-timing-function",
  246.         "-webkit-transition-duration",
  247.         "-moz-transition-duration",
  248.         "-ms-transition-duration",
  249.         "-o-transition-duration",
  250.         "transition-duration",
  251.         "-webkit-transition-property",
  252.         "-moz-transition-property",
  253.         "-ms-transition-property",
  254.         "-o-transition-property",
  255.         "transition-property",
  256.         "-webkit-transform",
  257.         "-moz-transform",
  258.         "-ms-transform",
  259.         "-o-transform",
  260.         "transform",
  261.         "-webkit-transform-origin",
  262.         "-moz-transform-origin",
  263.         "-ms-transform-origin",
  264.         "-o-transform-origin",
  265.         "transform-origin",
  266.         "-webkit-animation",
  267.         "-moz-animation",
  268.         "-ms-animation",
  269.         "-o-animation",
  270.         "animation",
  271.         "-webkit-animation-name",
  272.         "-moz-animation-name",
  273.         "-ms-animation-name",
  274.         "-o-animation-name",
  275.         "animation-name",
  276.         "-webkit-animation-duration",
  277.         "-moz-animation-duration",
  278.         "-ms-animation-duration",
  279.         "-o-animation-duration",
  280.         "animation-duration",
  281.         "-webkit-animation-play-state",
  282.         "-moz-animation-play-state",
  283.         "-ms-animation-play-state",
  284.         "-o-animation-play-state",
  285.         "animation-play-state",
  286.         "-webkit-animation-timing-function",
  287.         "-moz-animation-timing-function",
  288.         "-ms-animation-timing-function",
  289.         "-o-animation-timing-function",
  290.         "animation-timing-function",
  291.         "-webkit-animation-delay",
  292.         "-moz-animation-delay",
  293.         "-ms-animation-delay",
  294.         "-o-animation-delay",
  295.         "animation-delay",
  296.         "-webkit-animation-iteration-count",
  297.         "-moz-animation-iteration-count",
  298.         "-ms-animation-iteration-count",
  299.         "-o-animation-iteration-count",
  300.         "animation-iteration-count",
  301.         "-webkit-animation-direction",
  302.         "-moz-animation-direction",
  303.         "-ms-animation-direction",
  304.         "-o-animation-direction",
  305.         "animation-direction"
  306.     ],
  307.     [
  308.         "content",
  309.         "quotes",
  310.         "counter-reset",
  311.         "counter-increment",
  312.         "resize",
  313.         "cursor",
  314.         "-webkit-user-select",
  315.         "-moz-user-select",
  316.         "-ms-user-select",
  317.         "user-select",
  318.         "nav-index",
  319.         "nav-up",
  320.         "nav-right",
  321.         "nav-down",
  322.         "nav-left",
  323.         "-moz-tab-size",
  324.         "-o-tab-size",
  325.         "tab-size",
  326.         "-webkit-hyphens",
  327.         "-moz-hyphens",
  328.         "hyphens",
  329.         "pointer-events"
  330.     ]
  331. ]