【问题标题】:Eslint babel suppress error when importing styles into react component将样式导入反应组件时,Eslint babel 抑制错误
【发布时间】:2017-07-13 19:28:14
【问题描述】:

我正在使用 es6 react 并将我的样式导入到组件中:

import styles from './MyStyle.sass';

我正在使用这些 npm 模块对 eslint 进行 linting:

"babel-eslint": "^6.1.2",
"eslint": "^3.16.0",
"eslint-plugin-react": "^6.10.0",

这是我的(有点长).eslintrc.yml 文件:

---
  extends:
    - plugin:react/recommended

  env:
    browser: true
    node: true
    es6: true

  parserOptions:
   ecmaVersion: 6
   sourceType: "module"
   ecmaFeatures:
    jsx: true

  globals:
    __DEV__: true
    __SERVER__: true

  plugins:
    - react

  parser: "babel-eslint"
  rules:
    react/jsx-uses-vars: 1
    react/prop-types: [1, { ignore: [children] }]

    semi: 0
    key-spacing: 1
    curly: 0
    consistent-return: 0
    space-infix-ops: 1
    camelcase: 0
    no-spaced-func: 1
    no-alert: 1
    eol-last: 1
    comma-spacing: 1
    eqeqeq: 1

    # possible errors
    comma-dangle: 0
    no-cond-assign: 2
    no-console: 0
    no-constant-condition: 2
    no-control-regex: 2
    no-debugger: 2
    no-dupe-args: 2
    no-dupe-keys: 2
    no-duplicate-case: 2
    no-empty-character-class: 2
    no-empty: 2
    no-ex-assign: 2
    no-extra-boolean-cast: 2
    no-extra-parens: 0
    no-extra-semi: 2
    no-func-assign: 2
    no-inner-declarations: 2
    no-invalid-regexp: 2
    no-irregular-whitespace: 2
    no-negated-in-lhs: 2
    no-obj-calls: 2
    no-regex-spaces: 2
    no-sparse-arrays: 2
    no-unexpected-multiline: 2
    no-unreachable: 2
    use-isnan: 2
    valid-jsdoc: 2
    valid-typeof: 2

    no-redeclare: 2

    init-declarations: 2
    no-catch-shadow: 2
    no-delete-var: 2
    no-label-var: 2
    no-shadow-restricted-names: 2
    no-shadow: 2
    no-undef-init: 2
    no-undef: 2
    no-undefined: 2
    no-unused-vars: 2
    no-use-before-define: 2

问题是 eslint 抱怨“默认导出未在导入的模块中声明”关于导入的 styles 模块。

编辑:
1)同样的问题适用于进口,如

import logo_img from './img/home_logo.png'

2) 当然我正在使用 webpack 和 style/sass/css/url/file 加载器

问题:
如何取消此警告?

【问题讨论】:

  • 您是否从样式文件中导出了默认值??
  • 不,它是一个 sass/css 文件,我猜 babel 和它的加载器会负责将它包装到一个模块中

标签: reactjs ecmascript-6 lint eslint


【解决方案1】:

您可以通过像这样进行批量导入来屏蔽警告:

import * as styles from './MyStyle.sass';

您也可以通过这种方式包含常规节点模块,因为在导入这些模块时,此错误也很常见。

【讨论】:

  • 这适用于样式加载器 (1),但不适用于图像加载器 (2)。这意味着这不起作用:import * as logo_img from './img/home_logo.png'
猜你喜欢
  • 2022-01-26
  • 2016-12-11
  • 2022-12-03
  • 2018-11-09
  • 2020-02-29
  • 1970-01-01
  • 2020-08-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多