Sublime如何配置ESLint语法检查 Sublime JS代码规范设置【规范】

9次阅读

sublime安装ESLint插件不生效,首要确认node和eslint是否可用;需全局安装eslint、配置正确executable路径、确保项目有ESLint配置文件、选对syntax、开启tooltip等。

Sublime如何配置ESLint语法检查 Sublime JS代码规范设置【规范】

Sublime 安装 ESLint 插件后不生效?先确认 Node 和 eslint 是否可用

ESLint 不是 Sublime 原生功能,必须依赖本地 eslint 命令行工具。如果配置完插件没反应,大概率是环境链路断了。

  • 终端运行 which eslintmacos/linux)或 where eslintwindows),确认有输出路径;没有则需全局安装:npm install -g eslint
  • 确保项目根目录有 .eslintrc.js.eslintrc.jsonpackage.json 中含 eslintConfig 字段,否则 ESLint 不知道用什么规则校验
  • Sublime 的 SublimeLinter 插件本身不带 ESLint,必须额外装 SublimeLinter-eslint(不是 ESLint-Formatter 或其他名字相近的)

SublimeLinter-eslint 找不到本地 node_modules/eslint 怎么办

默认情况下,SublimeLinter-eslint 会优先查找全局 eslint,但多数项目用的是本地 node_modules/.bin/eslint。不配好就只能报 eslint: not found

  • 打开 Sublime → Preferences → Package Settings → SublimeLinter → Settings,在右侧用户设置中加:
  • {     "linters": {         "eslint": {             "executable": ["./node_modules/.bin/eslint"]         }     } }
  • 注意路径写法:["./node_modules/.bin/eslint"] 是数组格式,不能写成字符串;Windows 用户可尝试 ["./node_modules/.bin/eslint.cmd"]
  • 如果项目用了 pnpm 或 yarn pnp,node_modules/.bin 可能不存在,此时需改用 yarn eslintpnpm exec eslint,对应 executable 设为 ["yarn", "eslint"]

JSX/typescript 文件不被 ESLint 检查?检查 syntax 和 lint_mode

Sublime 默认对 .jsx.ts 文件可能用错语法高亮(如用 javaScript 而非 javascript (Babel)),导致 linter 不触发。

  • 右下角点击当前 syntax 名称 → 选 JavaScript (Babel)(支持 JSX)或 TypeScript(需装 SublimeLinter-tslint 或配合 typescript-eslint
  • 确保 SublimeLinter 设置里 "lint_mode": "background"(默认),否则保存才检查,实时反馈会延迟
  • 若用 TypeScript,eslint 必须已配置 @typescript-eslint/parser,且 .eslintrc.jsparserOptions.project 指向正确的 tsconfig.json,否则大量类型相关规则(如 no-unused-vars)会误报

错误提示不显示、只标红不给信息?调整 gutter 和 tooltip 行为

ESLint 报错只在行号旁显示小红点,但没文字提示,常见于 SublimeLinter 的 ui 配置未启用。

  • SublimeLinter.sublime-settings 用户设置中加入:
  • {     "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",     "tooltip_font_size": 12,     "show_marks_in_minimap": true }
  • SublimeLinter-eslint 默认不开启 inline Error tooltip,需手动开:"show_hover_tooltip": true
  • 如果提示文字太小或重叠,可加 css 覆盖(Preferences → Browse Packages → User 新建 Widget Styles.css):
  • .linter-warning, .linter-error {     font-size: 13px !important; }

实际用起来最常卡住的,是 executable 路径没对上项目管理器(npm/yarn/pnpm)和 Node 版本,以及 syntax 切换遗漏。这两个点没调通,其余设置都白搭。

text=ZqhQzanResources