Awesome/awesome-copilot
1
0
Fork 0
mirror of https://github.com/github/awesome-copilot.git synced 2026-02-20 02:15: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
Always prefer Lightning Web Component library components over plain HTML elements for consistency, accessibility, and future-proofing.
#### ✅ Recommended Approach
#### Recommended Approach
```html
<!-- Use Lightning components -->
<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>
```
#### ❌ Avoid Plain HTML
#### Avoid Plain HTML
```html
<!-- Avoid these -->
<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
#### ✅ Use SLDS Classes
#### Use SLDS Classes
```html
<!-- Color and theming -->
<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>
```
#### ❌ Avoid Custom CSS
#### Avoid Custom CSS
```css
/* Don't create custom styles that override SLDS */
.custom-button {
@@ -339,11 +339,10 @@ export default class MyComponent extends LightningElement {
```
## Common Anti-Patterns to Avoid
1. **❌ Direct DOM Manipulation**: Never use `document.querySelector()` or similar
2. **❌ jQuery or External Libraries**: Avoid non-Lightning compatible libraries
3. **❌ Inline Styles**: Use SLDS classes instead of `style` attributes
4. **❌ Global CSS**: All styles should be scoped to the component
5. **❌ Hardcoded Values**: Use custom labels, custom metadata, or constants
6. **❌ Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
7. **❌ Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`
1. **Direct DOM Manipulation**: Never use `document.querySelector()` or similar
2. **jQuery or External Libraries**: Avoid non-Lightning compatible libraries
3. **Inline Styles**: Use SLDS classes instead of `style` attributes
4. **Global CSS**: All styles should be scoped to the component
5. **Hardcoded Values**: Use custom labels, custom metadata, or constants
6. **Imperative API Calls**: Prefer `@wire` over imperative `import` calls when possible
7. **Memory Leaks**: Always clean up event listeners in `disconnectedCallback()`