轻松掌握Vue C码风格缩进篇项目代码风格建议在团队合作中统一这些配置以避免代码风格上的冲突

作者：网络发烧程序猿 | 发布时间：2025-06-20 |

ESLint是一个静态代码分析工具，能帮你识别和报告JavaScript中的问题。通过配置ESLint规则，可以确保你的代码缩进风格一致。

首先，确保你的Vue CLI项目中安装了ESLint。如果没有，可以通过命令行安装：

npm install eslint --save-dev

然后在项目根目录下创建或编辑.eslintrc.js文件，添加以下配置：

module.exports = {
  rules: {
    indent: ['error', 2]
  }
};

这样，ESLint就会检查你的代码，确保每个代码块都有2个空格的缩进。

Prettier是一个代码格式化工具，它能与ESLint结合使用，自动格式化代码，确保缩进一致。

安装Prettier：

npm install prettier --save-dev

配置Prettier，在项目根目录下创建或编辑.prettierrc文件，添加以下配置：

{
  "tabWidth": 2,
  "useTabs": false
}

将Prettier配置与ESLint结合，编辑.eslintrc.js文件，添加：

"plugins": ["prettier"],
"extends": ["plugin:prettier/recommended"],
"rules": {
  "prettier/prettier": "error"
}

现在，每次保存文件时，Prettier都会自动格式化代码。

VS Code是一个非常受欢迎的代码编辑器，你可以通过设置VS Code的缩进规则来保持代码风格一致。

打开设置，搜索“tab size”，找到“Editor: Tab Size”和“Editor: Insert Spaces”。

将“Editor: Tab Size”设置为2，将“Editor: Insert Spaces”选中，确保使用2个空格进行缩进。

保存工作区设置，这样你的设置就会应用于当前工作区。

通过配置ESLint规则、使用Prettier插件自动格式化代码，以及在VS Code中设置缩进规则，你可以有效地控制Vue CLI项目中的缩进。这样不仅可以保证代码的一致性，还能提高代码的可读性和维护性。

建议在团队合作中，统一这些配置，以避免代码风格上的冲突。