J'essaie d'ajouter des modules CSS React à mon projet, mais je rencontre des problèmes avec eslint. Mon point de vue de connexion ressemble à ceci:eslint avec les modules css de réaction
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);
Et voici mon fichier .eslintrc d'origine, avant d'ajouter une importation/ignorer la mise:
{
"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
}
}
En l'utilisant eslint me donne 2 erreurs:
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
Lorsque j'ajoute le paramètre suivant au fichier .eslintrc:
"settings": {
"import/ignore": [".css$"]
}
les erreurs de Parse disparaissent, mais les erreurs suivantes prennent leur place:
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
Toutes les suggestions sur la façon d'obtenir eslint jouer agréable avec React CSS Modules?
Je dois ajouter que j'ai également créé un fichier .eslintignore contenant le motif '**/*. Css', mais cela ne semble pas avoir d'effet sur les erreurs produites par eslint. –