如何在Atom中为.js文件里的JSX启用HTML标签自动补全？

当然可以！Atom 完全支持配置 JSX 文件的 HTML 标签自动补全，让你拥有和 HTML 文件一样的流畅编写体验，我给你整理了两种实用方法：

方法一：调整Atom内置的语法关联与补全设置 #

• 打开Atom设置界面：使用快捷键 Cmd+,（Mac）或 Ctrl+,（Windows/Linux），或者通过顶部菜单栏的 Atom > Preferences（Mac）/ File > Settings（Windows/Linux）进入。
• 切换到Editor标签页，确认Enable autocomplete选项处于勾选状态，这是自动补全功能的基础开关。
• 关联JSX语法：回到设置主界面，切换到Packages标签页，搜索language-babel（这是Atom处理JSX/ES6+的核心包，默认已安装）。
• 进入language-babel的设置页面，确认.jsx文件已被关联到JavaScript (Babel)语法；同时找到Autocomplete相关选项，确保启用了JSX自动补全支持。

方法二：安装专门的JSX补全插件（推荐） #

如果你想要更强大、更贴合HTML补全习惯的功能，推荐安装专门的插件：

• 打开Atom包管理器：按下Cmd+Shift+P（Mac）/ Ctrl+Shift+P（Windows/Linux），输入Install Packages and Themes并回车。
• 在搜索框输入autocomplete-jsx，找到对应插件后点击Install完成安装。
• 安装后，打开.jsx文件（若在.js文件中写JSX，需在Atom右下角的语法选择器中切换为JavaScript (Babel)），输入标签开头如<div，就能看到熟悉的HTML标签补全提示，还支持自动闭合标签。
• 若需要自定义补全规则，可进入autocomplete-jsx的设置页面，调整触发方式、补全范围等选项。

额外小技巧 #

• 如果你已经安装了emmet插件，也可以在它的设置页面中将JSX添加到支持的语法列表，这样就能用Emmet的缩写快速生成复杂的JSX结构，比如输入div.container>ul>li*3就能一键生成对应的JSX代码。

内容的提问来源于stack exchange，提问作者Ralph David Abernathy