如何设置Atom编辑器保存时自动格式化

P粉328763957

P粉328763957

2026-08-05

996人浏览

原创

atom-beautify和prettier-atom默认均不启用保存自动格式化,须逐语言手动开启beautify on save或format on save;atom-beautify需正确识别language-id、安装apm版cli工具并配置文件类型映射,prettier-atom需禁用linter-eslint的fix on save、手动添加.vue等language id且仅读取prettier.config.js。

如何设置atom编辑器保存时自动格式化

atom-beautifyprettier-atom 都能实现保存时自动格式化,但默认都不开——不是装完就生效,而是得逐语言手动开、配对、校验环境。

beautify_on_save 必须按语言单独开启

atom-beautifyBeautify On Save 开关是语言隔离的:JavaScript 开了,CSS 没勾,保存 .css 文件就完全没反应。

操作路径:Settings → Packages → atom-beautify → Settings → 向下滚动到「Language Specific Options」→ 展开 javascriptcsshtml 等区块 → 每个都手动勾选 Beautify On Save

注意:.vue 文件默认被识别为 text.html.basic<script></script> 块不会触发 JS 格式化;必须手动点右下角 language-id 切成 Vue Component,或在 Config → Core → File Types 中加映射:"*.vue": ["source.vue"]

常见坑:勾了全局 On Save,但没进语言区块里再勾一次——等于白开。

Atom编辑器mac版下载
Atom编辑器mac版下载

最流行的的开源编辑器

下载

prettier-atom 的 formatOnSave 与 linter-eslint 冲突

prettier-atom 默认启用 Format on save,但它和 linter-eslint 共存时容易互相覆盖:
  • linter-eslint 若开了 Fix on save,会抢在 Prettier 前修改代码,导致格式反复跳动、光标错位
  • 必须进 linter-eslint 设置 → 关掉 Fix on save
  • prettier-atom 不处理 .vue.svelte,需在插件设置里手动添加 language ID:vuesvelte
  • 配置文件读取顺序:只认 prettier.config.js,忽略同目录下的 .prettierrc

快捷键 Ctrl+S 要重绑,否则“格式化但没保存”

Atom 默认把 ctrl-s 绑定到 core:save,你只加一条 prettier:format,两个命令会并发执行:先格式化,再立刻用旧内容覆盖保存——看起来像没反应。

正确做法:

  • 打开 keymap.cson(菜单 → Atom → Open Your Keymap)
  • 先取消默认绑定:'*': 'ctrl-s': 'unset!'
  • 再按语言范围重绑:'.source.js': 'ctrl-s': 'prettier:format',或 '.source.css': 'ctrl-s': 'atom-beautify:beautify-editor'
  • 同时确保对应插件的 Format on save 也已开启,否则未保存缓冲区可能静默失败

beautifier not found?别 npm install,用 apm

atom-beautify 是调度器,不自带格式化引擎;报 beautifier not found 说明它找不到 js-beautifyprettier 模块。

npm 安装无效——Atom 运行在自己的 Node.js 环境里,和终端不是同一个上下文:

  • 统一用 apm install js-beautify(不是 npm install -g
  • 已装过仍报错?运行 apm rebuild,尤其 Atom 升级后必做
  • Windows 用户若遇 PowerShell 执行策略拦截,临时运行:Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  • C/C++、Python 等需额外 CLI 工具:如 uncrustifyautopep8,且其可执行文件必须在系统 PATH

最后检查右下角 language-id:显示 Plain textAuto 就直接失效,必须手动切到明确类型(如 JavaScript)。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

atom编辑器 atom插件

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c语言编程软件有哪些
c语言编程软件有哪些

c语言编程软件有GCC、Clang、Microsoft Visual Studio、Eclipse、NetBeans、Dev-C++、Code::Blocks、KDevelop、Sublime Text和Atom。更多关于c语言编程软件的问题详情请看本专题的文章。php中文网欢迎大家前来学习。

2023.11.02

2374

18

Qt Creator按钮响应设置方法
Qt Creator按钮响应设置方法

信号槽是 Qt 开发的核心机制。本专题整理 Qt Creator 中按钮点击、菜单触发、输入变化、窗口事件、自定义信号、自动连接槽函数和手动 connect 写法,帮助用户理解界面控件如何和 C++ 代码联动。

2026.08.05

0

10

Qt Creator新建项目使用教程
Qt Creator新建项目使用教程

本专题整理 Qt Creator 新建项目、打开已有工程、项目模板选择、目录结构、源文件管理、构建目录、运行配置和项目迁移方法,重点解决新手不知道选 qmake 还是 CMake、项目打不开、文件不参与编译等常见问题。

2026.08.05

0

10

maven常用插件使用大全
maven常用插件使用大全

PHP中文网精心整理Maven主流插件用法合集,涵盖编译、测试、打包等常用插件使用大全。从基础配置到进阶实战,详细解析各插件功能与适用场景,助你轻松掌握Maven自动化构建,解决Java项目开发痛点,是开发者必备的实用指南。

2026.08.05

0

31

PyCharm快速入门指南
PyCharm快速入门指南

本专题汇总了PyCharm快速入门的全套指南与教程,涵盖从官网下载安装、创建第一个Python项目、配置虚拟环境,到代码编辑、运行调试等基础操作,并整理了版本控制(Git)集成、常用高效快捷键及实用插件等进阶技巧,助你快速上手这款高效的Python IDE。

2026.08.05

2

17

PyCharm运行程序教程大全
PyCharm运行程序教程大全

本专题汇总了PyCharm运行程序的多种方式与详细操作步骤,涵盖通过主菜单Run、点击工具栏绿色三角图标、使用快捷键Shift+F10(或Ctrl+Shift+F10)等基本运行方法,以及配置运行/调试参数、设置PYTHONPATH环境变量、管理多脚本运行与交互式Python控制台调试等进阶技巧,助您全面掌握在PyCharm中高效运行与管理Python程序的方法。

2026.08.05

0

14

Maven零基础入门教程
Maven零基础入门教程

本合集由PHP中文网精心整理,提供Maven零基础入门到完整使用的保姆级教程。内容涵盖环境安装、核心配置、仓库管理及项目构建等核心知识点。通过详细步骤解析与代码示例,助你快速掌握Maven的依赖管理与自动化构建,轻松解决Java项目中的各种痛点,是新手入门与进阶的必备指南。

2026.08.05

2

18

Maven安装及配置教程
Maven安装及配置教程

本合集由PHP中文网精心整理,提供Maven安装配置与环境配置详情指南。内容涵盖Maven下载、解压安装、环境变量配置、阿里云镜像加速及本地仓库修改等全流程。教程通俗易懂,帮助开发者轻松解决依赖管理难题,快速掌握Maven核心构建技能,是Java开发者的必备实战指南。

2026.08.05

2

24

Selenium WebDriver元素定位与页面操作教程
Selenium WebDriver元素定位与页面操作教程

本专题整理Selenium WebDriver元素定位、XPath、CSS Selector、等待机制、窗口切换、Frame处理、Alert弹窗、Cookie操作和文件上传等核心用法。

2026.08.05

8

26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.4万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 131.8万人学习