React搭建静态站点出现no-useless-computed-key非必要计算属性错误

这个是ESLint内置的no-useless-computed-key规则抛出的校验错误，触发场景为你在定义样式对象时，对固定的媒体查询字符串键不必要地使用了计算属性语法，示例错误写法如下：

const pageStyle = {
  // 此处对固定字符串使用[]计算属性属于冗余写法，触发报错
  ['@media (max-width:780px)']: {
    width: '100%',
    padding: '0 12px'
  }
}

该规则的设计目的是消除对象中无意义的计算属性写法，减少代码冗余。如果计算属性的键是固定的字符串/数字常量，不需要动态计算，就会被判定为无用计算属性触发报错。
错误提示截图：

你可以根据自己的项目需求选择以下任意一种方案：

• 方案1：删除冗余的计算属性语法，直接使用字符串作为对象键（最推荐）
  修改后代码示例：

const pageStyle = {
  '@media (max-width:780px)': {
    width: '100%',
    padding: '0 12px'
  }
}

主流CSS-in-JS库（Emotion、styled-components、JSS等）均原生支持这种写法，不会影响样式的正常生效。

• 方案2：临时关闭当前代码的规则校验
  如果不想修改原有写法，可以通过注释临时关闭规则检测：
  • 单文件全局禁用：在文件顶部添加注释 /* eslint-disable no-useless-computed-key */
  • 仅禁用当前行校验：在报错行的上一行添加注释 // eslint-disable-next-line no-useless-computed-key
• 方案3：全局关闭该ESLint规则
  如果团队统一习惯使用计算属性写媒体查询键，可以在项目的ESLint配置文件（一般为.eslintrc、.eslintrc.js等）中关闭该规则：

// .eslintrc.js 示例配置
module.exports = {
  rules: {
    'no-useless-computed-key': 'off'
  }
}

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