如何在VS Code中用Prettier实现IntelliJ式的额外缩进效果？

Prettier默认会让return后的JSX与return (的括号对齐，要实现类似IntelliJ的额外缩进效果，得结合ESLint的React规则来配置，同时保证两者兼容。

具体步骤 #

1. 安装依赖
   在项目根目录运行：

   npm install eslint eslint-plugin-react eslint-config-prettier eslint-plugin-prettier --save-dev
   

2. 配置ESLint
   新建或修改项目根目录的.eslintrc.js：

   module.exports = {
     extends: [
       "eslint:recommended",
       "plugin:react/recommended",
       "prettier",
       "plugin:prettier/recommended"
     ],
     plugins: ["react", "prettier"],
     rules: {
       // 让JSX标签相对于return括号多缩进一级（值和你的tab宽度一致，比如2或4）
       "react/jsx-indent": ["error", 2],
       // 让props相对于JSX标签再缩进一级
       "react/jsx-indent-props": ["error", 2],
       "prettier/prettier": "error"
     },
     settings: {
       react: { version: "detect" }
     }
   };
   

3. 配置VS Code
   打开设置（快捷键Ctrl+,或Cmd+,），添加以下配置：

   {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "prettier.requireConfig": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
   

4. 验证效果
   保存代码后，就能得到你想要的格式化结果：

   return (     
               <Component
                        Prop={123}
               /> 
       )
   

注意点 #

• 确保VS Code已安装Prettier扩展（esbenp.prettier-vscode）。
• 缩进数值要和你设置的editor.tabSize匹配，比如tab设为4的话，规则值就改成4。
• 若已有其他ESLint/Prettier配置，注意合并规则避免冲突。

内容的提问来源于stack exchange，提问作者iKotyaX