在项目开发中我们希望可以编写高质量的规范代码，但是在多人协作开发项目时，每个人都有自己的不同的编码习惯，在项目中随着项目的不断完善，代码量和代码复杂度的不断增加，就会导致项目代码变得越来越杂乱无章，越来越难以理解。这时在团队协作时开发风格统一的规范代码就显得尤为重要。
在多人协作开发项目如何才能做到开发统一风格的规范性代码呢？我们知道可以起到规范代码作用的有 TSLint 和 ESLint ，但在本篇文章中我们主要介绍如何在Create React App 项目中引入 TSLint 。
步骤1、首先我们应该通过 cmd 执行以下命令创建一个 Create React App 项目。
步骤2：打开 cmd 通过 cd my-app 进入到项目根目录中执行 npm install tslint typescript --save-dev 安装 tslint 和 typescript
步骤3：通过步骤2中已经安装了 typescript，因此我们需要将项目中后缀为 “.js” 的文件改为后缀名为 “.tsx”。
步骤4：在项目根目录中添加一个 tslint.json 文件，并通过 tslint 官网中的 Rules 配置 tslint.json 文件
步骤5：在项目中添加 tslint.json 后可以看到项目目录为
步骤6：以 vscode 编辑器为例，我们需要安装一个第三方的 TSLint 插件，安装成功后重启 vscode 编辑器，即可生效
步骤7：重启 vscode 编辑器后进行测试
a、在 tslint.json 文件配置 "no-var-keyword": true // 禁止使用var关键字，使用let或const代替
b、app.tsx 文件中使用 var 声明一个变量
c、查看是否会提示错误信息
步骤8：如果在测试时出现上图错误信息表示 tslint 已经成功引入到项目中了。
备注 1：本篇文章我们在项目中引入了 tslint.json 文件是为了做代码规范约束，但是在项目根目录中还存在一个与 tslint.json 文件很相似的tsconfig.json的配置文件，tsconfig.json文件作用及配置项请点击 tsconfig.json 文件说明
备注2：在 window 系统中通过 cmd 执行命令，在 mac 系统中使用 终端 执行命令
备注3：tslint.json 文件中的配置项有很多，可以在 tslint 官网中的 Rules 中选择，也可以在网上查找一些常用到的规则，下面是我的 tslint.json 文件的配置，没有使用截图，方便拷贝：
{
"rules": {
"adjacent-overload-signatures": true,
"arrow-return-shorthand": true,
"await-promise": true,
"ban-comma-operator": true,
"binary-expression-operand-order": true,
"callable-types": true,
"class-name": true,
"comment-format": [
true,
"check-space"
],
"component-class-suffix": true,
"curly": true,
"deprecation": {
"severity": "warn"
},
"directive-class-suffix": true,
"encoding": true,
"eofline": true,
"forin": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": [
true,
"spaces",
2
],
"interface-name": [true, "never-prefix"],
"interface-over-type-literal": true,
"label-position": true,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"new-parens": true,
"no-arg": true,
"no-bitwise": true,
"no-boolean-literal-compare": true,
"no-conditional-assignment": true,
"no-consecutive-blank-lines": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-default-export": true,
"no-duplicate-imports": true,
"no-duplicate-super": true,
"no-duplicate-switch-case": true,
"no-empty": false,
"no-empty-interface": true,
"no-eval": true,
"no-for-in-array": true,
"no-implicit-dependencies": [
true,
"dev"
],
"no-inferrable-types": [
true,
"ignore-params"
],
"no-inferred-empty-object-type": true,
"no-input-rename": true,
"no-invalid-template-strings": true,
"no-irregular-whitespace": true,
"no-misused-new": true,
"no-namespace": [
true,
"allow-declarations"
],
// "no-non-null-assertion": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-reference": true,
"no-require-imports": true,
"no-return-await": true,
"no-shadowed-variable": true,
"no-string-literal": false,
"no-string-throw": true,
"no-switch-case-fall-through": true,
"no-trailing-whitespace": true,
"no-unnecessary-callback-wrapper": true,
"no-unnecessary-initializer": true,
"no-unnecessary-qualifier": true,
"no-unsafe-any": true,
"no-unsafe-finally": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"no-var-requires": true,
"number-literal-format": true,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-shorthand": [
true,
"never"
],
"object-literal-sort-keys": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-whitespace"
],
"one-variable-per-declaration": true,
"ordered-imports": [
true,
{
"grouped-imports": true,
// "import-sources-order": "lowercase-last",
"named-imports-order": "lowercase-first"
}
],
"prefer-object-spread": true,
"prefer-readonly": true,
"prefer-switch": true,
"prefer-template": [
true,
"allow-single-concat"
],
"prefer-while": true,
"quotemark": [
true,
"single",
"jsx-double"
],
"radix": true,
"semicolon": [
true,
"always",
"ignore-bound-class-methods"
],
"space-before-function-paren": [
true,
{
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
],
"space-within-parens": true,
"switch-final-break": true,
"trailing-comma": [
true,
{
"multiline": "never",
"singleline": "never"
}
],
"triple-equals": [
true,
"allow-null-check"
],
"type-literal-delimiter": true,
"typedef": [
true,
"array-destructuring",
"arrow-call-signature",
"call-signature",
"object-destructuring",
"parameter",
"property-declaration"
],
"typedef-whitespace": [
true,
{
"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"
}
],
"unified-signatures": true,
"use-host-property-decorator": true,
"use-input-property-decorator": true,
"use-isnan": true,
"use-life-cycle-interface": true,
"use-output-property-decorator": true,
"use-pipe-transform-interface": true,
"variable-name": [
true,
"ban-keywords",
"check-format",
"allow-leading-underscore"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-module",
"check-operator",
"check-rest-spread",
"check-separator",
"check-type",
"check-type-operator"
]
}
}
网友评论