Javascript 解决文档的 linter 错误 no-undef

Solving linter error no-undef for document

提问by FacundoGFlores

I am using airbnbextension for linting my React Project. Now, in my index.jsI have:

我正在使用airbnb扩展来检查我的 React 项目。现在，在我的index.js我有：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

linter says:

linter 说：

no-undef 'document' is not defined.at line 8 col 3

How can I solve this problem?

我怎么解决这个问题？

回答by Nick Bartlett

There are a number of ways to solve/get around this. The two key ways are to either specify documentas globalor to set the eslint-envas browser(what you probably want). You can do this 1) in-file, 2) in the configuration, or even 3) when running from the CLI.

有很多方法可以解决/解决这个问题。两种关键方法是指定document为global或设置eslint-env为browser（您可能想要的）。您可以在 1) 文件中执行此操作，2) 在配置中执行此操作，甚至 3) 在从 CLI 运行时执行此操作。

1) In-file:

1) 文件内：

1. Set the environment as browserin your file:

   /* eslint-env browser */
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(
     <App />,
     document.getElementById('root'),
   );
   

2. Add it as a global in the file itself:

   /* global document */
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(
     <App />,
     document.getElementById('root'),
   );
   

1. browser在您的文件中设置环境：

   /* eslint-env browser */
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(
     <App />,
     document.getElementById('root'),
   );
   

2. 将其添加为文件本身的全局变量：

   /* global document */
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   
   ReactDOM.render(
     <App />,
     document.getElementById('root'),
   );
   

2) In the eslint configuration:

2）在eslint配置中：

1. Set the environment as browserin the configuration:

   {
     "env": {
       "browser": true,
       "node": true
     }
   }
   

2. Add it as a global in the configuration:

   {
     "globals": {
       "document": false
     }
   }
   

1. browser在配置中设置环境：

   {
     "env": {
       "browser": true,
       "node": true
     }
   }
   

2. 在配置中将其添加为全局：

   {
     "globals": {
       "document": false
     }
   }
   

3) From the CLI:

3）从CLI：

1. Using env: eslint --env browser,node file.js

2. Using globals: eslint --global document file.js

1. 使用环境： eslint --env browser,node file.js

2. 使用全局变量： eslint --global document file.js

Resources:
Specifying Globals with ESLint
Specifying Environments with ESLint
Specifying env with ESLint CLI
Specifying globals with ESLint CLI

资源：
指定全局与ESLint
与ESLint指定环境
指定包膜与ESLint CLI
指定全局与ESLint CLI