526互联

TS 项目加入 ESLint 进行代码检查

发布时间 2023-09-02 20:17:32作者: Higurashi-kagome

  1. 安装依赖

    npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
    • eslint：ESLint 核心包。
    • @typescript-eslint/parser：用于解析 TypeScript 代码。
    • @typescript-eslint/eslint-plugin：包含一些针对 TypeScript 的 ESLint 规则。

  2. 创建 ESLint 配置文件：在项目根目录下创建一个 ESLint 配置文件，通常命名为 .eslintrc.js。可以使用以下示例作为初始配置：

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

  3. 配置 npm 脚本： 在 package.json 文件中添加一个 npm 脚本，用于运行 ESLint 检查。例如：

    "scripts": {
  "lint": "eslint src --ext .ts"
}
    • src ：要验证的目标文件夹
    • --ext：指定检测文件的后缀

  4. 运行代码格式检查： 在终端中运行以下命令来执行 ESLint 代码格式检查：

    npm run lint

  5. 自动修复： 如果需要，可以添加以下脚本来自动修复一些可以自动修复的问题：

    "scripts": {
  "lint-fix": "eslint src --fix --ext .ts"
}
    • --fix：自动修复命令

参考：ChatGPT、使用 ESlint 代码检查指南