Atom代码提示框大小调节_Atom编辑器CSS覆盖默认UI样式【优化】-atom-PHP中文网

atom代码提示框需通过styles.less修改.max-height、line-height和padding协同调整，仅调font-size会导致溢出错位；应使用@text-color等内置变量适配主题。

atom代码提示框大小调节_atom编辑器css覆盖默认ui样式【优化】

Atom 的代码提示框（autocomplete-plus 弹出面板）默认尺寸偏小、行高紧凑，尤其在高分屏或启用较大字体时容易遮挡内容、难以阅读。它不响应系统缩放，也不能通过主题 CSS 直接用 font-size 粗暴放大——那样只会让文字溢出、布局错乱。真正可控的方式是修改其容器的 max-height、line-height 和内边距，并确保弹窗能随内容动态撑开。

怎么改 autocomplete-plus 提示框高度和字体可读性

提示框由 autocomplete-plus 包渲染，样式入口在 Atom 的全局 styles.less 文件里。直接覆盖它的 .autocomplete-suggestion-list 和子元素即可，无需动插件源码。

打开 styles.less：按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Application: Open Your Stylesheet 回车

在文件末尾添加以下规则（可按需调整数值）：

.autocomplete-suggestion-list {
  max-height: 400px;
  font-size: 14px;
}
.autocomplete-suggestion-list .suggestion-description {
  font-size: 12px;
  line-height: 1.5;
}
.autocomplete-suggestion-list .suggestion-icon,
.autocomplete-suggestion-list .suggestion-text {
  padding: 6px 12px;
}

保存后立即生效，无需重启 Atom；若没变化，检查是否被其他 UI 主题的 !important 覆盖（极少见，但 one-dark-ui 某些版本有）

为什么不能只调 `font-size`？

单纯增大 font-size 会导致两个问题：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.suggestion-text 容器高度固定，文字会垂直溢出，看不到下半部分
图标区（.suggestion-icon）和文字区未同步缩放，造成图文错位或图标被裁剪
行高（line-height）未重设时，多行描述文字会挤在一起，可读性反而下降

所以必须同时控制 padding、line-height 和容器 max-height，三者协同才稳定。

如何让提示框适配深色/浅色主题自动切换

Atom 的语法和 UI 主题是分离的，styles.less 是全局生效的。如果你用了 one-dark-ui + one-dark-syntax 组合，上面写的 CSS 就已生效；但若你切到 one-light-ui，背景色变白，而提示框默认背景仍是深灰——这时文字就看不清了。

安全做法是显式定义背景和文字色：

.autocomplete-suggestion-list {
  background-color: @app-background-color;
  color: @text-color;
}
.autocomplete-suggestion-list .suggestion-text {
  color: @text-color;
}

@app-background-color 和 @text-color 是 Atom 内置 LESS 变量，会随当前 UI 主题自动取值（比如深色主题下为 #282c34 / #abb2bf，浅色下为 #ffffff / #333333）
变量只在 styles.less 中可用，不能用于普通 CSS 文件