WebStorm 2017.3中JSX自动补全异常问题求助

我之前也碰到过这个烦人的小问题，折腾了好一会儿才找到几个靠谱的解决办法，你可以挨个试试：

• 调整React JSX的属性补全默认格式
  先打开WebStorm的设置面板：Windows/Linux按Ctrl+Alt+S，Mac直接按Cmd+,就行。然后依次导航到Languages & Frameworks > JavaScript > React JSX这个选项。在这个页面里，你能看到一个叫Attribute value style的设置项，默认可能选的是Expression (with {})，把它改成String (with "")，点击确定后重启编辑器，再试试自动补全className，应该就会默认生成字符串形式的className=""了。

• 检查并修正Live Templates（实时模板）
  有时候是自定义的实时模板搞的鬼。还是在设置里，进入Editor > Live Templates，找到React分组，看看有没有和className相关的模板。如果有的话，把模板内容从className={$END$}改成className="$END$"就行。要是找不到专门的className模板，也可以自己新建一个：点击右上角的+号选Live Template，缩写设成className，模板文本填className="$END$"，然后在Applicable in里勾选JSX，保存后就能用了。

• 清除编辑器缓存重启
  这个方法堪称编辑器“玄学问题”杀手。点击顶部菜单栏的File > Invalidate Caches...，在弹出的窗口里勾选Clear file system cache and local history，然后点Invalidate and Restart。等WebStorm重启完毕，再测试JSX的自动补全，很多奇怪的小问题都会消失。

如果以上方法都没搞定，其实也可以考虑手动输入className=""先凑合用，或者如果条件允许的话，升级到更近期的WebStorm版本（毕竟2017.3确实比较老了，后续版本修复了不少JSX相关的bug）。

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