Angular（03）-- lint风格规范和WebStorm小技巧

时间 2019-11-18

标签 angular lint 风格规范 webstorm 技巧栏目 AngularJS 繁體版

原文原文链接

在开始讲 Angular 各个核心知识点以前，想先来说讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置。html

由于我我的比较注重代码规范、代码风格，而对于这些规范，我只有一个观点：一切须要依赖开发人员的主观意识去遵照的规范都没有多大意义。前端

之前作 Android 开发时会借助 AndroidStudio 来强制遵照一些规范，如今前端项目我用的是 WebStorm 开发，这两个开发工具本质上同源，因此不少功能都差很少。web

那么，这篇就来说一讲，如何对 WebStorm 进行一些设置，让它能够更好的辅助咱们遵照风格规范，同时，理清一些好比 tslint.json 的配置，来让开发工具实时检测咱们写的代码是否有很好的遵照规范。express

风格规范

Angular 项目的不少文件都是经过 Angular-CLI 工具的 ng 命令来生成的，生成时就有默认一些代码风格，并且，WebStorm 默认也有一些代码风格，也许有人以为直接使用默认的风格来便可。编程

但对于默认的一些风格规范，我不是很赞同，好比说：json

name: string = 'dasu'数组

简单的在某个类中声明这么一个 name 变量，类型是 string，初始值为 dasu，但默认的 tslint.json 配置的代码风格会报错，由于它建议咱们，既然已经初始化为字符串类型了，就没有必要再去声明变量的类型了。app

对于这种默认风格，我我的并不赞同，由于我的习惯了 Java 的风格，对于变量的类型声明已经习惯了，更况且，这个初始值有可能在将来被去掉，那么，这时候岂不是还要去加上类型说明？curl

因此，我我的仍是比较习惯声明变量的类型，无论有没有对其进行初始化。webstorm

以上只是个简单的例子，默认的一些代码风格，我我的都不是很习惯，因此，下面列举个人我的代码风格，供大伙借鉴、参考。

很少，只有几点而已，由于大多直接使用默认的代码风格，只是默认的一些风格中，我不是很习惯的状况下，才会对其进行修改。

命名方面

私有属性和方法以 _ 一个下划线开头，并添加 private 修饰符
公有属性和方法使用默认的不加修饰符
与组件对应的模板 html 绑定事件相关的方法，以 on 为前缀
组件的输出属性（@Output) 不以 on 为前缀
表格数据的 *ngFor 指令时，建议以 item 命名每一项，如 *ngFor="let item of page?.result" 这样便于各个页面的代码直接复制粘贴

格式

HTML 中使用 "" 双引号，ts 中使用 '' 单引号
HTML 和 ts 的缩进都使用 4 个空格
局部变量容许使用 let，并不必定强制使用 const
全部变量声明时直接指明其类型

tslint.json

建立一个新的 Angular 项目时，会自动生成项目的脚手架，里面包括了各类各样的文件，其中有一份是 tslint.json 文件，是用来给 WebStorm 实时对代码进行 lint 检测时的代码风格配置。

我修改了部分默认的配置，下面给出的是全部项的配置，其中带有注释的配置项，就是我增长或修改本来默认的配置项，是基于我上面说的我的的一些习惯风格而进行的修改：

"rules": {
    "arrow-return-shorthand": true,
    "adjacent-overload-signatures": true, // override 函数是否集中放置 (新增)
    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "deprecation": {
      "severity": "warn"
    },
    "eofline": false,  // 文件末尾是否须要空新行 (默认 true)
    "encoding": true,  // 文件编码是否默认 UTF-8 (新增)
    "forin": true,
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      240 // 默认140，我屏幕挺大的，因此并不反感某一行代码过长，相反，不少代码由于自动换行后，我我的感受更不习惯，还不如我手动来选择从某个地方换行
    ],
    "member-access": false,
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-consecutive-blank-lines": [  // 空白行最多几行 (新增)
      true,
      3
    ],
    "no-debugger": false,
    "no-duplicate-super": true,
    "no-duplicate-switch-case": true, // 是否禁止重复 case (新增)
    "no-duplicate-imports": true,     // 是否禁止重复 import (新增)
    "no-duplicate-variable": [        // 是否禁止重复变量声明 (新增)
      true,
      "check-parameters"
    ],
    "no-conditional-assignment": true, // 禁止在分支条件判断中有赋值操做 (新增)
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [  // 是否禁止在有初始值的变量声明上，增长类型声明 (默认 true)
      false,
      "ignore-params"
    ],
    "no-mergeable-namespace": true, // 是否禁止重复的命名空间 (新增)
    "no-misused-new": true,
    "no-non-null-assertion": true,
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": false,      // 是否禁止末尾空格 (默认 true)
    "no-unnecessary-initializer": true,
    "no-unused-expression": false,  // 是否容许无用的表达式存在 (默认 true)
    "no-unused-variable": false,   // 是否容许无用的变量存在 (新增)
    "no-use-before-declare": true,
    "no-unsafe-finally": true,
    "no-for-in-array": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": false,  // 不强制使用 const，容许使用 let
    "quotemark": [  // 引号设置，ts 中单引号
      true,
      "single",
      "jsx-double",
      "avoid-escape",
      "avoid-template"
    ],
    "radix": true,
    "semicolon": [
      true,
      "always",
      "ignore-interfaces"
    ],
    "space-within-parens": [
      true,
      0
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],
    "no-output-on-prefix": true,
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "component-class-suffix": true,
    "directive-class-suffix": true
  }

