前端代码质量保证：让你的代码更可靠

前端代码质量保证：让你的代码更可靠

毒舌时刻

代码质量？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便写几个测试就能保证代码质量？别做梦了！到时候你会发现，测试代码比业务代码还多，维护起来比业务代码还麻烦。

你以为ESLint能解决所有问题？别天真了！ESLint只能检查代码风格，无法检查逻辑错误。还有那些所谓的代码质量工具，看起来高大上，用起来却各种问题。

为什么你需要这个

反面教材

// 这是一个典型的代码质量问题示例

// 1. 代码风格不一致
function getUser(id) {
return fetch(`/api/users/${id}`)
.then(res => res.json())
.then(data => {
return data;
});
}

function getProduct(id){
return fetch(`/api/products/${id}`).then(res=>res.json()).then(data=>data);
}

// 2. 未使用的变量
function calculateTotal(price, quantity) {
const tax = 0.08;
const discount = 0.1;
return price * quantity;
}

// 3. 硬编码值
function getShippingCost(weight) {
if (weight < 10) {
return 5.99;
} else if (weight < 20) {
return 9.99;
} else {
return 14.99;
}
}

// 4. 缺少错误处理
function fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));
}

// 5. 复杂的条件语句
function getDiscount(user, product) {
if (user.isMember && user.membershipLevel >= 3) {
if (product.category === 'electronics') {
return 0.2;
} else if (product.category === 'clothing') {
return 0.15;
} else {
return 0.1;
}
} else if (user.isMember) {
if (product.category === 'electronics') {
return 0.1;
} else if (product.category === 'clothing') {
return 0.08;
} else {
return 0.05;
}
} else {
return 0;
}
}

问题：

• 代码风格不一致，影响可读性
• 未使用的变量，增加代码复杂度
• 硬编码值，难以维护
• 缺少错误处理，容易导致应用崩溃
• 复杂的条件语句，难以理解和维护

正确的做法

代码风格规范

// 1. ESLint配置
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended'
],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'react',
'react-hooks'
],
rules: {
'react/prop-types': 'off',
'react/react-in-jsx-scope': 'off',
'indent': ['error', 2],
'linebreak-style': ['error', 'unix'],
'quotes': ['error', 'single'],
'semi': ['error', 'always'],
'no-unused-vars': 'error',
'no-console': 'warn'
}
};

// 2. Prettier配置
// .prettierrc.js
module.exports = {
semi: true,
trailingComma: 'es5',
singleQuote: true,
printWidth: 80,
tabWidth: 2
};

// 3. EditorConfig配置
// .editorconfig
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

代码质量工具

// 1. ESLint
// 安装
npm install –save-dev eslint eslint-plugin-react eslint-plugin-react-hooks

// 配置脚本
{
"scripts": {
"lint": "eslint . –ext js,jsx –report-unused-disable-directives –max-warnings 0"
}
}

// 2. Prettier
// 安装
npm install –save-dev prettier

// 配置脚本
{
"scripts": {
"format": "prettier –write ."
}
}

// 3. Stylelint
// 安装
npm install –save-dev stylelint stylelint-config-standard

// 配置
// .stylelintrc.js
module.exports = {
extends: 'stylelint-config-standard',
rules: {
'indentation': 2,
'string-quotes': 'single'
}
};

// 配置脚本
{
"scripts": {
"lint:css": "stylelint '**/*.css'"
}
}

// 4. TypeScript
// 安装
npm install –save-dev typescript @types/react @types/react-dom

// 配置
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}

// 配置脚本
{
"scripts": {
"typecheck": "tsc –noEmit"
}
}

测试工具

// 1. Jest
// 安装
npm install –save-dev jest @testing-library/react @testing-library/jest-dom

// 配置
// jest.config.js
module.exports = {
testEnvironment: 'jsdom',
transform: {
'^.+\\\\.(js|jsx)$': 'babel-jest'
},
moduleNameMapper: {
'\\\\.(css|less|scss|sass)$': 'identity-obj-proxy'
},
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js']
};

// 配置脚本
{
"scripts": {
"test": "jest",
"test:watch": "jest –watch",
"test:coverage": "jest –coverage"
}
}

// 2. React Testing Library
// 测试示例
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

