Sobes.tech
Middle

How do you ensure adherence to the code style in your project?

sobes.tech AI

Answer from AI

To maintain a consistent code style, I use the following tools and processes:

  1. ESLint: I configure formatting and code quality rules (e.g., Airbnb or Standard). ESLint helps identify syntax errors, indentation issues, unused variables, etc.

    // Example .eslintrc.js
    module.exports = {
      extends: 'airbnb-base', // Or another chosen style
      rules: {
        // Override or add rules
        'semi': ['error', 'always'],
        'quotes': ['error', 'single']
      }
    };
    
  2. Prettier: I integrate Prettier for automatic code formatting. It takes care of spaces, line breaks, semicolons, and other formatting details, working in conjunction with ESLint (via plugins).

    // Example .prettierrc.json
    {
      "semi": true,
      "singleQuote": true,
      "printWidth": 100
    }
    
  3. Husky and lint-staged: I set up pre-commit hooks with Husky. Using lint-staged, I run ESLint and Prettier only on files that have been changed (staged). This ensures that only formatted and checked code gets into the repository.

    // Part of package.json
    {
      "husky": {
        "hooks": {
          "pre-commit": "lint-staged"
        }
      },
      "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
          "eslint --fix",
          "prettier --write"
        ],
        "*.{css,scss,less}": [
          "stylelint --fix", // If using Stylelint
          "prettier --write"
        ],
        "*.{html,vue,svelte}": [
          "prettier --write"
        ]
      }
    }
    
  4. Code reviews: During code review, I pay attention to adherence to established code style guidelines, even if automated tools miss something or there are nuances not covered by rules.

  5. Documentation: I maintain minimal documentation on the adopted code style in the project (e.g., in README or CONTRIBUTING.md), so new team members can quickly familiarize themselves with the rules.

  6. IDE integration: I configure editors (VS Code, WebStorm, etc.) for automatic formatting on save and display ESLint errors directly in the editor.