Gutenberg: eslint extend: '__' is not defined

[strarsis]

Describe the bug
'__' is not defined although eslint has been extended with @wordpress/eslint-plugin/[...].
recommended, react and jsx-a11y don't declare __ a global.

To Reproduce
Steps to reproduce the behavior:

1. Extend eslint with e.g. @wordpress/eslint-plugin/recommended
2. Add some code that uses __, e.g. adding a new Gutenberg block style.
3. Lint will complain that '__' is not defined.

Expected behavior
__ and other i18n methods are found by eslint.

Additional context
https://github.com/WordPress/gutenberg/issues/14724

[swissspidy]

__ is not a global function exposed by the Gutenberg packages.

It is part of wp.i18n, so you'd need to use wp.i18n.__().

If you have a Babel/webpack setup and use import { __ } from '@wordpress/i18n', then ESLint should not complain either.

[strarsis]

@swissspidy: Importing __ makes sense (import { __ } from '@wordpress/i18n';).
However, during build webpack tries to use a @wordpress/i18n package:
````
This dependency was not found:

• @wordpress/i18n in ./resources/assets/scripts/editor.js
  To install it, you can run: npm install --save @wordpress/i18
  ````
  Shouldn't these modules be available in Gutenberg editor page scope?
  How can webpack be configured to use it from the page/global scope?

[strarsis]

Using const { __ } = wp.i18n; re-uses the global wp:
https://wp.zacgordon.com/2018/01/09/how-to-use-wp-i18n-__-to-allow-for-translation-of-your-gutenberg-block-text/

[swissspidy]

Shouldn't these modules be available in Gutenberg editor page scope?
How can webpack be configured to use it from the page/global scope?

Check out the default webpack config from the wp-scripts package. Basically, you need to set the externals configuration option in webpack, which tells webpack that @wordpress/i18n actually should point to wp.i18n.

This way, you get all the benefits from import without duplicating any code.