在項目開發(fā)中我們希望可以編寫高質(zhì)量的規(guī)范代碼桂塞，但是在多人協(xié)作開發(fā)項目時凹蜂，每個人都有自己的不同的編碼習慣，在項目中隨著項目的不斷完善阁危，代碼量和代碼復雜度的不斷增加玛痊，就會導致項目代碼變得越來越雜亂無章，越來越難以理解狂打。這時在團隊協(xié)作時開發(fā)風格統(tǒng)一的規(guī)范代碼就顯得尤為重要擂煞。
在多人協(xié)作開發(fā)項目如何才能做到開發(fā)統(tǒng)一風格的規(guī)范性代碼呢？我們知道可以起到規(guī)范代碼作用的有?TSLint?和 ESLint?趴乡，但在本篇文章中我們主要介紹如何在Create React App?項目中引入 TSLint?对省。
步驟1、首先我們應該通過 cmd 執(zhí)行以下命令創(chuàng)建一個?Create React App?項目晾捏。
步驟2：打開 cmd 通過 cd my-app 進入到項目根目錄中執(zhí)行?npm install tslint typescript? --save-dev 安裝 tslint 和 typescript
步驟3：通過步驟2中已經(jīng)安裝了 typescript蒿涎，因此我們需要將項目中后綴為 “.js” 的文件改為后綴名為 “.tsx”。
步驟4：在項目根目錄中添加一個?tslint.json 文件惦辛，并通過?tslint 官網(wǎng)中的 Rules 配置?tslint.json?文件
步驟5：在項目中添加 tslint.json 后可以看到項目目錄為
步驟6：以 vscode 編輯器為例劳秋，我們需要安裝一個第三方的 TSLint 插件，安裝成功后重啟 vscode 編輯器胖齐，即可生效
步驟7：重啟 vscode 編輯器后進行測試
a玻淑、在 tslint.json 文件配置? "no-var-keyword": true? ? ?// 禁止使用var關(guān)鍵字，使用let或const代替
b市怎、app.tsx 文件中使用 var 聲明一個變量
c岁忘、查看是否會提示錯誤信息
步驟8：如果在測試時出現(xiàn)上圖錯誤信息表示 tslint 已經(jīng)成功引入到項目中了辛慰。
備注 1：本篇文章我們在項目中引入了 tslint.json 文件是為了做代碼規(guī)范約束区匠，但是在項目根目錄中還存在一個與 tslint.json 文件很相似的tsconfig.json的配置文件，tsconfig.json文件作用及配置項請點擊 tsconfig.json 文件說明
備注2：在 window 系統(tǒng)中通過 cmd 執(zhí)行命令，在 mac 系統(tǒng)中使用 終端 執(zhí)行命令
備注3：tslint.json 文件中的配置項有很多驰弄，可以在?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"
????]
??}
}