test('increments counter when button is clicked', () => {
render(<App />);
const buttonElement = screen.getByText(/increment/i);
const counterElement = screen.getByText(/count:/i);

fireEvent.click(buttonElement);
expect(counterElement).toHaveTextContent('Count: 1');
});

// 3. Playwright (E2E测试)
// 安装
npm install –save-dev @playwright/test

// 配置
// playwright.config.js
module.exports = {
use: {
baseURL: 'http://localhost:3000',
headless: true,
viewport: { width: 1280, height: 720 },
ignoreHTTPSErrors: true
}
};

// 测试示例
// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/React App/);
});

test('get started link', async ({ page }) => {
await page.goto('/');
await page.click('text=Learn React');
await expect(page).toHaveURL(/.*react.dev/);
});

// 配置脚本
{
"scripts": {
"test:e2e": "playwright test"
}
}

代码审查

// 1. GitHub Actions配置
// .github/workflows/code-quality.yml
name: Code Quality

on:
push:
branches: [ main ]
pull_request:
branches: [ main ]

jobs:
lint:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v2
– name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
– name: Install dependencies
run: npm install
– name: Run ESLint
run: npm run lint
– name: Run Prettier
run: npm run format — –check
– name: Run TypeScript
run: npm run typecheck
– name: Run tests
run: npm test

// 2. 代码审查工具
// 安装
npm install –save-dev eslint-plugin-security eslint-plugin-sonarjs

// 配置
// .eslintrc.js
module.exports = {
plugins: [
'security',
'sonarjs'
],
rules: {
'security/detect-unsafe-regex': 'error',
'security/detect-buffer-noassert': 'error',
'sonarjs/cognitive-complexity': ['error', 15],
'sonarjs/no-duplicate-string': ['error', { threshold: 3 }]
}
};

最佳实践

// 1. 代码组织
// 按功能组织文件
/src
/components
/Button
Button.jsx
Button.css
Button.test.jsx
/Card
Card.jsx
Card.css
Card.test.jsx
/pages
/Home
Home.jsx
Home.css
Home.test.jsx
/About
About.jsx
About.css
About.test.jsx
/utils
api.js
helpers.js
constants.js
/hooks
useAuth.js
useLocalStorage.js
/context
AuthContext.jsx
ThemeContext.jsx

// 2. 命名规范
// 组件名：PascalCase
function UserProfile() {
return <div>User Profile</div>;
}

// 变量名：camelCase
const userCount = 10;

// 常量：UPPER_SNAKE_CASE
const API_BASE_URL = 'https://api.example.com';

// 函数名：camelCase
function getUserData() {
return fetch('/api/user');
}

// 3. 错误处理
async function fetchData() {
try {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
throw error;
}
}

// 4. 注释
/**
* 获取用户信息
* @param {number} id – 用户ID
* @returns {Promise<Object>} 用户信息
*/
async function getUser(id) {
const response = await fetch(`/api/users/${id}`);
return response.json();
}

// 5. 模块化
// utils/api.js
export async function fetchUsers() {
const response = await fetch('/api/users');
return response.json();
}

export async function fetchProducts() {
const response = await fetch('/api/products');
return response.json();
}

// 使用
import { fetchUsers, fetchProducts } from './utils/api';

async function loadData() {
const [users, products] = await Promise.all([
fetchUsers(),
fetchProducts()
]);
return { users, products };
}

毒舌点评

代码质量保证确实很重要，但我见过太多开发者滥用这个特性，导致开发流程变得过于复杂。

想象一下，当你为了通过代码审查，写了大量的测试代码和注释，结果导致代码量增加了几倍，这真的值得吗？

还有那些过度使用代码质量工具的开发者，为了满足工具的要求，写了大量的冗余代码，结果导致代码变得难以理解和维护。

所以，在进行代码质量保证时，一定要把握好度。不要为了追求代码质量而牺牲开发效率，要根据实际情况来决定代码质量保证的策略。

当然，对于大型项目来说，代码质量保证是必不可少的。但对于小型项目，过度的代码质量保证反而会增加开发成本和维护难度。

最后，记住一句话：代码质量保证的目的是为了提高代码的可靠性和可维护性，而不是为了炫技。如果你的代码质量保证策略导致开发变得更慢或更复杂，那你就失败了。