如何在VSCode中配置ESLint或Prettier？

首先安装ESLint和Prettier插件并重启VSCode，接着在项目中初始化.eslintrc.js和.prettierrc配置文件，然后设置VSCode的defaultFormatter为Prettier并启用formatOnSave和codeActionsOnSave，确保保存时先执行ESLint修复再Prettier格式化，最后通过安装eslint-config-prettier避免规则冲突，实现代码风格统一与自动格式化。

在 VSCode 中配置 ESLint 和 Prettier，可以实现代码风格统一和自动格式化。关键是正确安装插件、配置文件，并让两者协同工作，避免冲突。

安装必要的插件

打开 VSCode 扩展商店，搜索并安装以下两个核心插件：

• ESLint：提供语法检查和错误提示
• Prettier - Code formatter：负责代码格式化

安装完成后，重启编辑器确保插件生效。

项目中初始化配置文件

在项目根目录下创建或确认存在以下配置文件：

如果使用 ESLint，运行命令初始化：

根据提示选择模块类型、框架、是否启用 TypeScript 等，最终生成 .eslintrc.js 或 .eslintrc.json 文件。

对于 Prettier，可在项目根目录创建 .prettierrc 文件，定义格式规则，例如：

冬瓜配音

AI在线配音生成器

66

查看详情

配置 VSCode 设置以协同工作

按下 Ctrl + , 打开 VSCode 设置，搜索 “default formatter”，设置 Prettier 为默认格式化工具。

然后在项目根目录创建 .vscode/settings.json 文件，内容如下：

这个配置的作用是：保存文件时，先用 ESLint 修复可修复的问题，再用 Prettier 格式化代码。

确保 Prettier 不与 ESLint 冲突

为了避免格式规则冲突，推荐安装 eslint-config-prettier，它会关闭 ESLint 中与 Prettier 冲突的规则。

然后在 .eslintrc 的 extends 中添加：

基本上就这些。配置完成后，保存代码时会自动执行 ESLint 检查和 Prettier 格式化，提升开发效率和代码一致性。

以上就是如何在VSCode中配置ESLint或Prettier？的详细内容，更多请关注php中文网其它相关文章！