TypeScript Quality Checker Skill

TypeScript代码质量检查Skill

Purpose

用途

This skill provides comprehensive TypeScript/JavaScript code quality validation including formatting (Prettier), linting (ESLint), type checking (tsc), security analysis (npm audit), and code complexity analysis. Ensures code meets TypeScript best practices and project standards.

本Skill提供全面的TypeScript/JavaScript代码质量验证，包括格式化（Prettier）、代码检查（ESLint）、类型检查（tsc）、安全分析（npm audit）以及代码复杂度分析。确保代码符合TypeScript最佳实践和项目标准。

When to Use

使用场景

Validating TypeScript/JavaScript code quality before commit
Running pre-commit quality checks
CI/CD quality gate validation
Code review preparation
Ensuring code style compliance
Type safety validation
Security vulnerability detection in dependencies

提交代码前验证TypeScript/JavaScript代码质量
运行提交前的质量检查
CI/CD质量门验证
代码评审准备
确保代码风格合规
类型安全性验证
检测依赖中的安全漏洞

Quality Check Workflow

质量检查流程

1. Environment Setup

1. 环境搭建

Verify Tools Installed:

bash

undefined

验证工具是否已安装：

bash

undefined

Check Node.js and npm versions

node --version npm --version

Check TypeScript compiler

npx tsc --version

Check quality tools

npx eslint --version npx prettier --version


**Install Development Dependencies:**
```bash

npx eslint --version npx prettier --version


**安装开发依赖：**
```bash

Install all dev dependencies

npm install --save-dev

Or install quality tools specifically

npm install --save-dev
typescript
eslint
prettier
@typescript-eslint/parser
@typescript-eslint/eslint-plugin
eslint-config-prettier
eslint-plugin-prettier


**Deliverable:** Quality tools ready

---

npm install --save-dev
typescript
eslint
prettier
@typescript-eslint/parser
@typescript-eslint/eslint-plugin
eslint-config-prettier
eslint-plugin-prettier


**交付成果：** 质量检查工具准备就绪

---

2. Code Formatting Check (Prettier)

2. 代码格式化检查（Prettier）

Check Formatting:

bash

undefined

检查格式化情况：

bash

undefined

Check if code is formatted

npx prettier --check "src/**/*.{ts,tsx,js,jsx,json,css,md}"

Check specific files

npx prettier --check src/index.ts

Check with detailed output

npx prettier --check --log-level debug "src/**/*.ts"


**Auto-Format Code:**
```bash

npx prettier --check --log-level debug "src/**/*.ts"


**自动格式化代码：**
```bash

Format all code

npx prettier --write "src/**/*.{ts,tsx,js,jsx,json,css,md}"

Format specific directory

npx prettier --write "src/components/**/*.tsx"

Check what would change (dry run)

npx prettier --check --list-different "src/**/*.ts"


**Configuration (.prettierrc.json):**
```json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

.prettierignore:

node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json

Deliverable: Formatting validation report

npx prettier --check --list-different "src/**/*.ts"


**配置文件（.prettierrc.json）：**
```json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

.prettierignore：

node_modules/
dist/
build/
coverage/
*.min.js
package-lock.json

交付成果： 格式化验证报告

3. Type Checking (TypeScript Compiler)

3. 类型检查（TypeScript编译器）

Run Type Checks:

bash

undefined

运行类型检查：

bash

undefined

Check types

npx tsc --noEmit

Check with specific config

npx tsc --noEmit --project tsconfig.json

Check and show all errors

npx tsc --noEmit --pretty

Incremental type checking

npx tsc --noEmit --incremental


**Watch Mode for Development:**
```bash

npx tsc --noEmit --incremental


**开发模式下的监听模式：**
```bash

Watch and type check continuously

npx tsc --noEmit --watch

With specific project

npx tsc --noEmit --watch --project tsconfig.json


**Configuration (tsconfig.json):**
```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

Deliverable: Type checking report

npx tsc --noEmit --watch --project tsconfig.json


**配置文件（tsconfig.json）：**
```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

交付成果： 类型检查报告

4. Linting (ESLint)

4. 代码检查（ESLint）

Run ESLint:

bash

undefined

运行ESLint：

bash

undefined

Lint entire codebase

npx eslint "src/**/*.{ts,tsx,js,jsx}"

Lint with auto-fix

npx eslint "src/**/*.{ts,tsx,js,jsx}" --fix

