首先安装sublimeLinter、SublimeLinter-eslint和jsPrettier插件,确保ESLint和Prettier正确配置;接着在项目中初始化并设置.eslintrc和.prettierrc文件,通过eslint-config-prettier消除规则冲突;最后在Sublime中配置路径与保存时自动格式化,实现代码校验与美化。

在 sublime text 中配置 ESLint 和 Prettier,能实现前端代码的实时校验与自动格式化。关键在于正确安装插件、配置 node 环境下的工具,并设置合适的运行规则。
安装必要插件
打开 Sublime Text,使用 Package Control 安装以下插件:
- SublimeLinter:代码校验框架
- SublimeLinter-eslint:集成 ESLint 校验
- JsPrettier:Prettier 格式化支持(需本地安装 Prettier)
按 Ctrl+Shift+P 输入 “Install Package” 搜索并安装上述插件。
配置 ESLint 校验
确保项目根目录有 .eslintrc.js 或 .eslintrc.json 配置文件。若没有,可初始化:
npm init @eslint/config
SublimeLinter-eslint 默认会查找项目中的 ESLint 配置并启用。确认 SublimeLinter 设置中启用了 eslint:
立即学习“前端免费学习笔记(深入)”;
- 菜单 Preferences → Package Settings → SublimeLinter → Settings
- 检查 “linters” 中 eslint 是否启用,且可指定全局或项目级 node_modules 路径
若 ESLint 不生效,检查 Sublime 控制台(console)是否有路径错误。
配置 Prettier 格式化
安装 JsPrettier 插件后,需确保系统已安装 Prettier:
npm install -g prettier
或在项目内安装:
npm install --save-dev prettier
修改 JsPrettier 设置(Preferences → Package Settings → JsPrettier → Settings):
- 设置
"prettier_cli_path"指向全局或项目内的 Prettier 路径(如 mac 全局路径通常为/usr/local/bin/prettier) - 启用
"auto_format_on_save"实现保存时自动格式化 - 可配置 tabSize、singleQuote 等选项,或让 Prettier 自动读取项目中的 .prettierrc 文件
协同工作:ESLint + Prettier
避免 ESLint 与 Prettier 冲突,推荐使用 eslint-config-prettier 关闭 ESLint 的格式化规则:
npm install --save-dev eslint-config-prettier
在 .eslintrc 中加入:
"extends": ["eslint:recommended", "prettier", "plugin:prettier/recommended"]
这样 ESLint 只负责代码质量检查,Prettier 负责格式化,两者分工明确。
基本上就这些。配置完成后,保存文件即可看到 ESLint 报错提示和 Prettier 自动格式化效果,提升编码效率与规范性。


