vscode VUE3 eslint prettier 支持JSX格式化

在 Vue3 项目中配置 ESLint 和 Prettier 以支持 JSX 格式化，需完成以下关键步骤： ### 安装必要的依赖 首先，在项目根目录下运行以下命令安装相关开发依赖包： ```bash npm install eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-react-hooks --save-dev ``` 这些包提供了对 React、JSX 以及可访问性规则的支持，并确保 ESLint 与 Prettier 的规则不冲突 [^1]。 ### 创建或更新 ESLint 配置文件 创建 `.eslintrc.cjs` 文件，内容如下： ```json { "env": { "browser": true, "es2021": true }, "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:jsx-a11y/recommended", "prettier"], "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module" }, "plugins": ["react", "jsx-a11y", "react-hooks"], "rules": { // 可根据需要覆盖默认规则 }, "settings": { "react": { "version": "detect" } } } ``` 该配置启用了对 React、JSX 语法及可访问性规则的支持，并继承了 `prettier` 配置来避免冲突 。 ### 创建 Prettier 配置文件 创建 `prettier.config.js` 文件，定义格式化规则： ```javascript module.exports = { trailingComma: "none", semi: false, singleQuote: true, printWidth: 300, arrowParens: "avoid" }; ``` 此配置将影响代码格式化的风格，例如使用单引号、禁用分号等 [^2]。 ### 配置 VSCode 设置 打开 VSCode 的 `settings.json` 文件并添加以下内容，以启用保存时自动格式化和修复 ESLint 错误： ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "eslint.alwaysShowStatus": true, "[javascript]": { "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }, "[javascriptreact]": { "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } } ``` 此设置确保 JavaScript 和 React 文件在保存时通过 ESLint 自动修复问题，而不是直接调用 Prettier 格式化 [^2]。 ### 处理 Vue 文件中的 HTML 格式化（Vetur 插件） 如果你的项目中包含 `.vue` 文件，且使用了 Vetur 插件，可以通过以下配置避免其与 Prettier 冲突： ```json "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatterOptions": { "prettier": { "trailingComma": "none", "semi": false, "singleQuote": true, "arrowParens": "avoid", "printWidth": 300 } }, "vetur.ignoreProjectWarning": true ``` 这将确保 `.vue` 文件中的 HTML 模板部分也由 Prettier 格式化，保持统一风格 [^2]。 ---