vscode eslint prettier 支持JSX格式化

在 VSCode 中配置 ESLint 和 Prettier 以支持 JSX 的格式化，主要涉及以下几个方面： ### 安装必要的插件和依赖 首先确保你的开发环境中安装了以下 VSCode 插件： - **ESLint**：用于代码质量检查。 - **Prettier - Code formatter**：用于自动格式化代码。 接着，在项目中安装相关的 npm 包。打开终端并运行以下命令： ```bash npm install eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-react-hooks --save-dev ``` 这些包提供了对 React 和 JSX 的支持，并禁用与 Prettier 冲突的 ESLint 规则 [^4]。 ### 创建或更新配置文件 #### `.eslintrc` 或 `.eslintrc.cjs` 创建一个 `.eslintrc.cjs` 文件（如果你使用的是较新的 Node.js 版本），内容如下： ```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` 配置来避免冲突 [^1]。 #### `prettier.config.js` 创建一个 `prettier.config.js` 文件，定义 Prettier 的格式化规则： ```javascript module.exports = { trailingComma: "none", semi: false, singleQuote: true, printWidth: 300, arrowParens: "avoid" }; ``` 这个配置确保 Prettier 按照你期望的方式格式化代码 [^4]。 ### 配置 VSCode 设置 在 VSCode 中，打开 `settings.json` 并添加以下配置，以确保保存时自动格式化代码并使用 Prettier 作为默认格式化工具： ```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]。 ### 解决 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 ``` 此配置将 Vetur 的 HTML 格式化器设置为 Prettier，并同步其格式化选项 [^4]。 ### 忽略不需要格式化的文件 创建 `.eslintignore` 文件，列出 ESLint 不应处理的文件或目录： ``` *.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin .eslintrc.cjs prettier.config.js src/assets tailwind.config.js postcss.config.js ``` 这个文件帮助 ESLint 忽略不必要的文件，提高性能 [^3]。 ---