初探Vite-Vue3-Ts项目的规范化：ESLint、Prettier、Lint-staged

开发工具

2023-10-24 10:38:24

Vite、Vue3 和 TypeScript：提升前端开发效率和代码质量

ESLint：你的代码守护神

ESLint 是 JavaScript 的超级英雄，它时刻监视着你的代码，找出语法错误、逻辑问题和不佳的风格。它配备了丰富的规则库，可根据你的项目需求进行定制，确保代码符合规范。

Prettier：代码美容师

Prettier 是代码的整形医生，它会自动将你的代码格式化为统一的、美观的风格。它支持多种编程语言，包括 JavaScript、TypeScript 和 JSON，帮助你轻松保持代码的一致性和整洁性。

Lint-staged：提交前代码巡查员

Lint-staged 是你代码提交前的最后一道防线。它会在你提交代码前自动运行 ESLint 和 Prettier，确保代码符合规范，阻止不合格的代码混入代码库。

将它们集成到你的项目中

现在，让我们把这些工具打包带走，让你的 Vite-Vue3-TypeScript 项目焕然一新：

安装 ESLint ：在项目根目录运行 npm install --save-dev eslint。
配置 ESLint ：创建 .eslintrc.js 文件并添加以下内容：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

安装 Prettier ：运行 npm install --save-dev prettier。
配置 Prettier ：创建 .prettierrc 文件并添加以下内容：

{
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
}

安装 Lint-staged ：运行 npm install --save-dev lint-staged。
配置 Lint-staged ：创建 .lintstagedrc.js 文件并添加以下内容：

module.exports = {
  '*.{js,jsx,ts,tsx,vue}': ['eslint --fix', 'prettier --write'],
};

结果：完美代码的秘密武器

现在，当你在开发中敲代码时，ESLint 和 Prettier 将像保镖一样保护你的代码，实时发现问题和格式化代码。Lint-staged 则会像哨兵一样守住提交门，确保只有符合规范的代码才能进入代码库。

常见问题解答

为什么我需要这些工具？
因为它们可以帮助你：
- 提高代码质量
- 提高开发效率
- 确保团队协作的一致性
我怎样知道哪些规则适合我的项目？
研究 ESLint 文档和 Prettier 文档，了解可用的规则和选项。
这些工具会减慢我的开发速度吗？
实际上，它们会通过自动化代码检查和格式化来提高你的开发速度。
是否还有其他类似的工具？
是的，还有 Stylelint（用于 CSS）、TSLint（用于 TypeScript）和 JSHint（用于 JavaScript）。
如何更新这些工具？
定期运行 npm update 以确保你拥有最新版本。