ESLint/Prettier自动添加括号报错，Redux Saga代码遇表达式预期问题

一、搞定「expression expected」错误 #

• 改拼写：你代码里的saveContnet是笔误，应该是saveContent，拼写错误会让ESLint认不出这是合法的action函数，直接触发表达式错误
• 补分号：在yield put(actions.saveContent(datafromlocalStorage))末尾加上分号，部分ESLint规则对generator函数的语句格式有要求，缺分号会触发语法报错
• 别留空catch块：空catch块大概率会触发ESLint的no-empty规则，至少加个错误日志方便排查，比如console.error('拉取数据失败:', e)

二、解决ESLint/Prettier自动加多余括号的问题 #

• 调整Prettier配置：在项目根目录的.prettierrc里添加以下配置，避免不必要的括号包裹：

  {
    "arrowParens": "avoid",
    "wrapIIFE": false,
    "expressionSpacing": true
  }
  

• 关闭ESLint强制括号规则：如果你的ESLint启用了wrap-iife规则，在.eslintrc里把它关掉：

  {
    "rules": {
      "wrap-iife": "off"
    }
  }
  

• 检查表达式嵌套：原代码里的JSON.parse(localStorage.getItem("studentInfo") || '{}')本身不需要额外括号，要是Prettier还是乱加，排查下是否有其他自定义规则冲突

修正后的完整代码 #

function fetchData(services: requiredServices) {
  return function*() {
    try {
      let datafromlocalStorage = JSON.parse(localStorage.getItem("studentInfo") || '{}');
      if (datafromlocalStorage && Object.keys(datafromlocalStorage).length < 1) {
        const { data } = yield call(services.dataManagement.getData);
        datafromlocalStorage = data;
        localStorage.setItem("studentInfo", JSON.stringify(data));
      }
      yield put(actions.saveContent(datafromlocalStorage)); // 修正拼写+补分号
    } catch(e) {
      console.error('获取学生信息失败:', e);
      // 这里可以dispatch错误action，比如yield put(actions.fetchFailed(e))
    }
  }
}

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