配置 Prettier 和 ESLint 可实现 VSCode 保存时自动格式化与规范检查。首先安装 Prettier 和 ESLint 扩展，创建 .prettierrc 定义格式规则，如分号、单引号、行宽等；在 settings.json 中启用 “editor.formatOnSave” 并设置默认格式化工具为 Prettier。接着初始化 ESLint，生成 .eslintrc.js 配置文件，选择环境与规则，集成 “eslint:recommended” 与 “plugin:prettier/recommended”，安装 eslint-config-prettier 插件避免规则冲突。最后统一 settings.json：开启保存自动修复 “source.fixAll.eslint”，指定验证语言类型，并将配置文件提交版本控制，确保团队一致性。通过本地安装依赖和项目级配置，实现跨设备统一开发体验。
在使用 VSCode 进行开发时，代码的格式化与规范检查能极大提升团队协作效率和代码质量。通过集成工具如 Prettier 和 ESLint，可以实现保存时自动格式化、语法规范校验、错误高亮提示等功能。
配置 Prettier 实现代码格式化
Prettier 是一个流行的代码格式化工具，支持 JavaScript、TypeScript、CSS、HTML、JSON 等多种语言。
安装 Prettier 扩展：打开 VSCode 扩展市场（Ctrl+Shift+X）搜索 “Prettier – Code formatter” 并安装创建配置文件（可选但推荐）：
在项目根目录下创建 .prettierrc 文件定义格式规则：
{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2}
启用保存时自动格式化：
打开 VSCode 设置（Ctrl+,）勾选 “Editor: Format On Save” 或添加如下配置到 settings.json：
"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"集成 ESLint 进行规范检查
ESLint 能帮助发现代码中的潜在问题并强制执行编码规范，尤其适合 JavaScript/TypeScript 项目。
安装 ESLint 扩展：在扩展中搜索 “ESLint” 并安装由 Microsoft 提供的版本初始化 ESLint（若项目未配置）：
npm init @eslint/config按照提示选择环境、模块系统、框架等，生成 .eslintrc.js 或 .eslintrc.json 文件。
常见 ESLint 配置示例：
{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:prettier/recommended" ], "rules": { "no-console": "warn", "no-unused-vars": "error" }}确保 ESLint 与 Prettier 协同工作：
安装依赖：
npm install --save-dev eslint-config-prettier在 extends 中包含 prettier 以关闭冲突规则统一设置：让编辑器自动处理一切
将格式化与检查流程整合进 VSCode，实现“保存即修复”体验。
推荐 settings.json 配置：
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"], "editor.defaultFormatter": "esbenp.prettier-vscode"}这样，在保存文件时，ESLint 会自动修复可修复的问题，Prettier 完成格式化。
项目级配置优先于全局设置
建议在项目中使用本地安装的工具和配置文件，避免不同机器间差异。
使用 .vscode/settings.json 存放项目专属编辑器设置将 .prettierrc、.eslintrc.* 提交到版本控制通过 .prettierignore 和 .eslintignore 忽略构建产物
基本上就这些。合理配置后，VSCode 能在你写代码时默默帮你保持风格统一，减少低级错误，提升整体开发体验。
以上就是VSCode代码：格式化与规范检查的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/197415.html
微信扫一扫 
支付宝扫一扫 
