2016-10-09 5 views
3

Я пытаюсь добавить React CSS Modules в свой проект, но у меня проблемы с eslint. Мое мнение Войти выглядит следующим образом:eslint с реактивными модулями css

import React, { PropTypes as T } from 'react'; 
 
import {ButtonToolbar, Button} from 'react-bootstrap'; 
 
import Messages from '../Messages/Messages'; 
 
import AuthService from '../../utils/AuthService'; 
 
import CSSModules from 'react-css-modules'; 
 
import styles from './styles.module.css'; 
 

 
class Login extends React.Component { 
 

 
    render() { 
 

 
     let rootStyle = { 
 
      textAlign: 'center' 
 
     }; 
 

 
     let toolbarStyle = { 
 
      display: 'inline-block' 
 
     }; 
 

 
     const { auth } = this.props; 
 

 
     return (
 
      <div styleName="root"> 
 
       <h2>Login</h2> 
 
       <Messages auth={this.props.auth}></Messages> 
 
       <ButtonToolbar styleName="toolbar"> 
 
        <Button bsStyle="primary" onClick={auth.login.bind(this)}>Login</Button> 
 
       </ButtonToolbar> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
Login.PropTypes = { 
 
    location: T.object, 
 
    auth: T.instanceOf(AuthService) 
 
}; 
 

 
export default CSSModules(Login, styles);

А вот мой исходный файл .eslintrc, перед добавлением импорта/игнорировать настройки:

{ 
    "extends": [ 
     "eslint:recommended", 
     "plugin:import/errors", 
     "plugin:import/warnings" 
    ], 
    "plugins": [ 
     "react" 
    ], 
    "parserOptions": { 
     "ecmaVersion": 6, 
     "sourceType": "module", 
     "ecmaFeatures": { 
     "jsx": true, 
     "experimentalObjectRestSpread": true 
     } 
    }, 
    "env": { 
     "es6": true, 
     "browser": true, 
     "node": true, 
     "jquery": true, 
     "mocha": true 
    }, 
    "rules": { 
     "quotes": 0, 
     "no-console": 1, 
     "no-debugger": 1, 
     "no-var": 1, 
     "semi": [1, "always"], 
     "no-trailing-spaces": 0, 
     "eol-last": 0, 
     "no-unused-vars": 0, 
     "no-underscore-dangle": 0, 
     "no-alert": 0, 
     "no-lone-blocks": 0, 
     "jsx-quotes": 1, 
     "react/display-name": [ 1, {"ignoreTranspilerName": false }], 
     "react/forbid-prop-types": [1, {"forbid": ["any"]}], 
     "react/jsx-boolean-value": 1, 
     "react/jsx-closing-bracket-location": 0, 
     "react/jsx-indent-props": 0, 
     "react/jsx-key": 1, 
     "react/jsx-max-props-per-line": 0, 
     "react/jsx-no-bind": 1, 
     "react/jsx-no-duplicate-props": 1, 
     "react/jsx-no-literals": 0, 
     "react/jsx-no-undef": 1, 
     "react/jsx-pascal-case": 1, 
     "react/jsx-sort-prop-types": 0, 
     "react/jsx-sort-props": 0, 
     "react/jsx-uses-react": 1, 
     "react/jsx-uses-vars": 1, 
     "react/no-danger": 1, 
     "react/no-did-mount-set-state": 1, 
     "react/no-did-update-set-state": 1, 
     "react/no-direct-mutation-state": 1, 
     "react/no-multi-comp": 1, 
     "react/no-set-state": 0, 
     "react/no-unknown-property": 1, 
     "react/prefer-es6-class": 1, 
     "react/prop-types": 1, 
     "react/react-in-jsx-scope": 1, 
     "react/require-extension": 1, 
     "react/self-closing-comp": 1, 
     "react/sort-comp": 1, 
     "react/wrap-multilines": 1 
    } 
} 

Запуск этого через eslint дает мне 2 ошибки:

6:20 error Parse errors in imported module './styles.module.css': Unexpected token . (1:1) import/namespace 
6:20 error Parse errors in imported module './styles.module.css': Unexpected token . (1:1) import/default 

Когда я добавляю следующие настройки в файл .eslintrc:

"settings": { 
     "import/ignore": [".css$"] 
    } 

разбора ошибок уходят, но следующие ошибки имеют место:

1:8 error No default export found in module  import/default 
1:17 error PropTypes not found in 'react'   import/named 
5:8 error No default export found in module  import/default 

Любые предложения о том, как получить eslint играть хорошо с Реагировать CSS Модули?

+0

Я должен добавить, что я также создал файл .eslintignore, содержащий шаблон '**/*. Css', но он, похоже, не влияет на ошибки, создаваемые eslint. –

ответ

1

Я нашел одно решение: если изменить импорт/игнорировать настройки в .eslintrc для

"settings": { 
     "import/ignore": [".css$","node_modules/*"] 
    } 

тогда все ошибки пылеобразования уходят. Я предполагаю, что все в порядке, чтобы не нарисовать все в node_modules, но он приглушает меня, что я не знаю, что вызывало ошибки в первую очередь.

Смежные вопросы