atom中代码变斜体源于语法高亮scope匹配与主题css渲染，需通过editor: log cursor scope查准scope，再在styles.less中用.syntax--前缀+!important覆盖对应规则。
Atom 里代码变斜体，不是编辑器“加了效果”，而是语法高亮规则匹配到了某个 scope，然后主题 CSS 把它渲染成斜体。想取消，得从 scope 入手——不是改字体设置，也不是关主题，是切断「匹配→渲染」链。
怎么知道哪个词被标成了斜体 scope？
把光标停在你想取消斜体的关键词上（比如 data-id、className 或 v-if），按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS），输入 Editor: Log Cursor Scope 并执行。看输出最后一行，类似：
source.js meta.jsx.js support.type.property-name.js
末尾那个 support.type.property-name.js 就是它当前的 scope——也是你该下手的目标。
- 别只看中间词（比如
property-name），必须带完整路径，不同语言下同名 scope 可能指向不同样式 - JSX 中的
onClick和 Vue 模板里的v-ifscope 完全不同，不能一概而论 - 如果输出里压根没出现斜体相关的 scope（比如没有
italic字样），说明斜体来自主题全局设置，而非语法识别
如何用 CSS 规则强制取消斜体？
打开 Atom 的样式表：Atom → Stylesheet…（或直接编辑 ~/.atom/styles.less），在文件末尾加一段针对具体 scope 的覆盖规则：
.syntax--support.syntax--type.syntax--property-name.syntax--js {
font-style: normal !important;
}
注意几点：
- scope 名中的点（
.）要转成.syntax--前缀，连起来写，不能空格或换行 - 必须加
!important，否则主题自带样式会优先级更高 - 如果 scope 是
keyword.control.directive.vue，对应写成.syntax--keyword.syntax--control.syntax--directive.syntax--vue - 改完保存，不用重启 Atom，但需确保当前文件重新触发语法解析（比如切换 Tab 再切回来）
为什么改了 styles.less 还是斜体？常见失效原因
斜体没消失，大概率不是规则写错，而是下面某条卡住了：
-
styles.less文件本身语法错误（比如少括号、多逗号），Atom 不报错但整段 CSS 不加载——检查右下角有没有红色提示条 - scope 写对了，但用了错误的选择器层级，比如漏了
.syntax--前缀，或把source.js当成 scope 加进去了 - 主题本身在
.syntax--variable等更宽泛 scope 上设了斜体，把你更精确的规则覆盖了——得用更长、更具体的 selector，或者加!important - 你在 JSX 文件里改了
support.type.property-name.js，但实际文件 grammar 是source.js.jsx，scope 输出可能是support.type.property-name.jsx，差一个后缀就无效
不想逐个配 scope？试试禁用整个语法斜体组
有些主题（比如 One Dark）默认对所有 entity、support、keyword 类 scope 启用斜体。如果你不关心细分语义，只想全局去斜体，可以批量覆盖：
.syntax--entity,
.syntax--support,
.syntax--keyword {
font-style: normal !important;
}
但这会同时影响函数名、类名、关键字等，可能让代码可读性下降。真正需要精细控制时，还是得回到 Log Cursor Scope + 单独写 rule 这条路——因为 Atom 的语法高亮和字体样式是解耦的，没有“一键关斜体”的开关，只有“告诉它：这个东西，不准斜。”
