Atom配置Eslint插件规范JavaScript代码的方法-atom-PHP中文网

必须安装linter、linter-eslint和linter-ui-default三者并正确配置：先装steelbrain作者的linter核心，再装linter-eslint，最后手动安装启用linter-ui-default；vue文件还需勾选lint html files、安装eslint-plugin-vue/html，并在.eslintrc.js中配置overrides指定processor。

atom配置eslint插件规范javascript代码的方法

装了 linter-eslint 却没波浪线？不是插件坏了，是 Atom 的 ESLint 集成有硬性依赖链，漏掉任意一环就彻底静默。

必须按顺序装齐三个核心包

Atom 1.24+ 拆分了架构：linter 是底层事件总线，linter-eslint 只是它的 JS 适配器，linter-ui-default 才负责画红线、显示提示数。三者缺一不可。

先搜 linter（作者必须是 steelbrain），安装后执行 Window: Reload（快捷键 Ctrl+Alt+R 或 Cmd+Alt+R）
再搜 linter-eslint（别选带 -atom 后缀或作者不明的包）
最后搜 linter-ui-default（同样认准 steelbrain），装完确认右侧开关是蓝色 Enabled
禁用 linter-gutter、linter-ui-plus 等第三方 UI 插件，它们会压制默认渲染逻辑

.vue 文件里的 JS 不报错？关键开关和配置都得对上

linter-eslint 默认只处理 .js 和 .jsx，.vue 被当 HTML 解析，里面的 <script></script> 块根本不会进 ESLint 流程。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

Settings → Packages → linter-eslint → 勾选 Lint HTML Files
项目里运行：npm install eslint-plugin-vue eslint-plugin-html --save-dev
.eslintrc.js 中必须包含 overrides，且 processor: "vue/vue" 依赖 eslint-plugin-vue；没装它，ESLint 启动直接崩溃，不是静默失效

示例配置片段：

module.exports = {
  root: true,
  overrides: [{
    files: ["*.vue"],
    processor: "vue/vue",
    rules: {"no-unused-vars": "off"}
  }]
};

配置文件不生效？路径和作用域必须精准匹配

linter-eslint 只读项目根目录下的 .eslintrc.js、.eslintrc.json 或 package.json 中的 eslintConfig 字段，完全不认全局配置（比如 ~/.eslintrc.js）。

确保配置文件放在项目最外层目录，不是子文件夹里
右下角状态栏检查当前 grammar：如果是 Plain Text 或 Auto，手动点击切换为 JavaScript 或 Vue Component
进 linter-eslint 设置页，检查是否勾选了 Only lint files matching these scopes；若已勾选，删空内容，或明确填入 source.js、source.vue
root: true 必须设，否则 ESLint 会向上递归查找父级配置，导致规则意外覆盖

和 Prettier 共存时最容易踩的坑

Atom 没有 prettier-eslint 这个插件——这是常见误解。真实路径是 prettier-atom（格式化） + linter-eslint（校验），但必须解耦职责，否则保存时代码来回跳、括号丢失。

prettier-atom 设置里关掉 ESLint Integration
linter-eslint 设置里关掉 Fix errors on save
项目中装 eslint-config-prettier，并在 .eslintrc.js 的 extends 中加入："eslint:recommended", "prettier"
.prettierrc 必须显式声明 parser：{"parser": "vue"}（对 .vue）或 {"parser": "typescript"}（对 .tsx）
prettier-atom 设置页的 File Extensions 列表补上 vue（注意不带点），否则插件压根不触发