为 TS 项目带来新面貌：2023 年 Eslint 搭配工具标准姿势

2023 年 Eslint 新姿态

随着前端开发的飞速发展，代码质量和一致性变得尤为重要。Eslint 作为一款强大的 JavaScript 代码风格检查工具，可以帮助你轻松发现并修复代码中的问题，从而提高代码的可读性和可维护性。

工具集锦

为了进一步提升开发效率和代码质量，Eslint 通常与 Prettier、Lint-Staged 和 Husky 协同工作，形成一套完整的代码规范化工具集。

Prettier

Prettier 是一款代码格式化工具，可以自动将你的代码按照既定规则格式化，使代码更加美观和易读。它支持多种编程语言，包括 JavaScript、TypeScript、HTML 和 CSS。

Lint-Staged

Lint-Staged 是一款 Git 预提交钩子工具，可以在你提交代码之前，自动运行 Eslint 和 Prettier，并阻止提交不符合代码风格的代码。这可以帮助你确保代码始终保持一致和高质量。

Husky

Husky 是一款 Git 钩子管理工具，可以让你轻松地为 Git 仓库添加各种钩子。通过 Husky，你可以方便地集成 Eslint 和 Lint-Staged，从而实现自动代码风格检查和格式化。

项目集成

安装工具

首先，你需要安装 Eslint、Prettier、Lint-Staged 和 Husky。你可以使用 npm 或 yarn 来安装这些工具。

npm install eslint prettier lint-staged husky -D

配置 Eslint

接下来，你需要配置 Eslint。创建一个名为 .eslintrc.js 的文件，并添加以下内容：

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  plugins: ['@typescript-eslint'],
  extends: ['plugin:@typescript-eslint/recommended'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

配置 Prettier

然后，你需要配置 Prettier。创建一个名为 .prettierrc.js 的文件，并添加以下内容：

module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  endOfLine: 'auto',
};

配置 Lint-Staged

接下来，你需要配置 Lint-Staged。创建一个名为 .lintstagedrc.js 的文件，并添加以下内容：

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

配置 Husky

最后，你需要配置 Husky。创建一个名为 .huskyrc.js 的文件，并添加以下内容：

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

运行工具

现在，你可以运行这些工具来检查和格式化你的代码。

npm run lint

如果你的代码存在问题，Eslint 将会报告这些问题。你可以在编辑器中修复这些问题，然后重新运行 npm run lint。

享受成果

通过使用 Eslint、Prettier、Lint-Staged 和 Husky，你可以轻松地保持代码风格的一致性和高质量。这将大大提高你的开发效率和代码可维护性。

现在，就立即将这些工具集成到你的项目中，开启规范化代码之旅吧！