Skip to content

Commit 7a36121

Browse files
avelineaaronccasanovasam-b-rose
authored
Create Code style guide.md (Shopify#10176)
First draft of a code style guide to help with consistency --------- Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> Co-authored-by: Sam Rose <11774595+samrose3@users.noreply.github.com>
1 parent b621532 commit 7a36121

File tree

1 file changed

+44
-0
lines changed

1 file changed

+44
-0
lines changed

documentation/Code style guide.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# `@shopify/polaris` Code Style Guide
2+
3+
## Introduction
4+
5+
The `@shopify/polaris` code style guide provides guidelines and best practices for writing consistent and maintainable code in the `@shopify/polaris` React component library. Adhering to this guide will help ensure code readability, consistency, and collaboration among developers. These guidelines are for items that are not enforced by automated tools like prettier, eslint, or stylelint-polaris
6+
7+
## Table of Contents
8+
9+
1. [Naming Conventions](#naming-conventions)
10+
1. [Control Structures and Flow](#control-structures-and-flow)
11+
1. [Error Handling](#error-handling)
12+
1. [Code Organization and Structure]1#code-organization-and-structure)
13+
1. [Examples and Code Snippets](#examples-and-code-snippets)
14+
15+
## Naming Conventions
16+
17+
- Use camel case for variable and function names.
18+
- Use Pascal case for component names.
19+
- Use Kebab case for props with a predefined list of strings.
20+
- Use descriptive and meaningful names that accurately represent the purpose of the variable, function, or component.
21+
22+
## Control Structures and Flow
23+
24+
- Use early returns or guard clauses to handle exceptional cases and reduce nesting.
25+
26+
## Error Handling
27+
28+
- Use `try-catch` blocks to handle exceptions and errors.
29+
- Provide meaningful error messages that help developers understand the issue.
30+
- Log errors appropriately for debugging and troubleshooting purposes.
31+
32+
## Code Organization and Structure
33+
34+
- Organize code files and directories logically and consistently.
35+
- Use meaningful and descriptive file and directory names.
36+
- Follow the recommended folder structure for components, utilities, and tests.
37+
- Import modules and components in alphabetical order.
38+
- Group related functions and variables together within a file.
39+
- Include [JSDoc tags](https://jsdoc.app/) to describe default prop values
40+
41+
## Examples and Code Snippets
42+
43+
- Include examples and code snippets in the documentation to demonstrate usage and best practices.
44+
- Provide clear and concise code examples that highlight the recommended coding style and patterns.

0 commit comments

Comments
 (0)