Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-23 11:55:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated instruction file

Browse Source
This commit is contained in:
Abbas Jafry
2025-12-31 03:57:25 +05:30
parent fabc2986dc
commit f253456fd7
1 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
instructions/lwc.instructions.md
View File

@@ -42,7 +42,7 @@ applyTo: 'force-app/main/default/lwc/**'
### 1. Use Lightning Components Over HTML Tags ### 1. Use Lightning Components Over HTML Tags
Always prefer Lightning Web Component library components over plain HTML elements for consistency, accessibility, and future-proofing. Always prefer Lightning Web Component library components over plain HTML elements for consistency, accessibility, and future-proofing.
#### ✅ Recommended Approach #### Recommended Approach
```html ```html
<!-- Use Lightning components --> <!-- Use Lightning components -->
<lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button> <lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
@@ -51,7 +51,7 @@ Always prefer Lightning Web Component library components over plain HTML element
<lightning-radio-group name="duration" label="Duration" options={durationOptions} value={duration} type="radio"></lightning-radio-group> <lightning-radio-group name="duration" label="Duration" options={durationOptions} value={duration} type="radio"></lightning-radio-group>
``` ```
#### ❌ Avoid Plain HTML #### Avoid Plain HTML
```html ```html
<!-- Avoid these --> <!-- Avoid these -->
<button onclick={handleSave}>Save</button> <button onclick={handleSave}>Save</button>
@@ -123,7 +123,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var
### 4. Avoid Custom CSS ### 4. Avoid Custom CSS
#### ✅ Use SLDS Classes #### Use SLDS Classes
```html ```html
<!-- Color and theming --> <!-- Color and theming -->
<div class="slds-theme_success slds-text-color_inverse slds-var-p-around_small"> <div class="slds-theme_success slds-text-color_inverse slds-var-p-around_small">
@@ -139,7 +139,7 @@ Always use Salesforce Lightning Design System utility classes with the `slds-var
</div> </div>
``` ```
#### ❌ Avoid Custom CSS #### Avoid Custom CSS
```css ```css
/* Don't create custom styles that override SLDS */ /* Don't create custom styles that override SLDS */
.custom-button { .custom-button {
@@ -339,11 +339,10 @@ export default class MyComponent extends LightningElement {
``` ```
## Common Anti-Patterns to Avoid ## Common Anti-Patterns to Avoid
1. **Direct DOM Manipulation**: Never use `document.querySelector()` or similar
1. **❌ Direct DOM Manipulation**: Never use `document.querySelector()` or similar 2. **jQuery or External Libraries**: Avoid non-Lightning compatible libraries
2. **❌ jQuery or External Libraries**: Avoid non-Lightning compatible libraries 3. **Inline Styles**: Use SLDS classes instead of `style` attributes
3. **❌ Inline Styles**: Use SLDS classes instead of `style` attributes 4. **Global CSS**: All styles should be scoped to the component
4. **❌ Global CSS**: All styles should be scoped to the component 5. **Hardcoded Values**: Use custom labels, custom metadata, or constants
5. **❌ Hardcoded Values**: Use custom labels, custom metadata, or constants 6. **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
6. **❌ Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible 7. **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`
7. **❌ Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`