Atom代码提示插件汇总_Atom编辑器前端开发必备插件包【推荐】-atom-PHP中文网

autocomplete-plus仅是补全框架，不提供语言逻辑；真正起作用的是配套provider插件，如atom-ternjs（js/ts）、autocomplete-html（html）、autocomplete-css（css），它们负责解析上下文、推导类型并提供具体建议。

atom代码提示插件汇总_atom编辑器前端开发必备插件包【推荐】

autocomplete-plus 本身不提供语言逻辑，只是补全框架

Atom 默认自带 autocomplete-plus，但它只是个壳——没有语法分析能力，也不懂 JS 或 HTML 该怎么补。你敲 document. 没反应，不是插件坏了，是缺配套的语言支持包。

真正起作用的是它依赖的“provider”插件，比如：atom-ternjs（JS/TS 补全）、autocomplete-html（HTML 标签和属性）、autocomplete-css（CSS 属性值）。这些 provider 才负责解析当前文件上下文、读取项目依赖、推导变量类型。

装了 autocomplete-plus 却没补全？先检查是否装了对应语言的 provider
atom-ternjs 需要项目根目录有 jsconfig.json 或 tsconfig.json 才能精准推导模块路径
如果用 ES6+ 动态 import 或 Webpack 别名，autocomplete-paths 要配合 atom-ternjs 的 projectRoot 设置才生效

linter-eslint + atom-ide-ui 组合比单独用 linter-jshint 更贴近现代工程流

很多老教程还在推 linter-jshint，但它只做基础语法检查，不支持 ESLint 规则配置、自动修复（--fix），更没法对接 Prettier 或 TypeScript 类型错误。而 linter-eslint 直接调用本地项目里的 eslint CLI，规则、插件、解析器全由你项目自己控制。

搭配 atom-ide-ui 和 ide-typescript 后，还能在编辑器里看到类型提示、函数签名、跳转定义（Ctrl+Click），这才是接近 VS Code 的体验。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

必须确保项目中已安装 eslint（本地优先，全局不推荐）
.eslintrc.js 里启用 "lintOnSave": true 才能在保存时自动修复格式问题
如果打开文件后没提示，检查右下角状态栏是否显示 “ESLint: Ready” —— 不显示说明配置路径或 Node 版本不匹配

autocomplete-modules 在 monorepo 场景下容易失效

autocomplete-modules 专为 CommonJS 的 require() 设计，对 ESM 的 import 支持弱，遇到 pnpm 或 yarn workspaces 的软链接结构时，常报 “No modules found”。它不会读 package.json#exports 或 node_modules/.pnpm 下的真实路径。

替代方案更可靠：atom-ternjs 开启 useNodeRequire 并指定 nodePath，或直接换用 ide-typescript（它走 tsserver，天然支持所有现代模块解析逻辑）。

如果你的项目用了 Vite / Next.js / Remix，autocomplete-modules 基本可以卸载
想保留路径补全？装 autocomplete-paths，它支持 src/ 别名、@/ 别名，且不依赖模块系统
别名路径映射需在 jsconfig.json 里配好 "compilerOptions.baseUrl" 和 "paths"

Emmet 不只是写 HTML，CSS 缩写也要开对模式

很多人只用 Emmet 写 div.container>p.text$*3，却不知道 CSS 缩写同样高效：m10 → margin: 10px;，bgc#f00 → background-color: #f00;。但默认情况下，只有在 .css 或 .scss 文件里才触发，.vue 或 .svelte 的 <style></style> 块需要手动开启。

进阶用法：在 JS 字符串里写 CSS 时（比如 styled-components），装 emerald 插件并配置 scope 为 source.js string.css，就能在模板字符串里用 Emmet。