Vue项目中使用eslint + prettier规范代码风格

2023-12-30 18:38:16

代码风格规范：ESLint 和 Prettier 的联姻

统一团队编码规范

在团队协作开发的项目中，如果没有明确的代码风格规范，不同团队成员的编码风格就会形成五花八门的局面，导致代码的可读性和一致性难以保证。为了解决这一问题，我们引入了 ESLint 和 Prettier，这两大利器将携手为我们的代码风格规范保驾护航。

ESLint 和 Prettier 的优势

1. 统一代码风格

ESLint 作为一款代码审查工具，能够检查代码中的语法错误和不规范之处。Prettier 则是一位代码格式化大师，可以自动修复代码中的错误和不规范之处，让代码更加整洁易读。

2. 提高开发效率

ESLint 和 Prettier 能够自动检测和修复代码中的问题，解放了开发人员在代码审查和修复上的时间，让他们专注于更重要的任务，从而提高开发效率。

3. 提升代码质量

ESLint 和 Prettier 不仅能提升代码的可读性和一致性，更重要的是，它们可以帮助我们发现潜在的错误和安全漏洞，让代码更加健壮可靠，减少出错的可能性。

使用 ESLint 和 Prettier 的步骤

1. 安装 ESLint 和 Prettier

npm install --save-dev eslint prettier

2. 配置 ESLint 和 Prettier

创建 .eslintrc.js 文件

module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { singleQuote: true }],
  },
};

创建 .prettierrc.js 文件

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  bracketSpacing: true,
  jsxBracketSameLine: true,
  arrowParens: 'avoid',
};