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

Posted 2021-02-14 dasusu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular（03）-- lint风格规范和WebStorm小技巧相关的知识，希望对你有一定的参考价值。

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

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

以前做 android 开发时会借助 AndroidStudio 来强制遵守一些规范，现在前端项目我用的是 WebStorm 开发，这两个开发工具本质上同源，所以很多功能都差不多。

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

风格规范

Angular 项目的很多文件都是通过 Angular-CLI 工具的 ng 命令来生成的，生成时就有默认一些代码风格，而且，WebStorm 默认也有一些代码风格，也许有人觉得直接使用默认的风格来即可。

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

name: string = ‘dasu‘

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

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

所以，我个人还是比较习惯声明变量的类型，不管有没有对其进行初始化。

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

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

命名方面

私有属性和方法以 _ 一个下划线开头，并添加 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 的一些配置，一些小技巧，来进行代码的格式化操作，让开发工具自动帮我们将代码整理成符合规范的风格。