tslint.json 文件只是用来在执行 ng lint 命令，或者代码编程过程当中，开发工具实时检测，当检测到不符合风格规范的代码时，进行报错处理。

虽然能够在执行 ng lint --fix 时添加 --fix 参数来自动修正一些风格错误，但这种方式很耗时，而是代码编写过程当中，也无法应用。

因此，能够借助 Webstorm 的一些配置，一些小技巧，来进行代码的格式化操做，让开发工具自动帮咱们将代码整理成符合规范的风格。

WebStorm 小技巧

下面介绍的这些配置项，都是为代码的格式化操做（快捷键：Ctrl + Alt + L）服务的，意思也就是说，当咱们为当前文件进行代码格式化操做时，WebStorm 就会自动按照咱们的这些配置项来自动整理代码，将代码整理成遵循规范的风格。

标点符号（引号，分号，逗号）

设置路径：Settings -> Editor -> Code Style -> TypeScript -> Punctuation

这里配置项不多，就三个，分别是配置分号，引号和逗号。

第一行用来配置每行代码末尾是否须要有 ; 分号，且格式化时是否对旧代码（已通过格式化的代码）进行处理。
第二行用来配置，代码中是使用 '' 单引号，仍是 "" 双引号（默认是双引号），且格式化时是否对旧代码（已通过格式化的代码）进行处理。
第三行用来配置是否须要保留，仍是去掉数组或对象属性列表中，最后一项末尾的逗号。

个人代码风格是 HTML 中使用 "" 双引号，TypeScript 中使用 '' 单引号，但使用工具自动生成 ts 文件时，引号默认是双引号，或者某些时候某些因素下，代码中出现一些双引号，这时候，经过修改这个配置，在每次格式化代码时，就都会自动将双引号转成单引号，方便、高效。

空格

设置路径：Settings -> Editor -> Code Style -> TypeScript -> Spaces

格式化操做时，会自动在好比方法的 { 右括号前，赋值语句的 = 等号两侧等等这些位置自动加上一个空格，若是咱们写代码时漏掉这些空格时。

这个功能实际上是根据这里的配置项来决定的，这里面默认勾选了不少，基本符合常见的风格规范：

对于空格，我没有改掉默认格式化时空格风格，只是增长了几种场景也须要自动进行空格处理，分别是：

Within -> ES6 import/export braces

导入语句 {} 距离内容之间增长一个空格，默认是没有的，如：

Within -> Object literal braces 勾选
Within -> Object literal type braces 勾选

这两个是对象内部的空格处理，默认也是没有的，如：

对齐和换行

设置路径：Settings -> Editor -> Code Style -> TypeScript -> Wrapping and Braces

这里是设置一些对齐或者换行策略：

Chained method calls 设置为 Wrap always
Chained method calls -> Align when multiline 勾选
Chained method calls -> ':' on new line 勾选

上面三个是用来设置方法链时，代码的整理，默认不作处理，能够改为格式化时，自动将每层的方法调用进行换行，而且对齐处理，我的建议。

'if()' statement -> Force braces 设置为 always

这个是设置，即便 if 代码块内只有简单的一行代码，也要自动为其加上大括号处理，默认是不作处理。

Ternaty operation 设置为 Chop down if long
Ternaty operation -> Align when multiline 勾选
Ternaty operation -> '?' and ':' signs on next line 勾选

这个是用来设置 ? : 运算符的处理，上面的设置意思是，当代码过长时，自动将 ? 和 : 的代码换行，并对其处理，默认是不作处理。

Array initializer 设置为 Chop down if long
Array initializer -> Align when multiline 勾选
Array initializer -> New line after '[' 勾选
Array initializer -> Place ']' on new line 勾选

这个是用来设置数组的处理，以上配置的意思是，当数组过长时，自动将每一项进行换行并对其处理，[] 单独占据一行：

[图片上传失败...(image-e2d886-1553268791353)]

对于 Angular 中的 @NgModel 的文件来讲，常常会有这种风格须要，因此就直接这么配置了。

Objects -> Align 设置为 On Value
Variable declarations 设置为 Chop down if long
Variable declarations -> Align 设置为 when grouped

这个是用来设置变量或者对象的属性列表的赋值语句的对齐模式，如：

同理，也能够设置 CSS 的样式属性的对齐方式：

以上，只是个人我的风格习惯，大致上，我都直接按照默认的风格规范来遵照，但在个把一些项上，我的有不一样的见解和习惯，因此修改掉了默认的风格配置。

另外，我比较习惯使用格式化代码操做，并且一个项目中，代码全是我本身写的可能性也很小，别人写的代码或多或少都存在一些风格规范问题，也没办法强制性要求他人必须遵照，因此，就瞎折腾了下 WebStorm 的相关配置。

这样，就方便我对别人的代码也直接经过格式化操做来自动进行风格规范处理。

你们好，我是 dasu，欢迎关注个人公众号（dasuAndroidTv），公众号中有个人联系方式，欢迎有事没事来唠嗑一下，若是你以为本篇内容有帮助到你，能够转载但记得要关注，要标明原文哦，谢谢支持~