Static code checking

Basic Concepts of Static Code Analysis

Static code analysis refers to the process of identifying potential issues by analyzing source code without executing it. This type of analysis is typically performed during the development phase and helps developers detect syntax errors, coding standard violations, security vulnerabilities, and other issues early. Compared to dynamic testing, static analysis intervenes earlier in the development lifecycle, offering lower costs and higher efficiency.

// Example: A potentially problematic function
function calculateTotal(price, quantity) {
  return price * quantty; // Typo here: 'quantity' is misspelled as 'quantty'
}

Mainstream Static Code Analysis Tools

ESLint

ESLint is currently the most popular static analysis tool for JavaScript, known for its high configurability. It supports the latest ECMAScript standards and can be extended via plugins. Configuring ESLint usually requires creating an .eslintrc file:

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

TypeScript's Type Checking

The TypeScript compiler itself includes powerful static type-checking capabilities:

interface User {
  name: string;
  age: number;
}

function greet(user: User) {
  console.log(`Hello, ${user.nam}`); // Error: Property 'nam' does not exist on type 'User'
}

Stylelint

A static analysis tool for CSS that enforces style conventions:

/* stylelint-disable-next-line declaration-no-important */
.alert {
  color: red !important; // This will trigger a warning
}

Common Types of Static Analysis Rules

Code Style Rules

Enforce consistent code style, such as indentation, semicolons, and quotes:

// Bad practice
const foo=function(){
return 'bar'
}

// Good practice
const foo = function() {
  return 'bar';
};

Potential Error Detection

Identify code patterns that may cause runtime errors:

// Direct usage of a potentially undefined variable
const user = getUser();
console.log(user.name); // Will throw an error if getUser() returns undefined

Security-Related Rules

Prevent security issues like XSS or SQL injection:

// Unsafe use of innerHTML
element.innerHTML = userInput; // May contain malicious scripts

// Safer alternative
element.textContent = userInput;

Integrating Static Analysis into the Development Workflow

Real-Time Editor Analysis

Modern IDEs like VSCode can perform automatic analysis on save via plugins:

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Pre-Commit Checks

Use husky and lint-staged to automatically analyze before committing:

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "git add"]
  }
}

CI/CD Pipeline Integration

Configure static analysis in continuous integration:

# .github/workflows/ci.yml
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run lint

Developing Custom Rules

When existing rules don't meet requirements, custom rules can be developed:

// custom-rule.js
module.exports = {
  meta: {
    type: "problem",
    docs: {
      description: "Disallow the use of console.time/timeEnd",
    },
  },
  create(context) {
    return {
      CallExpression(node) {
        if (
          node.callee.object?.name === "console" &&
          ["time", "timeEnd"].includes(node.callee.property?.name)
        ) {
          context.report({
            node,
            message: "console.time/timeEnd is not allowed",
          });
        }
      },
    };
  },
};

Performance Optimization for Static Analysis

Static analysis can be time-consuming for large projects. Here are optimization strategies:

Incremental Analysis

Only analyze changed files:

eslint --cache --fix

Parallel Analysis

Utilize multi-core CPUs for faster processing:

npm run lint -- --max-warnings 0 --format stylish --cache --max-workers=4

Rule Optimization

Disable less critical rules or reduce their severity:

{
  "rules": {
    "complexity": ["warn", 10] // Set cyclomatic complexity threshold to 10
  }
}

Limitations of Static Analysis

Despite its power, static analysis has limitations:

Inability to Detect Runtime Behavior

// Static analysis cannot detect potential API call failures
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

False Positives and False Negatives

// Potential false positive for unused variable
const _unused = someSideEffect(); // Actually has side effects

// Potential false negative for security issues
const html = `<div>${userInput}</div>`; // May contain XSS

Configuration Complexity

Excessive rules can make configurations hard to maintain:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["react", "@typescript-eslint", "import"],
  "rules": {
    // 100+ rule configurations...
  }
}

Integration with Other Quality Assurance Methods

Combining with Unit Testing

Static analysis cannot replace unit tests:

// Static analysis cannot verify this function's correctness
function add(a, b) {
  return a - b; // Logical error
}

// Requires unit tests to detect
test('add function', () => {
  expect(add(1, 2)).toBe(3);
});

Complementing Code Reviews

Static analysis automates finding low-level issues, allowing code reviews to focus on design:

// Static analysis detects syntax issues
const x = 1
x = 2 // Error: Assignment to constant variable

// Code reviews detect design issues
class User {
  // Poor design: Storing passwords in plain text
  constructor(public username: string, public password: string) {}
}

Emerging Static Analysis Technologies

AI-Based Code Analysis

Using machine learning models to analyze code patterns:

// Traditional tools may miss this potential issue
async function fetchData() {
  const res = await fetch('/api');
  return res.json(); // Missing error handling
}

Visual Dependency Analysis

Generating dependency graphs to uncover architectural issues:

# Generate dependency graph
npx madge --image graph.svg src/index.js

Cross-Language Analysis

Unified analysis for full-stack projects:

// Checking frontend-backend API compatibility
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice' })
  // Missing Content-Type header
});