TypeScript TSLint 與 ESLint

本節(jié)將介紹怎樣在一個(gè) TypeScript 項(xiàng)目中使用 ESLint 規(guī)范，至于為什么不推薦使用 TSLint，可以看下這篇文章：TypeScript 官方已經(jīng)決定全面采用 ESLint，ESLint 的 TypeScript 解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。

所以，同開發(fā)前端項(xiàng)目一樣，熟練掌握 ESLint 規(guī)則，也成了 TypeScript 項(xiàng)目開發(fā)的必要條件。

1. 慕課解釋

ESLint 是一個(gè)插件化并且可配置的 JavaScript 語法規(guī)則和代碼風(fēng)格的檢查工具。

保持代碼風(fēng)格的一致性能增加可讀性，更便于團(tuán)隊(duì)合作。保持一致就意味著要對(duì)我們編寫的代碼增加一定的約束，ESLint 就是這么一個(gè)通過各種規(guī)則對(duì)我們的代碼添加約束的工具。

2. 用 ESLint 規(guī)范 Typescript 代碼

安裝 ESLint 規(guī)范 Typescript 代碼所需依賴包：

npm install -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

@typescript-eslint/parser 庫是 ESLint 的 TypeScript 解析器，用來檢查和規(guī)范 TypeScript 代碼。

在項(xiàng)目根目錄下創(chuàng)建 .eslintrc.js 文件進(jìn)行配置：

module.exports = {
  root: true,
  env:{                         
    browser: true,
    node: true,
  }  
  parser:  '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
    
  }                      
}

其中屬性 rules 是對(duì)象類型，每個(gè)團(tuán)隊(duì)都有自己的一套標(biāo)準(zhǔn)規(guī)范，按照要求在此配置對(duì)應(yīng)的 ESLint 檢測(cè)規(guī)則即可。

3. 小結(jié)

在掌握了 ESLint 的配置規(guī)則后，還可以搭配 prettier、husky、lint-staged 等這些優(yōu)秀的庫形成適合自己團(tuán)隊(duì)的代碼風(fēng)格。