Enforcing consistent coding practices with in a frontend team often presents challenges, particularly with code style adherence and structured Git commit messages. This guide outlines a practical, automated approach to integrate thece standards into the development workflow, ensuring uniformity without sacrificing productivity.

Unstructured code can lead to increased maintenance costs, reduced readability among team members, scalability issues, and complications during project handovers. Consider the following example, which exhibits inconsistent formatting:

let userData = {
  userName: "Jane Doe",
  userAge: 25,
  userGender: 'female'
}

function displayUserData() {
  console.log('Name: ' + userData.userName)
console.log("Age: " + userData.userAge);
console.log("Gender: " +userData.userGender);
}

displayUserData()

Issues include mixed quotation marks, missing spaces around operators, inconsistent indentation, and irregular semicolon usage. While functional, such code violates team standards and complicates collaboration.

Automation provides a solution by integrating tools that enforce rules during development. The strategy involves:

• ESLint for static code analysis.
• Prettier for automatic code formatting.
• Commitizen for standardized commit messages.

Project Setup with ESLint

Using a Vue CLI project as an example, similar steps apply to React or other frameworks. During project creation, select Manually select features and include Linter / Formatter. Choose a linting configuration like ESLint + Standard config and enable both Lint on save and Lint and fix on commit.

After setup, ESLint rules are defined in .eslintrc.js. For instance, to enforce single quotes, configure:

module.exports = {
  root: true,
  env: { node: true },
  extends: ['plugin:vue/vue3-essential', '@vue/standard'],
  parserOptions: { parser: '@babel/eslint-parser' },
  rules: {
    'quotes': ['error', 'single'],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Violations, such as using double quotes, trigger errors during development.

Integrating Prettier for Formatting

Install the Prettier extension in VS Code. Create a .prettierrc file in the project root to define formatting rules:

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

Enable Format On Save in VS Code settings to automatically apply these rules when files are saved.

Standardizing Git Commits with Commitizen

To ensure consistent commit messages, install Commitizen and cz-customizable as development dependencies:

npm install commitizen cz-customizable --save-dev

Add configuration to package.json:

"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

Create a .cz-config.js file to customize commit templates:

module.exports = {
  types: [
    { value: 'feat', name: 'feat: New feature' },
    { value: 'fix', name: 'fix: Bug fix' },
    { value: 'docs', name: 'docs: Documentation changes' },
    { value: 'style', name: 'style: Code style adjustments' },
    { value: 'refactor', name: 'refactor: Code refactoring' },
    { value: 'perf', name: 'perf: Performance improvements' },
    { value: 'test', name: 'test: Test updates' },
    { value: 'chore', name: 'chore: Maintenance tasks' }
  ],
  scopes: [
    { value: 'components', name: 'components: Component changes' },
    { value: 'utils', name: 'utils: Utility functions' },
    { value: 'config', name: 'config: Configuration updates' }
  ],
  messages: {
    type: 'Select the type of change:',
    scope: 'Specify the scope (optional):',
    subject: 'Enter a short description:',
    body: 'Provide detailed notes (optional):',
    confirmCommit: 'Proceed with commit?'
  },
  allowCustomScopes: true,
  subjectLimit: 100
}

Replace git commit with git cz to use the interactive prompt for generating standardized commit messages.

Reference Standards

• Airbnb JavaScript Style Guide
• Google JavaScript Style Guide
• JSDoc for code documentation
• Conventional Commits specification