Lint with detailed output

npx eslint "src/**/*.{ts,tsx,js,jsx}" --format=stylish

Generate HTML report

npx eslint "src/**/*.{ts,tsx,js,jsx}" --format=html --output-file=eslint-report.html


**Check Specific Rules:**
```bash

npx eslint "src/**/*.{ts,tsx,js,jsx}" --format=html --output-file=eslint-report.html


**检查特定规则：**
```bash

Check for unused variables

npx eslint "src/**/*.ts" --rule '@typescript-eslint/no-unused-vars: error'

Check complexity

npx eslint "src/**/*.ts" --rule 'complexity: ["error", 10]'

Check max lines

npx eslint "src/**/*.ts" --rule 'max-lines: ["error", 500]'


**Configuration (.eslintrc.json):**
```json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": ["error", {
      "argsIgnorePattern": "^_"
    }],
    "complexity": ["error", 10],
    "max-lines": ["error", 500],
    "max-lines-per-function": ["error", 50],
    "no-console": ["warn", {
      "allow": ["warn", "error"]
    }]
  },
  "ignorePatterns": ["dist/", "build/", "node_modules/", "*.config.js"]
}

Deliverable: Linting report

npx eslint "src/**/*.ts" --rule 'max-lines: ["error", 500]'


**配置文件（.eslintrc.json）：**
```json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": ["error", {
      "argsIgnorePattern": "^_"
    }],
    "complexity": ["error", 10],
    "max-lines": ["error", 500],
    "max-lines-per-function": ["error", 50],
    "no-console": ["warn", {
      "allow": ["warn", "error"]
    }]
  },
  "ignorePatterns": ["dist/", "build/", "node_modules/", "*.config.js"]
}

交付成果： 代码检查报告

5. Security Analysis

5. 安全分析

npm Audit:

bash

undefined

npm审计：

bash

undefined

Check for vulnerabilities

npm audit

Detailed audit

npm audit --json

Production dependencies only

npm audit --production

Fix vulnerabilities

npm audit fix

Fix including breaking changes

npm audit fix --force


**Check for Outdated Packages:**
```bash

npm audit fix --force


**检查过时包：**
```bash

List outdated packages

npm outdated

Check specific package

npm outdated typescript

Update packages

npm update


**Dependency License Check:**
```bash

npm update


**依赖许可证检查：**
```bash

Install license checker

npm install --save-dev license-checker

Check licenses

npx license-checker --summary

Exclude specific licenses

npx license-checker --exclude "MIT,Apache-2.0"


**Deliverable:** Security analysis report

---

npx license-checker --exclude "MIT,Apache-2.0"


**交付成果：** 安全分析报告

---

6. Code Complexity Analysis

6. 代码复杂度分析

ESLint Complexity Rules:

bash

undefined

ESLint复杂度规则：

bash

undefined

Check cyclomatic complexity

npx eslint "src/**/*.ts" --rule 'complexity: ["error", 10]'

Check max depth

npx eslint "src/**/*.ts" --rule 'max-depth: ["error", 4]'

Check max nested callbacks

npx eslint "src/**/*.ts" --rule 'max-nested-callbacks: ["error", 3]'


**TypeScript-Specific Complexity:**
```bash

npx eslint "src/**/*.ts" --rule 'max-nested-callbacks: ["error", 3]'


**TypeScript特定复杂度分析：**
```bash

Install complexity tool

npm install --save-dev ts-complex

Analyze complexity

npx ts-complexity src/


**Deliverable:** Complexity analysis report

---

npx ts-complexity src/


**交付成果：** 复杂度分析报告

---

7. Import/Export Validation

7. 导入/导出验证

Check Unused Exports:

bash

undefined

检查未使用的导出：

bash

undefined

Install ts-prune

npm install --save-dev ts-prune

Find unused exports

npx ts-prune

Exclude specific files

npx ts-prune --ignore "index.ts"


**Check Import Order:**
```bash

npx ts-prune --ignore "index.ts"


**检查导入顺序：**
```bash

Install eslint-plugin-import

npm install --save-dev eslint-plugin-import

Add to .eslintrc.json

{ "plugins": ["import"], "rules": { "import/order": ["error", { "groups": [ "builtin", "external", "internal", "parent", "sibling", "index" ], "newlines-between": "always" }] } }


**Deliverable:** Import validation report

