webstorm行号开关在编辑器最左侧gutter区域右键勾选show line numbers即可启用，该设置按文件类型或作用域独立生效，非全局控制。
WebStorm 里行号开关藏在编辑器最左侧 gutter 区域
行号默认开启，但很多人找不到开关——不是在 Settings 里翻「Appearance」，而是直接右键编辑器最左侧那条窄窄的灰色区域（gutter），勾选 Show Line Numbers 就生效。这个设置按文件类型或作用域独立生效，所以某个文件没显示行号，大概率是该文件上下文没启用，不是全局关了。
常见错误现象：
• 右键点错位置（点了代码区或中间空白，不是最左 gutter）
• 启用了 Vim 插件 + Soft Wraps，导致行号按逻辑行计数（软换行也编号），和物理行数对不上
• 远程开发模式或某些项目模板默认禁用，需手动开启
Visual Studio 中行号是语言级与全局双层控制
VS 的行号开关分两层：一是针对当前语言（如 C# → 工具 > 选项 > 文本编辑器 > C# > 常规 → 勾选 行号），二是所有语言通用的全局设置（工具 > 选项 > 所有语言 > 常规 → 行号）。后者优先级更高，一旦关闭，各语言设置无效。
实操建议：
• 用 Ctrl + Q 搜索 行号，能快速跳转到对应设置页
• 如果只希望某语言显示行号，确保全局开启，再单独关掉其他语言的选项
• 行号纯属视图辅助，不会写入源码，也不影响编译或运行
HTML 页面中用 Prism.js 实现可靠行号，别手写 CSS 计数器
纯 CSS 用 counter-reset/counter-increment 模拟行号看似简单，但极易失效：遇到 white-space: pre-wrap 折行、含内联 HTML、tab 缩进未转空格时，计数就乱。Prism.js 的 line-numbers 插件靠 JS 解析换行符后注入 DOM 节点，能准确匹配动态内容、懒加载甚至 Vue/React 渲染后的代码块。
启用方式：
• 引入 prism-line-numbers.css 和 prism-line-numbers.js
• 给 <code> 标签加 class line-numbers（注意不是 js line-numbers，旧文档写法已过时）
• 若代码块异步加载（如 Markdown 渲染后），必须手动调用 Prism.highlightAll()，否则行号不出现
• 别同时引入 prism-okaidia.css 和 prism-line-numbers.css，后者已含基础样式，重复引入可能覆盖颜色
隐藏行号时要注意作用域和触发时机
WebStorm 右键 gutter 关闭后，仅对该文件或当前作用域生效；VS 中关闭全局行号选项，所有语言立即隐藏；而 HTML 页面里用 Prism.js，得移除 line-numbers 类并重新调用 Prism.highlightElement()，否则 DOM 中的行号节点仍存在。
最容易被忽略的一点：行号不是“开关即刻同步”的视觉开关。WebStorm 的 gutter 设置可能缓存，改完需点击编辑器任意处刷新；Prism.js 在 DOM 变更后不会自动重绘行号，必须显式触发高亮函数——这点在 SPA 或 Markdown 编辑器里尤其关键，否则新插入的代码块永远没行号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
