前端代码质量保障有哪些手段？ESLint、Prettier、测试如何配置？

// eslint.config.js（Flat Config，ESLint 9+）
import js from '@eslint/js'
import vue from 'eslint-plugin-vue'
import tsParser from '@typescript-eslint/parser'

export default [
  js.configs.recommended,
  ...vue.configs['flat/recommended'],
  {
    files: ['**/*.{js,ts,vue}'],
    languageOptions: {
      parser: tsParser,
    },
    rules: {
      'no-unused-vars': 'error',
      'no-console': 'warn',
      'prefer-const': 'error',
      'vue/multi-word-component-names': 'off'
    }
  }
]

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100,
  "arrowParens": "avoid"
}

npm install -D eslint-config-prettier

// 关闭与 Prettier 冲突的 ESLint 规则
export default [
  ...otherConfigs,
  'prettier'  // 放在最后
]

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
    "*.{css,scss,json,md}": ["prettier --write"]
  }
}

# .husky/pre-commit
npx lint-staged

npm install -D @commitlint/cli @commitlint/config-conventional

// commitlint.config.js
export default {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [2, 'always', [
      'feat', 'fix', 'docs', 'style', 'refactor',
      'perf', 'test', 'build', 'ci', 'chore', 'revert'
    ]]
  }
}

# .husky/commit-msg
npx --no-install commitlint --edit $1

// sum.test.js
import { describe, it, expect } from 'vitest'
import { sum } from './sum'

describe('sum', () => {
  it('should add two numbers', () => {
    expect(sum(1, 2)).toBe(3)
  })
  
  it('should handle negative numbers', () => {
    expect(sum(-1, -2)).toBe(-3)
  })
})

import { render, screen, fireEvent } from '@testing-library/vue'
import Counter from './Counter.vue'

test('increments on click', async () => {
  render(Counter)
  await fireEvent.click(screen.getByText('Count: 0'))
  expect(screen.getByText('Count: 1')).toBeTruthy()
})

import { test, expect } from '@playwright/test'

test('login flow', async ({ page }) => {
  await page.goto('/login')
  await page.fill('[data-testid=email]', 'user@test.com')
  await page.fill('[data-testid=password]', 'password')
  await page.click('[data-testid=submit]')
  await expect(page).toHaveURL('/dashboard')
})