---

{ "plugins": ["import"], "rules": { "import/order": ["error", { "groups": [ "builtin", "external", "internal", "parent", "sibling", "index" ], "newlines-between": "always" }] } }


**交付成果：** 导入验证报告

---

8. Comprehensive Quality Check

8. 全面质量检查

Run All Checks:

bash

#!/bin/bash

运行所有检查：

bash

#!/bin/bash

scripts/quality-check.sh

set -e # Exit on first error

echo "=== TypeScript Quality Checks ==="

echo "1. Code Formatting (Prettier)..." npx prettier --check "src/**/*.{ts,tsx,js,jsx}"

echo "2. Type Checking (tsc)..." npx tsc --noEmit

echo "3. Linting (ESLint)..." npx eslint "src/**/*.{ts,tsx}" --max-warnings=0

echo "4. Security Audit..." npm audit --production

echo "5. Unused Exports..." npx ts-prune || true # Don't fail on unused exports

echo "=== All Quality Checks Passed ✅ ==="


**package.json Scripts:**
```json
{
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}' --max-warnings=0",
    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
    "format": "prettier --write 'src/**/*.{ts,tsx,json,css,md}'",
    "format:check": "prettier --check 'src/**/*.{ts,tsx,json,css,md}'",
    "type-check": "tsc --noEmit",
    "quality": "npm run format:check && npm run type-check && npm run lint",
    "test": "jest",
    "test:coverage": "jest --coverage"
  }
}

Deliverable: Comprehensive quality report

set -e # Exit on first error

echo "=== TypeScript Quality Checks ==="

echo "1. Code Formatting (Prettier)..." npx prettier --check "src/**/*.{ts,tsx,js,jsx}"

echo "2. Type Checking (tsc)..." npx tsc --noEmit

echo "3. Linting (ESLint)..." npx eslint "src/**/*.{ts,tsx}" --max-warnings=0

echo "4. Security Audit..." npm audit --production

echo "5. Unused Exports..." npx ts-prune || true # Don't fail on unused exports

echo "=== All Quality Checks Passed ✅ ==="


**package.json脚本：**
```json
{
  "scripts": {
    "lint": "eslint 'src/**/*.{ts,tsx}' --max-warnings=0",
    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
    "format": "prettier --write 'src/**/*.{ts,tsx,json,css,md}'",
    "format:check": "prettier --check 'src/**/*.{ts,tsx,json,css,md}'",
    "type-check": "tsc --noEmit",
    "quality": "npm run format:check && npm run type-check && npm run lint",
    "test": "jest",
    "test:coverage": "jest --coverage"
  }
}

交付成果： 全面质量报告

Quality Standards

质量标准

Code Formatting

代码格式化

All code formatted with Prettier
Consistent use of semicolons
Consistent quote style (single/double)
Trailing commas in multiline
Line length ≤ 100 characters

所有代码使用Prettier格式化
一致使用分号
一致的引号风格（单引号/双引号）
多行代码使用尾随逗号
行长度 ≤ 100字符

Type Checking

类型检查

Linting

代码检查

Security

安全

Code Quality

代码质量

Quality Check Matrix

质量检查矩阵

Check	Tool	Threshold	Auto-Fix
Formatting	Prettier	Must pass	Yes
Type checking	tsc	0 errors	No
Linting	ESLint	0 errors	Partial
Security	npm audit	0 critical	Partial
Complexity	ESLint	≤ 10	No
Unused exports	ts-prune	Warning only	No

检查项	工具	阈值	自动修复
格式化	Prettier	必须通过	是
类型检查	tsc	0错误	否
代码检查	ESLint	0错误	部分支持
安全	npm audit	0严重漏洞	部分支持
复杂度	ESLint	≤10	否
未使用导出	ts-prune	仅警告	否

Pre-commit Integration

提交前集成

Setup Husky and lint-staged:

bash

undefined

设置Husky和lint-staged：

bash

undefined

Install tools

npm install --save-dev husky lint-staged

Initialize husky

npx husky-init && npm install

Add pre-commit hook

npx husky add .husky/pre-commit "npx lint-staged"


**Configuration (package.json):**
```json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc-files --noEmit"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

Deliverable: Pre-commit hooks configured

npx husky add .husky/pre-commit "npx lint-staged"


**配置文件（package.json）：**
```json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix",
      "tsc-files --noEmit"
    ],
    "*.{json,css,md}": [
      "prettier --write"
    ]
  }
}

