Rozwiązywanie problemów związanych z błędem liniowym no-undef dla dokumentu

Question

Używam rozszerzenia airbnb do lintowania mojego projektu React. Teraz, w moim index.js mam:

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

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

linter mówi:

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

Jak mogę rozwiązać ten problem?

Answer 1

Istnieje wiele sposobów rozwiązania/obejścia tego problemu. Dwa główne sposoby to określenie document jako global lub ustawienie eslint-env jako browser (co prawdopodobnie chcesz). Możesz to zrobić 1) w pliku, 2) w konfiguracji, a nawet 3) podczas uruchamiania z CLI.

1) In-pliku:

1. Ustaw środowiska jako browser w pliku:

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

2. dodać jako globalny w samym pliku:

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

2) W eslint co nfiguration:

1. Ustaw środowiska jako browser w konfiguracji:

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

2. dodać jako globalny w konfiguracji:

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

3) z CLI :

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

2. Korzystanie globalne: eslint --global document file.js

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