feat: add EditorConfig, VS Code settings & extension recommendations for consistent DX#748
feat: add EditorConfig, VS Code settings & extension recommendations for consistent DX#748karanpatill wants to merge 3 commits intoaccordproject:mainfrom
Conversation
Signed-off-by: karanpatill <karanpatil82005@gmail.com>
…ignore to include them. Signed-off-by: karanpatill <karanpatil82005@gmail.com>
✅ Deploy Preview for ap-template-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
mttrbrts
left a comment
mttrbrts
left a comment
There was a problem hiding this comment.
Can you validate these changes against the setting in https://github.com/accordproject/concerto, we should strive to be consistent where possible?
There was a problem hiding this comment.
Pull request overview
This PR enhances the developer experience by introducing standardized editor configurations and comprehensive architecture documentation. The changes establish a consistent formatting baseline across contributors without affecting runtime behavior or build processes.
Changes:
- Added
.editorconfigwith editor-agnostic formatting rules (2-space indentation, LF line endings, UTF-8) and targeted overrides for various file types - Added
.vscode/settings.jsonwith workspace-level configurations for formatting, TypeScript, Tailwind, and ESLint integration - Added
.vscode/extensions.jsonrecommending 14 VS Code extensions aligned with the project's tech stack - Updated
.gitignoreto track.vscode/settings.jsonalongside the existing.vscode/extensions.json - Added comprehensive
ARCHITECTURE.mddocumentation explaining the template execution pipeline, state management, and component architecture
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
.editorconfig |
Defines editor-agnostic formatting rules with 2-space indentation, LF line endings, and file-type-specific overrides |
.vscode/settings.json |
Configures format-on-save, ESLint auto-fix, TypeScript SDK, Tailwind IntelliSense, and search exclusions |
.vscode/extensions.json |
Recommends 14 VS Code extensions covering formatting (EditorConfig, Prettier, ESLint), frameworks (TypeScript, Tailwind, Styled Components), testing (Playwright, Vitest), and QoL tools |
.gitignore |
Updated to track .vscode/settings.json (line 18) for shared workspace settings |
ARCHITECTURE.md |
New 367-line comprehensive guide covering data flow, execution pipeline, state management, component architecture, and key libraries |
| export const NAME = "Hello World"; | ||
| export const MODEL = `namespace org.example.helloworld...`; // Concerto .cto | ||
| export const TEMPLATE = `Hello {{firstName}} {{lastName}}!`; // TemplateMark | ||
| export const DATA = { firstName: "John", lastName: "Doe" }; // JSON |
There was a problem hiding this comment.
The documentation shows DATA as a JSON string in the example (line 150), but the actual Sample type definition in src/samples/index.ts specifies DATA as type "object", not string. The example should show DATA as an object literal without quotes, like: DATA = { firstName: "John", lastName: "Doe" }
| └── MainContainer.tsx ← Main split-panel workspace | ||
| ├── [Left PanelGroup — vertical] | ||
| │ ├── TemplateModel ← Concerto .cto editor (ConcertoEditor.tsx) | ||
| │ │ └── ConcertoEditor.tsx (Monaco editor, language: "cto") |
There was a problem hiding this comment.
The documentation states the Monaco editor language is "cto" for the Concerto Model Editor, but the actual implementation in src/editors/ConcertoEditor.tsx uses language="concerto". This should be corrected to match the implementation.
| │ │ └── ConcertoEditor.tsx (Monaco editor, language: "cto") | |
| │ │ └── ConcertoEditor.tsx (Monaco editor, language: "concerto") |
| # ── Source files (JS / TS / JSX / TSX) ────────────────────────────── | ||
| [*.{js,jsx,ts,tsx}] | ||
| indent_size = 2 | ||
| max_line_length = 100 |
There was a problem hiding this comment.
The max_line_length setting is set to 100 for JavaScript/TypeScript files, but there's no existing ESLint or Prettier configuration in the repository that enforces this limit. This could create confusion if the EditorConfig suggests one line length but no other tooling enforces it. Consider either removing this setting or adding a corresponding ESLint rule (e.g., max-len) or Prettier's printWidth configuration.
| max_line_length = 100 |
| { | ||
| // ── Editor Defaults ──────────────────────────────────────────── | ||
| "editor.formatOnSave": true, | ||
| "editor.defaultFormatter": "esbenp.prettier-vscode", |
There was a problem hiding this comment.
The VS Code settings reference Prettier as the default formatter ("esbenp.prettier-vscode"), but Prettier is not listed as a dev dependency in package.json. Contributors who install the recommended extensions will have the Prettier extension, but the project should include a local Prettier installation to ensure consistent formatting across environments and CI/CD pipelines. Consider adding "prettier" to devDependencies and creating a .prettierrc configuration file to explicitly define formatting rules.
| │ │ ├── index.ts # Exports SAMPLES array + Sample type | ||
| │ │ ├── playground.ts # Default "playground" sample | ||
| │ │ ├── helloworld.ts | ||
| │ │ └── ... # (14 more samples) |
There was a problem hiding this comment.
The comment states there are "14 more samples" (line 52), but based on the actual count in src/samples/, there are 17 total sample files including playground.ts and helloworld.ts (which are mentioned on lines 50-51). This should state "15 more samples" to be accurate.
| │ │ └── ... # (14 more samples) | |
| │ │ └── ... # (15 more samples) |
feat(dx): add EditorConfig and VS Code workspace configuration
Closes #628
This PR improves the developer experience by adding shared editor configuration files that ensure consistent formatting and a productive development environment across contributors — without affecting runtime behavior.
Changes
node_modules,dist, package-lock.json,playwright-report)Flags
Why this is needed
Contributors using different editors and personal configurations can introduce inconsistent formatting, whitespace issues, and unnecessary diffs in pull requests. These files provide a shared baseline that:
Screenshots or Video
Not applicable (config files only)
Related Issues