交付成果： 提交前钩子已配置

CI/CD Integration

CI/CD集成

GitHub Actions Example:

yaml

undefined

GitHub Actions示例：

yaml

undefined

.github/workflows/quality.yml

name: TypeScript Quality Checks

on: [push, pull_request]

jobs: quality: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3

  - name: Setup Node.js
    uses: actions/setup-node@v3
    with:
      node-version: '18'
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Check formatting
    run: npm run format:check

  - name: Type checking
    run: npm run type-check

  - name: Linting
    run: npm run lint

  - name: Security audit
    run: npm audit --production --audit-level=high

  - name: Run tests
    run: npm test

  - name: Check coverage
    run: npm run test:coverage


**Deliverable:** CI/CD quality pipeline

---

name: TypeScript Quality Checks

on: [push, pull_request]

jobs: quality: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3

  - name: Setup Node.js
    uses: actions/setup-node@v3
    with:
      node-version: '18'
      cache: 'npm'

  - name: Install dependencies
    run: npm ci

  - name: Check formatting
    run: npm run format:check

  - name: Type checking
    run: npm run type-check

  - name: Linting
    run: npm run lint

  - name: Security audit
    run: npm audit --production --audit-level=high

  - name: Run tests
    run: npm test

  - name: Check coverage
    run: npm run test:coverage


**交付成果：** CI/CD质量流水线

---

Quality Check Troubleshooting

质量检查故障排除

Prettier Formatting Failures

Prettier格式化失败

bash

undefined

bash

undefined

Check what would change

npx prettier --check --list-different "src/**/*.ts"

Apply fixes

npx prettier --write "src/**/*.ts"

Check specific file

npx prettier --check src/index.ts

undefined

npx prettier --check src/index.ts

undefined

TypeScript Type Errors

TypeScript类型错误

bash

undefined

bash

undefined

Show detailed errors

npx tsc --noEmit --pretty

Check specific file

npx tsc --noEmit src/component.tsx

Skip lib check (faster)

npx tsc --noEmit --skipLibCheck

undefined

npx tsc --noEmit --skipLibCheck

undefined

ESLint Violations

ESLint违规

bash

undefined

bash

undefined

Show detailed violations

npx eslint "src/**/*.ts" --format=stylish

Auto-fix safe violations

npx eslint "src/**/*.ts" --fix

Ignore specific line (last resort)

// eslint-disable-next-line rule-name

undefined

// eslint-disable-next-line rule-name

undefined

npm Audit Issues

npm审计问题

bash

undefined

bash

undefined

Show detailed audit

npm audit --json

Fix non-breaking changes

npm audit fix

Override (use with caution)

npm audit fix --force

---

npm audit fix --force

---

Quality Report Template

质量报告模板

markdown

undefined

markdown

undefined

TypeScript Quality Check Report

TypeScript质量检查报告

Summary

摘要

Status: ✅ All checks passed
Date: 2024-01-15
Code Base: src/

状态: ✅ 所有检查通过
日期: 2024-01-15
代码库: src/

Checks Performed

执行的检查

Formatting (Prettier)

格式化（Prettier）

Status: ✅ PASS
Files Checked: 87
Issues: 0

状态: ✅ 通过
检查文件数: 87
问题数: 0

Type Checking (tsc)

类型检查（tsc）

Status: ✅ PASS
Files Checked: 87
Errors: 0
Warnings: 0

状态: ✅ 通过
检查文件数: 87
错误数: 0
警告数: 0

Linting (ESLint)

代码检查（ESLint）

Status: ✅ PASS
Files Checked: 87
Errors: 0
Warnings: 0

状态: ✅ 通过
检查文件数: 87
错误数: 0
警告数: 0

Security (npm audit)

安全（npm audit）

Status: ✅ PASS
Dependencies: 342
Vulnerabilities: 0 critical, 0 high, 2 moderate

状态: ✅ 通过
依赖项数: 342
漏洞数: 0个严重，0个高危，2个中危

Complexity

复杂度

Status: ✅ PASS
Average Complexity: 3.8
Max Complexity: 9
Files > 10: 0

状态: ✅ 通过
平均复杂度: 3.8
最大复杂度: 9
复杂度超10的文件数: 0

Details

详情

