Global変数はglobalsに入れろ（ESLint）

Global変数がESLintに引っかかる

　もうこれ3回くらいハマってるので、反省の意を込めて記事書いておきます。内容はタイトルで完結しているので、補足程度の内容を追記します。

問題点

　Global変数は何も設定しないと、存在しないものとしてESLintのエラーが表示されます。例えば、GASのSpreadSheetAppとか、GoogleChromeExrtentionのchromeとかですね。

対応策

　下記の様にeslintrc.jsのglobalsへ入れます。以上！

.eslintrc.js

module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': ['error'],
    semi: ['error', 'always'],
    'semi-spacing': ['error', { after: true, before: false }],
    'semi-style': ['error', 'last'],
    'no-extra-semi': 'error',
    'no-unexpected-multiline': 'error',
    'no-unreachable': 'error',
  },
  globals: {
    chrome: false,
  },
  env: {
    node: true,
    jest: true,
  },
};

単純だからこそ、引っかかりやすい…かもしれないので是非思い出してください。

補足

コメント欄で補足いただいたので紹介させていただきます。

Chrome 拡張機能であれば、env.webextensions を true にされるのが良いかと。globals に chrome を含める必要がなくなります。
https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments

宣伝

本当に大した機能じゃないですが、拡張機能リリースしたのでよかったらみてみてください。
githubもpublicにしてみました。
https://github.com/R-Az/custum_tabGroup
https://chrome.google.com/webstore/detail/tabgroupcustoms/aiidfmkcfamdjancnfkppnbhakahcndm?hl=ja