AI Skill Report Card
Applying Alibaba Frontend Style
Quick Start14 / 15
Create/update .editorconfig at project root:
INIroot = true [*] charset = utf-8 indent_style = space indent_size = 2 max_line_length = 100 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
Add VS Code ruler setting in .vscode/settings.json:
JSON{ "editor.rulers": [100], "editor.tabSize": 2, "editor.insertSpaces": true, "files.encoding": "utf8" }
Recommendation▾
Add more concrete examples covering CSS/HTML/JS-specific rules beyond indentation/charset (e.g., naming conventions, comment styles) since 'general front-end coding conventions' implies broader scope than just formatting config
Workflow13 / 15
Progress:
- Check if
.editorconfigexists; create or merge settings if missing - Enforce 2-space indentation (mandatory rule) across all file types (html, css, js, jsx, json, etc.)
- Enforce UTF-8 charset (mandatory rule)
- Set 100-char line width as recommended ruler (not hard error unless Prettier enforces it)
- If Prettier is used, align
printWidth: 100,tabWidth: 2,useTabs: false - Add
.vscode/settings.jsonruler config for team consistency - Verify no conflicting tab/space or charset settings in other config files (
.prettierrc, IDE configs)
Recommendation▾
Include a 'bad output' example showing what non-compliant code looks like vs corrected, to strengthen the examples section per grading criteria
Examples13 / 20
Example 1:
Input: New project has no .editorconfig.
Output:
INIroot = true [*] charset = utf-8 indent_style = space indent_size = 2 max_line_length = 100
Example 2:
Input: Project uses Prettier with tabWidth: 4.
Output: Update .prettierrc:
JSON{ "tabWidth": 2, "printWidth": 100, "useTabs": false }
Explain rationale: 2 spaces balances readability and density for deeply nested syntax like HTML/JSX; consistent across all editors unlike tabs.
Recommendation▾
Reference the actual Alibaba front-end specification document/source for traceability, since claiming to apply a specific external standard without citation is a gap
Best Practices
- Always use spaces, never tabs — rendering width of tabs is inconsistent across editors/viewers.
- Treat indentation (2 spaces) and charset (UTF-8) as mandatory, non-negotiable rules.
- Treat 100-char line width as a recommended guideline enforced via editor rulers, not necessarily a hard linter failure — the rationale is dual-monitor/split-screen code review at ~1600px width.
- Keep
.editorconfigas the single source of truth; mirror its values in Prettier/ESLint/IDE settings to avoid conflicts. - Apply rules uniformly across HTML, CSS, JS/JSX, JSON, and other text-based source files.
Common Pitfalls
- Don't mix tabs and spaces in the same project — pick spaces per this spec.
- Don't set indent to 4 spaces "for readability" — it wastes horizontal space in deeply nested markup (HTML/JSX).
- Don't forget to set charset explicitly; relying on OS/editor defaults can cause encoding mismatches (e.g., GBK vs UTF-8) in multi-contributor teams.
- Don't let Prettier/ESLint configs silently override
.editorconfigvalues — keep them synced.