All TypeScript quality checks passed successfully. Code is well-formatted, type-safe, lint-free, secure, and maintainable.

所有TypeScript质量检查已成功通过。代码格式规范、类型安全、无代码检查违规、安全可靠且易于维护。

Recommendations

建议

Continue using strict TypeScript settings
Keep complexity below 10
Run pre-commit hooks before commits
Update moderate-severity vulnerabilities when possible

---

继续使用严格的TypeScript配置
保持复杂度低于10
提交代码前运行提交前钩子
尽可能更新中危漏洞

---

Integration with Code Quality Specialist

与代码质量专家集成

Input: TypeScript/JavaScript codebase quality check request Process: Run all TypeScript quality tools and analyze results Output: Comprehensive quality report with pass/fail status Next Step: Report to code-quality-specialist for consolidation

输入: TypeScript/JavaScript代码库质量检查请求流程: 运行所有TypeScript质量工具并分析结果输出: 包含通过/失败状态的全面质量报告 下一步: 将报告提交给code-quality-specialist进行整合

Best Practices

最佳实践

Development

开发阶段

Enable Prettier on save (IDE integration)
Enable ESLint in IDE for real-time feedback
Use strict TypeScript settings
Fix type errors immediately
Use pre-commit hooks

在IDE中启用Prettier自动保存格式化
在IDE中启用ESLint以获取实时反馈
使用严格的TypeScript配置
立即修复类型错误
使用提交前钩子

Pre-Commit

提交前

Run full quality check script
Ensure all checks pass
Fix issues before pushing
Review security warnings

运行完整的质量检查脚本
确保所有检查通过
推送前修复所有问题
查看安全警告

CI/CD

Run quality checks on every PR
Fail build on quality violations
Generate quality reports
Track quality metrics over time

对每个PR运行质量检查
质量违规时构建失败
生成质量报告
随时间跟踪质量指标

Code Review

代码评审

Verify quality checks passed
Review type definitions
Check security scan results
Validate complexity metrics

验证质量检查已通过
评审类型定义
查看安全扫描结果
验证复杂度指标

Supporting Resources

支持资源

TypeScript: https://www.typescriptlang.org/docs
ESLint: https://eslint.org/docs
Prettier: https://prettier.io/docs
typescript-eslint: https://typescript-eslint.io
npm audit: https://docs.npmjs.com/cli/v8/commands/npm-audit

TypeScript: https://www.typescriptlang.org/docs
ESLint: https://eslint.org/docs
Prettier: https://prettier.io/docs
typescript-eslint: https://typescript-eslint.io
npm audit: https://docs.npmjs.com/cli/v8/commands/npm-audit

typescript-quality-checker

Original

Translation

TypeScript Quality Checker Skill

TypeScript代码质量检查Skill

Purpose

用途

When to Use

使用场景

Quality Check Workflow

质量检查流程

1. Environment Setup

1. 环境搭建

Check Node.js and npm versions

Check Node.js and npm versions

Check TypeScript compiler

Check TypeScript compiler

Check quality tools

Check quality tools

Install all dev dependencies

Install all dev dependencies

Or install quality tools specifically

Or install quality tools specifically

2. Code Formatting Check (Prettier)

2. 代码格式化检查（Prettier）

Check if code is formatted

Check if code is formatted

Check specific files

Check specific files

Check with detailed output

Check with detailed output

Format all code

Format all code

Format specific directory

Format specific directory

Check what would change (dry run)

Check what would change (dry run)

3. Type Checking (TypeScript Compiler)

3. 类型检查（TypeScript编译器）

Check types

Check types

Check with specific config

Check with specific config

Check and show all errors

Check and show all errors

Incremental type checking

Incremental type checking

Watch and type check continuously

Watch and type check continuously

With specific project

With specific project

4. Linting (ESLint)

4. 代码检查（ESLint）

Lint entire codebase

Lint entire codebase

Lint with auto-fix

Lint with auto-fix

Lint with detailed output

Lint with detailed output

Generate HTML report

Generate HTML report

Check for unused variables

Check for unused variables

Check complexity

Check complexity

Check max lines

Check max lines

5. Security Analysis

5. 安全分析

Check for vulnerabilities

Check for vulnerabilities

Detailed audit

Detailed audit

Production dependencies only

Production dependencies only

Fix vulnerabilities

Fix vulnerabilities

Fix including breaking changes

Fix including breaking changes

List outdated packages