Creating a coherent and well-structured codebase is crucial for teams working on front-end projects. This article will guide you through the front-end coding guidelines, outlined by a coding standard repository aimed at ensuring that every line of code reads as if it were written by one author, even when many contributors are involved.

Understanding Front-end Coding Guidelines

Just like a well-rehearsed orchestra produces harmonious music, a coherent coding style ensures that your code is readable and maintainable. These guidelines cover various aspects, including HTML, CSS, JavaScript, React, and Vue. Let’s break down the main components you’ll need to know.

Key Areas of Focus

• General Code Patterns
• Architecture
• Git
• HTML
• CSS
• JavaScript
• React
• Vue
• Storybook
• Testing
• Typescript

1. General Code Patterns

Imagine a library where every book is lined up in perfect order, making it easy to find information. That’s the goal with code styling!

Here are some important rules:

• Prettier: We use Prettier to format our code.
• Code Syntax: Use soft tabs with two spaces. For example:

Good:
const obj = {
  prop: value,
  prop2: value2,
  prop3: value3,
}

Bad:
const obj = {
    prop: value,
    prop2: value2,
    prop3: value3,
}

• Refactoring: Always refactor code that has tests and ensure existing tests pass after changes.
• Imports: Use relative paths within the same module scope and absolute paths for others.

2. Architecture

Just like building a strong foundation is essential for a sturdy house, having the right project architecture is crucial for maintainable code. Here are the considerations:

• File Naming: Use clear and consistent naming conventions.
• Folder Structure: Keep global components separated from scoped ones to avoid confusion.

3. Git

Version control is like keeping a well-maintained diary; it helps track progress and changes over time. Here’s how to manage it well:

• Commit Messages: Write clear messages in English and follow conventional commit guidelines.

4. HTML

HTML is the skeleton of your front-end application. Make it semantically meaningful by using the correct tags to provide context.

• Use semantic tags like section or article.

5. CSS

Think of CSS as the wardrobe for your app — it should be organized and easy to customize. Aim for clarity and consistency.

• CSS Syntax: Keep one declaration per line and separate each ruleset by a blank line.
• Class Naming: Use lowercase and specific naming conventions.

6. JavaScript

JavaScript is where the magic happens, akin to the lively interactions in a bustling city. Maintain clarity and organization:

• Use meaningful variable names and keep your code easy to read.

7. React

In React, components are like pieces in a puzzle; they need to fit together neatly. Keep them modular and readable!

• Assign keys effectively in lists and utilize hooks thoughtfully.

8. Vue

Vue components should harmonize as well as React ones, with clear definitions and updates.

• Avoid using single-word component names to prevent conflicts.

9. Storybook

Think of Storybook as the showcase for your UI components, presenting them clearly and professionally.

10. Testing

Just like proofreading written content, testing ensures your code works correctly. Use it instead of test in your descriptions.

11. Typescript

Typescript adds structure to your scripts — picture it as adding labels to boxes for better organization.

Troubleshooting Common Issues

When starting with these guidelines, you might encounter some common issues:

• If your code doesn’t format correctly, ensure Prettier is installed and configured in your editor.
• For syntax errors, double-check for mismatched brackets and indentation.
• If using React and facing issues with component rendering, examine your keys in lists and component props.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.