This repository was archived by the owner on Sep 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Create Code style guide.md #10176
Merged
Merged
Create Code style guide.md #10176
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# `@shopify/polaris` Code Style Guide | ||
|
||
## Introduction | ||
|
||
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 | ||
|
||
## Table of Contents | ||
|
||
1. [Naming Conventions](#naming-conventions) | ||
1. [Control Structures and Flow](#control-structures-and-flow) | ||
1. [Error Handling](#error-handling) | ||
1. [Code Organization and Structure]1#code-organization-and-structure) | ||
1. [Examples and Code Snippets](#examples-and-code-snippets) | ||
|
||
## Naming Conventions | ||
|
||
- Use camel case for variable and function names. | ||
- Use Pascal case for component names. | ||
- Use Kebab case for props with a predefined list of strings. | ||
- Use descriptive and meaningful names that accurately represent the purpose of the variable, function, or component. | ||
|
||
## Control Structures and Flow | ||
|
||
- Use early returns or guard clauses to handle exceptional cases and reduce nesting. | ||
|
||
## Error Handling | ||
|
||
- Use `try-catch` blocks to handle exceptions and errors. | ||
- Provide meaningful error messages that help developers understand the issue. | ||
- Log errors appropriately for debugging and troubleshooting purposes. | ||
|
||
## Code Organization and Structure | ||
|
||
- Organize code files and directories logically and consistently. | ||
- Use meaningful and descriptive file and directory names. | ||
- Follow the recommended folder structure for components, utilities, and tests. | ||
- Import modules and components in alphabetical order. | ||
- Group related functions and variables together within a file. | ||
- Include [JSDoc tags](https://jsdoc.app/) to describe default prop values | ||
|
||
## Examples and Code Snippets | ||
|
||
- Include examples and code snippets in the documentation to demonstrate usage and best practices. | ||
- Provide clear and concise code examples that highlight the recommended coding style and patterns. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We do already use the ESLint import/order rule, which looks like it has an option for alphabetizing. Can we should enable this and remove this point?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm all for it