在項(xiàng)目開發(fā)中我們希望可以編寫高質(zhì)量的規(guī)范代碼，但是在多人協(xié)作開發(fā)項(xiàng)目時(shí)，每個(gè)人都有自己的不同的編碼習(xí)慣，在項(xiàng)目中隨著項(xiàng)目的不斷完善，代碼量和代碼復(fù)雜度的不斷增加，就會導(dǎo)致項(xiàng)目代碼變得越來越雜亂無章，越來越難以理解。這時(shí)在團(tuán)隊(duì)協(xié)作時(shí)開發(fā)風(fēng)格統(tǒng)一的規(guī)范代碼就顯得尤為重要。

在多人協(xié)作開發(fā)項(xiàng)目如何才能做到開發(fā)統(tǒng)一風(fēng)格的規(guī)范性代碼呢？我們知道可以起到規(guī)范代碼作用的有?TSLint?和 ESLint?，但在本篇文章中我們主要介紹如何在Create React App?項(xiàng)目中引入 TSLint?。

步驟1、首先我們應(yīng)該通過 cmd 執(zhí)行以下命令創(chuàng)建一個(gè)?Create React App?項(xiàng)目。

步驟2：打開 cmd 通過 cd my-app 進(jìn)入到項(xiàng)目根目錄中執(zhí)行?npm install tslint typescript? --save-dev 安裝 tslint 和 typescript

步驟3：通過步驟2中已經(jīng)安裝了 typescript，因此我們需要將項(xiàng)目中后綴為 “.js” 的文件改為后綴名為 “.tsx”。

步驟4：在項(xiàng)目根目錄中添加一個(gè)?tslint.json 文件，并通過?tslint 官網(wǎng)中的 Rules 配置?tslint.json?文件

步驟5：在項(xiàng)目中添加 tslint.json 后可以看到項(xiàng)目目錄為

步驟6：以 vscode 編輯器為例，我們需要安裝一個(gè)第三方的 TSLint 插件，安裝成功后重啟 vscode 編輯器，即可生效

步驟7：重啟 vscode 編輯器后進(jìn)行測試

a、在 tslint.json 文件配置? "no-var-keyword": true? ? ?// 禁止使用var關(guān)鍵字，使用let或const代替

b、app.tsx 文件中使用 var 聲明一個(gè)變量

c、查看是否會提示錯(cuò)誤信息

步驟8：如果在測試時(shí)出現(xiàn)上圖錯(cuò)誤信息表示 tslint 已經(jīng)成功引入到項(xiàng)目中了。

備注 1：本篇文章我們在項(xiàng)目中引入了 tslint.json 文件是為了做代碼規(guī)范約束，但是在項(xiàng)目根目錄中還存在一個(gè)與 tslint.json 文件很相似的tsconfig.json的配置文件，tsconfig.json文件作用及配置項(xiàng)請點(diǎn)擊 tsconfig.json 文件說明

備注2：在 window 系統(tǒng)中通過 cmd 執(zhí)行命令，在 mac 系統(tǒng)中使用 終端 執(zhí)行命令

備注3：tslint.json 文件中的配置項(xiàng)有很多，可以在?tslint 官網(wǎng)中的 Rules?中選擇，也可以在網(wǎng)上查找一些常用到的規(guī)則，下面是我的 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"

????]

??}

}