前端全栈必备！Vite+Vue3+TS项目规范代码攻略

通过eslint、prettier、StyleLint和husky规范Vite3 + Vue3.2 + TS项目的代码

规范代码的重要性

在前端开发中，规范代码至关重要，它不仅能保证项目的质量，还能提高可维护性。对于Vite3 + Vue3.2 + TS项目，我们推荐使用eslint、prettier、StyleLint和husky这四款工具来规范代码。

eslint：检测代码错误和潜在问题

ESLint是一款强大的JavaScript代码检查工具。它可以帮助我们发现代码中的错误和潜在问题，并提出修复建议。ESLint支持多种规则，我们可以根据自己的项目需求配置这些规则。

prettier：统一代码格式

Prettier是一款代码格式化工具。它可以自动将我们的代码按照统一的格式进行格式化。Prettier支持多种语言，包括JavaScript、TypeScript、CSS和HTML。

StyleLint：检查CSS代码

StyleLint是一款CSS代码检查工具。它可以帮助我们发现CSS代码中的错误和潜在问题，并提出修复建议。StyleLint支持多种规则，我们可以根据自己的项目需求配置这些规则。

husky：确保提交前代码规范

Husky是一款git提交规范工具。它可以帮助我们确保在提交代码之前，代码已经通过了所有的检查。Husky支持多种钩子，我们可以根据自己的项目需求配置这些钩子。

安装和配置

首先，我们需要安装必要的依赖项：

npm install --save-dev eslint prettier stylelint husky

接下来，分别配置ESLint、Prettier、StyleLint和Husky：

ESLint配置：

// .eslintrc.js
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
  },
};

Prettier配置：

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "always"
}

StyleLint配置：

// .stylelintrc.json
{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "rules": {
    // 自定义规则
  },
}

Husky配置：

// .huskyrc.js
module.exports = {
  hooks: {
    'pre-commit': 'npm run lint',
  },
};

运行命令

安装并配置好所有工具后，我们可以运行以下命令来规范代码：

npm run lint

总结

通过使用eslint、prettier、StyleLint和husky这四款工具，我们可以轻松地规范Vite3 + Vue3.2 + TS项目的代码，提高代码的质量和可维护性。

常见问题解答

Q1：如何自定义ESLint规则？

A： 在.eslintrc.js文件中修改rules对象即可。

Q2：如何忽略某些文件或代码行？

A： 可以在.eslintignore文件中指定要忽略的文件或代码行。

Q3：如何修改Prettier的格式化规则？

A： 在.prettierrc.json文件中修改相应的规则即可。

Q4：如何添加额外的StyleLint规则？

A： 在.stylelintrc.json文件的extends数组中添加新的规则包即可。

Q5：如何禁用Husky的某些钩子？

A： 在.huskyrc.js文件的hooks对象中注释掉相应的钩子即可。