带有反应 css 模块的 Eslint

Posted 2023-02-21

【中文标题】带有反应 css 模块的 Eslint

【英文标题】：Eslint with react css modules

【发布时间】：2017-02-17 17:47:30

【问题描述】：

我正在尝试将 React CSS 模块添加到我的项目中，但我遇到了 eslint 的问题。我的登录视图如下所示：

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 与 React CSS 模块配合得很好有什么建议吗？

【问题讨论】：

我应该补充一点，我还创建了一个包含模式**/*.css 的 .eslintignore 文件，但它似乎对 eslint 产生的错误没有任何影响。

我没有用过react-css-modules，所以我不确定是不是因为它。但是我看了一下，我只是想建议使用npmjs.com/package/patch-styles

【参考方案1】：

我确实找到了一种解决方案：如果我将 .eslintrc 中的导入/忽略设置更改为

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

然后所有的 linting 错误都会消失。我想避免在node_modules 中删除所有内容是可以的，但它一直困扰着我，我不知道首先是什么导致了错误。

【参考方案2】：

您可以在配置文件中使用 ignorePatterns 告诉 ESLint 忽略特定文件和目录。 ignorePatterns 模式遵循与 .eslintignore 相同的规则。请see the the .eslintignore 归档文档以了解更多信息。

    "ignorePatterns": ["*.css", "**/vendor/*.css"],
    "rules": 
        //...
    

我检查了以前在 eslint 版本 8 或更高版本中不起作用的答案，this one 对我来说很好。

【参考方案3】：

这是因为import styles from './styles.module.css'; 使 Node 尝试像 JS 一样加载 CSS 模块，并且在您的情况下它会导致服务器端渲染或 Jest 崩溃。正确的解决方案是为服务器端/Jest 执行配置 Babel，以将这些 CSS 导入转换为样式映射，就像 Webpack 所做的那样。有a plugin for that。