macOS 怎么在 VS Code 中配置 ESLint 与 Prettier 统一代码规范

雨墨大大_1887

雨墨大大_1887

2026-09-21

609人浏览

原创

关键在于让eslint专注逻辑检查、prettier专管格式,通过安装官方eslint和prettier扩展、项目级安装eslint prettier eslint-config-prettier eslint-plugin-prettier依赖,配置.eslintrc.cjs启用plugin:prettier/recommended并确保eslint-config-prettier置于extends末尾以禁用冲突规则,创建.prettierrc定义格式细节,在.vscode/settings.json中启用"source.fixall.eslint"且关闭"editor.formatonsave",并设置.eslintignore排除node_modules等目录,重启vs code后保存文件即可自动修复逻辑错误且不报格式警告。

macos 上用 vs code 配合 eslint 和 prettier 实现统一代码规范,关键不是装完插件就完事,而是让 eslint 专注检查逻辑问题(比如未使用变量、潜在错误),prettier 专管格式(缩进、引号、分号、换行等),两者不打架、各司其职。

安装必要插件和项目依赖

先确保 VS Code 里装了两个官方扩展:ESLint(作者 Dirk Baeumer)和 Prettier(作者 Esben Petersen)。别装“Prettier ESLint”这类合体插件,容易出问题。

然后在项目根目录终端执行:

  • npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
  • 推荐版本:ESLint v8+、Prettier v3+,全局安装没用,VS Code 默认优先调用项目内本地二进制

配置 ESLint 接管格式校验权

创建 .eslintrc.cjs(注意是 .cjs 后缀,适配现代 Node 环境),内容如下:

WeChat macOS Proxy
WeChat macOS Proxy

macOS 微信消息自动化工具。通过 GUI 自动化实现:发送消息给指定联系人、读取聊天内容、监控新消息。适用于需要自动化微信操作的场景,如定时发送、批量回复、消息备份等。依赖 peekaboo 进行屏幕截图和 UI 交互。仅支持 macOS。开源地址:https://github.com/chairmanmia...

下载
  • module.exports = { extends: ['eslint:recommended', 'plugin:prettier/recommended'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error' } };
  • eslint-config-prettier 必须放在 extends 数组最后,它会自动禁用所有与 Prettier 冲突的格式类规则(如 quotes、semi、indent 等)
  • 不用手动写一堆 "quotes": "off",否则容易漏、难维护

定义 Prettier 格式细节并绑定保存动作

在项目根目录建 .prettierrc,写入你团队约定的风格,例如:

  • {"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}
  • VS Code 设置里不要重复指定格式选项(比如别在 settings.json 里再设 "editor.tabSize")
  • .vscode/settings.json 中启用保存时修复:
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  • 同时关闭 Prettier 自动格式化:
    "editor.formatOnSave": false

排除干扰并验证效果

确保项目根目录有 .eslintignore,至少包含:

  • node_modules/
  • dist/
  • build/

改完配置后重启 VS Code 窗口(不是重载窗口),打开一个 JS 文件,故意写错缩进或引号,保存一下——应该自动修正且不报格式类 ESLint 警告。

相关文章

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

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

下载

相关标签:

macos 代码规范 vs code

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

相关专题

更多
Docker容器化部署与DevOps实践
Docker容器化部署与DevOps实践

本专题面向后端与运维开发者,系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排,以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示,帮助开发者实现应用的快速部署、环境一致性与运维自动化。

2026.02.11

199

16

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

2026.09.20

20

13

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

2026.09.20

0

15

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

2026.09.16

180

9

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

2026.09.16

100

10

Pandas时间序列分析与可视化报表
Pandas时间序列分析与可视化报表

本专题整理Pandas日期转换、时间索引、重采样、滚动窗口、时区处理、plot绘图、Styler表格样式和报表输出方法。

2026.09.16

80

23

Pandas数据筛选索引与清洗处理
Pandas数据筛选索引与清洗处理

本专题整理Pandas中的loc、iloc、条件筛选、query查询、缺失值处理、重复值删除、类型转换和字符串列清洗方法。

2026.09.16

60

25

Pandas数据读取导入与文件导出处理
Pandas数据读取导入与文件导出处理

本专题整理Pandas读取CSV、Excel、JSON、SQL、Parquet等文件的方法,以及to_csv、to_excel、to_sql和to_parquet等常用数据导出流程。

2026.09.16

40

27

GDB怎么设置断点
GDB怎么设置断点

本专题介绍GDB按照函数名、源代码行号和文件位置设置断点的方法,详细说明run、continue、next、step等命令的配合使用,帮助定位程序崩溃、逻辑异常及代码未按预期执行的问题。

2026.09.11

400

28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Miniconda官方安装文档
Miniconda官方安装文档

共0课时 | 0人学习

HBuilderX macOS 安装手册
HBuilderX macOS 安装手册

共0课时 | 0人学习

Apifox下载与安装手册
Apifox下载与安装手册

共0课时 | 0人学习