一 : 前言

最近重新学习了一下Web , 学习的新框架Angular . 因为本人比较喜欢用WebStrom . 但是由于一个洁癖 , 引发了一系列的操作.先看看工程:

都在飘红啊 , 但这些红色的真不是Bug , 我在VS Code中打开本本项目 , 如下:

程序员都有洁癖 , 爆红是不好的.....................

二 : 解决之路

Ⅰ ,  使用VS Code

VS Code存在一个坑爹的问题 , 自动引入 ( import ) 问题 , 搜了半天的百度 , 终于知道有一个叫 "Auto Import"的插件 , 安装上了.

但是发现了一个始料未及的Bug:

虽然自定义的类可以使用Auto Import自动添加引用 , 但是发现了FormsModule等没法自动引用 , 这插件是我不会用 , 还是咋的 , 请知晓此玄机的读者不吝赐教.

Ⅱ , 继续WebStrom

WebStrom中的Alt_Enter一直是我的最爱 , 可以自动引用 . 在搜索百度后 , 终于一个个的知道爆红的原因了.

一部分出在 Tslint.json配置文件中 , 一部分出在Git(版本)控制中.

① , Tslint.json(Angular项目根目录下)

规定了Tslint.json的各种代码规范 , 也是有心了 . 但是规定的太严格 , 导致了各种不自在啊. 现逐一解决:

1 , 类型报红 , 如下

说的是 , 可以根据变量words的值"Aoaudly"来确定words就是一个string , 所以程序员将words定义为string类型 (words : string)那是多此一举!

解决 : 

2 , 单/双引号报红 , 如下

TSlint.json默认严格限制了单/双引号的使用

解决 :

3 , 空格报红 , 如下

TsLint.json默认严格规定了空格的使用

解决:

4 , 特殊类型报红 , 如下

解决:

看看结果:

② , Git(版本)控制

在 settings -> Version Control中

三 : 大结局

四 : Tslint.json的配置

{  "extends": "tslint:recommended",  "rulesDirectory": [    "codelyzer"  ],  "rules": {    "array-type": false,    "arrow-parens": false,    "deprecation": {      "severity": "warn"    },    "import-blacklist": [      true,      "rxjs/Rx"    ],    "interface-name": false,    "max-classes-per-file": false,    "max-line-length": [      true,      140    ],    "member-access": false,    "member-ordering": [      false,      {        "order": [          "static-field",          "instance-field",          "static-method",          "instance-method"        ]      }    ],    "no-consecutive-blank-lines": false,    "no-console": [      true,      "debug",      "info",      "time",      "timeEnd",      "trace"    ],    "no-empty": false,    "no-inferrable-types": [      true,      "ignore-params",      "ignore-properties"    ],    "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": [      false,      "single"    ],    "trailing-comma": false,    "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,    "class-name" : false,    "variable-name" : false,    "one-line" : true,    "no-boolean-literal-compare" : false,    "no-angle-bracket-type-assertion" : false,    "binary-expression-operand-order" : false,    "arrow-return-shorthand" : false,    "jsdoc-format" : false,    "interface-over-type-literal" : false,    "no-irregular-whitespace" : false,    "number-literal-format" : false,    "whitespace" : false,    "curly" : false,    "typedef-whitespace":[      false,      {        "call-signature": "nospace",        "index-signature": "nospace",        "parameter": "nospace",        "property-declaration": "nospace",        "variable-declaration": "nospace"      },      {      "call-signature": "onespace",      "index-signature": "onespace",      "parameter": "onespace",      "property-declaration": "onespace",      "variable-declaration": "onespace"      }    ],    "ban-types": [      false,      [        "Object",        "Use {} instead."      ],      ["String"]    ],    "prefer-const": false,    "no-trailing-whitespace": false,    "comment-format": false  }}