首先安装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）

配置 ESLint 校验

确保项目根目录有 .eslintrc.js 或 .eslintrc.json 配置文件。若没有，可初始化：

npm init @eslint/config

SublimeLinter-eslint 默认会查找项目中的 ESLint 配置并启用。确认 SublimeLinter 设置中启用了 eslint：

• 菜单 Preferences → Package Settings → SublimeLinter → Settings
• 检查 "linters" 中 eslint 是否启用，且可指定全局或项目级 node_modules 路径

配置 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 自动格式化效果，提升编码效率与规范性。

# sublime  # js  # 前端  # json  # node  # npm  # 编码  # 工具  # mac  # 配置文件  # 报错提示 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  如何在阿里云ECS服务器部署织梦CMS网站？  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  如何打造高效商业网站？建站目的决定转化率  制作电商网页,电商供应链怎么做？  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  jQuery中的100个技巧汇总  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  利用JavaScript实现拖拽改变元素大小  网站制作大概多少钱一个,做一个平台网站大概多少钱？  JavaScript常见的五种数组去重的方式  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  EditPlus中的正则表达式 实战(4)  郑州企业网站制作公司,郑州招聘网站有哪些？  Laravel如何为API编写文档_Laravel API文档生成与维护方法  如何在景安云服务器上绑定域名并配置虚拟主机？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  如何在万网开始建站？分步指南解析  如何快速搭建支持数据库操作的智能建站平台？  如何快速查询域名建站关键信息？  Android中AutoCompleteTextView自动提示  如何在服务器上三步完成建站并提升流量？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  EditPlus中的正则表达式 实战(1)  Firefox Developer Edition开发者版本入口  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  JavaScript Ajax实现异步通信  创业网站制作流程,创业网站可靠吗？  python中快速进行多个字符替换的方法小结  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Win11应用商店下载慢怎么办 Win11更改DNS提速下载【修复】  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  java中使用zxing批量生成二维码立牌  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何注册花生壳免费域名并搭建个人网站？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  Mybatis 中的insertOrUpdate操作  如何快速登录WAP自助建站平台？  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  phpredis提高消息队列的实时性方法(推荐)  php485函数参数是什么意思_php485各参数详细说明【介绍】  清除minerd进程的简单方法  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  如何快速完成中国万网建站详细流程？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  JavaScript如何操作视频_媒体API怎么控制播放