如何消除ESLint提示的@emotion/core未使用导入错误？

你碰到的问题是ESLint没识别到jsx是通过/** @jsx jsx */指令在实际使用的，只关闭@typescript-eslint/no-unused-vars没用——因为可能生效的是原生ESLint的no-unused-vars规则，或者你没配置专门适配Emotion的ESLint插件。试试下面几个可行的方案：

方案1：安装并配置eslint-plugin-emotion（推荐） #

这个插件是专门为Emotion打造的，能自动识别@jsx指令和css的用法，从根源上避免这类误报：

1. 先安装插件：

npm install eslint-plugin-emotion --save-dev
# 用yarn的话
yarn add eslint-plugin-emotion --dev

2. 在你的eslintrc.js里添加配置：

module.exports = {
  plugins: ['emotion'],
  rules: {
    'emotion/jsx-import': 'error',
    'emotion/no-unused-css': 'error'
  }
};

方案2：同时禁用原生与TypeScript版的未使用变量规则 #

如果暂时不想装插件，可以同时关掉原生ESLint和TypeScript专属的未使用变量检查规则：

module.exports = {
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'off'
  }
};

注意：这种方式会全局关闭未使用变量的检查，可能漏掉真正的无用代码，不建议长期使用。

方案3：单独忽略当前导入行的报错 #

要是只需要处理单个文件的情况，可以在导入行上方加ESLint注释，精准忽略这一行的误报：

/** @jsx jsx */
/* eslint-disable-next-line no-unused-vars */
import { jsx, css } from '@emotion/core';

内容的提问来源于stack exchange，提问作者Negin