返回

ESlint + Prettier + Stylelint + Husky：Vue3 + TypeScript + Vite项目指南

前端

本文提供了一个分步指南，展示如何在Vue3 + TypeScript + Vite项目中使用ESLint、Prettier、Stylelint和Husky等工具来确保代码质量、代码统一格式和代码风格。

前言

在软件开发过程中，代码质量和统一风格对于项目的可维护性和可读性至关重要。ESLint、Prettier、Stylelint和Husky是前端开发中常用的工具，可以帮助我们实现这些目标。本文将详细介绍如何在Vue3 + TypeScript + Vite项目中使用这些工具。

工具简介

  • ESLint：一个流行的JavaScript代码检查工具，可以帮助我们发现和修复代码中的错误和潜在问题。
  • Prettier：一个代码格式化工具，可以帮助我们自动格式化代码，使代码风格统一。
  • Stylelint：一个CSS和SCSS代码检查工具，可以帮助我们发现和修复代码中的错误和潜在问题，并确保代码风格统一。
  • Husky：一个Git钩子工具，可以帮助我们在提交代码之前自动执行一些任务，例如代码检查和格式化。

使用步骤

1. 安装工具

首先，我们需要在项目中安装这些工具。

npm install --save-dev eslint prettier stylelint husky

2. 配置ESLint

接下来，我们需要配置ESLint。在项目根目录下创建.eslintrc.js文件，并添加以下内容：

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    // 自定义规则
  },
};

3. 配置Prettier

然后，我们需要配置Prettier。在项目根目录下创建.prettierrc.js文件，并添加以下内容：

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

4. 配置Stylelint

接下来，我们需要配置Stylelint。在项目根目录下创建.stylelintrc.js文件，并添加以下内容：

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {
    // 自定义规则
  },
};

5. 配置Husky

最后，我们需要配置Husky。在项目根目录下创建.huskyrc.js文件，并添加以下内容：

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

使用工具

安装和配置好工具后，就可以使用它们来检查和格式化代码了。

  • 运行npm run lint命令，可以检查代码中的错误和潜在问题。
  • 运行npm run format命令，可以格式化代码。
  • 运行npm run stylelint命令，可以检查CSS和SCSS代码中的错误和潜在问题。

总结

通过在Vue3 + TypeScript + Vite项目中使用ESLint、Prettier、Stylelint和Husky等工具，我们可以确保代码质量、代码统一格式和代码风格，从而提高项目质量和开发效率。