ESLint、Prettier插件的安装与使用
2022-08-18 08:49:08
ESLint 和 Prettier 是前端开发中常用的代码检查和格式化工具，结合使用可以统一代码风格并自动修复部分问题。以下是详细的安装与配置步骤：
一、安装插件安装 ESLint 插件在 VSCode 的扩展商店（EXTENSIONS）中搜索 ESLint，点击安装即可。
安装 Prettier 插件同样在扩展商店中搜索 Prettier - Code formatter，完成安装。
安装 EditorConfig 插件搜索 EditorConfig for VS Code 并安装，确保团队成员使用不同编辑器时也能统一代码风格。
用户级配置（对所有项目生效）
打开 VSCode 设置（Ctrl + ,），选择 Settings > Open Settings (JSON)。
添加以下配置，实现保存时自动格式化并修复 ESLint 问题：
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }}工作区配置（仅对当前项目生效）
在项目根目录创建 .vscode 文件夹，并在其中新建 settings.json 文件。
添加以下配置，扩展支持的文件类型（如 TypeScript、Vue）：
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["typescript", "javascript", "vue"]}
- 在项目根目录创建 .editorconfig 文件，定义统一的代码风格规则（如缩进、字符集等）。
- 示例配置（覆盖编辑器默认规则）：root = true[*]charset = utf-8indent_style = spaceindent_size = 2insert_final_newline = truetrim_trailing_whitespace = trueend_of_line = auto
自动修复与格式化
保存文件时（Ctrl + S），ESLint 会自动检查代码风格问题，Prettier 会根据配置格式化代码。
若存在无法自动修复的问题，VSCode 会提示错误位置，需手动修改。
冲突解决
若 ESLint 和 Prettier 规则冲突，可通过以下方式解决：
安装 eslint-config-prettier 插件，禁用 ESLint 中与 Prettier 冲突的规则。
在项目根目录的 .eslintrc.js 中添加：
module.exports = { extends: ['prettier'] // 确保 Prettier 规则优先级最高};团队协作
将 .editorconfig、.eslintrc.js 和 .prettierrc（Prettier 配置文件）提交到版本控制，确保团队成员使用相同规则。
- 项目依赖：需在项目中安装 ESLint 和 Prettier 的 Node.js 包（通过 npm install eslint prettier --save-dev）。
- 配置优先级：工作区配置 > 用户配置 > 编辑器默认配置。
- 扩展支持：确保插件版本与 VSCode 兼容，避免因版本冲突导致功能异常。
通过以上步骤，可实现代码的自动检查与格式化，显著提升开发效率和代码一致性。
热门标签
