ESLint TypeScript配置全域性變數

其實eslint + typescript的組合還是挺香的，**風格檢查 + 型別檢查，能省下不少時間。

但是還是存在一些問題。比如，有時候為了減小打包大小，我們可能會選擇把一些不太關鍵的依賴放到cdn上，然後再通過來非同步載入，這種指令碼一般都會採用注入變數的方式來進行載入，這個時候就很麻煩。比如，我通過載入了d3，但是在使用的時候，就會報錯：

eslint: 'd3' is not defined.(no-undef)
ts2686: 'd3' refers to a umd global, but the current file is a module. consider adding an import instead.

解決起來也還比較簡單。首先處理一下ts，給ts加乙個型別宣告檔案來擴充套件全域性變數。之前我曾經寫過相關的文章，在這裡重複一下。為了方便（並不代表應該寫成any，只是為了方便），在這裡就暫時用一下any：

// shims-global.d.ts
export {};
declare global 
const d3: any;
}

為什麼第一行要寫個export？因為ts的模組機制，需要通過這個export讓編譯器意識到這是乙個模組。在之前的文章裡也有相應的解釋。

然後就是配置eslint。網上目前主要是兩種寫法：

直接在rules裡off掉這條規則。我覺得為了乙個變數而關掉這項檢查，不是乙個很好的方案。

在.eslintrc.js裡加這麼一段：

module.exports =,}
;

可以是可以，但是總覺得有點奇怪。為什麼後面是個true呢？

所以我去查了文件，文件上提供了好幾種寫法，在這裡選兩個常用的：

通過注釋宣告，只在當前檔案生效。

最簡單的寫法如下：

/* global var1, var2 */

還可以對全域性變數的讀寫許可權進行更細粒度的控制。寫法如下：

/* global var1:writable, var2:writable */

在.eslintrc.js進行配置，對整個專案都生效。

module.exports =
};

在這種寫法裡，off是有特殊含義的，可以「遮蔽」原生的全域性變數。比如，我不希望組裡的其他人直接使用promise（比如promise.resolve之類的方法，雖然我不知道什麼情況下我會不想讓別人用，但姑且認為我不想讓其他人用），我就可以加上這麼乙個配置：

module.exports =
};

eslint: 'promise' is not defined.(no-undef)

需要注意的是，這裡不能寫成false，否則規則不會生效，promise仍然是可用的。也由此可見，寫成true的那種寫法並沒有什麼正確性，僅僅是因為有了乙個值而已。