AI Skill Report Card
Applying Alibaba Front End Style
Quick Start13 / 15
Create .editorconfig in project root:
INIroot = true [*] indent_style = space indent_size = 2 max_line_length = 100 charset = utf-8 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
Add VS Code rulers in .vscode/settings.json:
JSON{ "editor.rulers": [100], "editor.tabSize": 2, "editor.insertSpaces": true, "files.encoding": "utf8" }
Recommendation▾
Expand coverage beyond indentation/line-width/encoding to actually reflect Alibaba's broader spec (naming conventions, comments, CSS property ordering, JS best practices like var vs let/const, semicolons, quotes) — currently it's narrowly focused on whitespace/EditorConfig, which undersells the 'Alibaba front-end specification' claim.
Workflow11 / 15
When applying or auditing Alibaba front-end spec to a project:
Progress:
- [ ] Verify/create .editorconfig with 2-space indent
- [ ] Set max_line_length to 100 (soft guideline, not hard-enforced by linters)
- [ ] Ensure charset = utf-8 everywhere
- [ ] Cross-check Prettier config doesn't conflict with EditorConfig
- [ ] Verify VS Code settings.json aligns (rulers, tabSize)
- [ ] Spot-check HTML/JS/CSS files for 2-space indentation compliance
- [ ] Confirm files end with newline, no trailing whitespace
- Indentation: enforce 2 spaces everywhere (HTML, CSS, JS, JSX, JSON, YAML). Never tabs.
- Line width: target 100 characters as a soft wrap guideline — flag lines that exceed it but use judgment (e.g., long URLs or strings are exempt).
- Encoding: all source/text files must be UTF-8, no BOM.
- Tooling alignment:
.editorconfiggoverns whitespace/charset; Prettier governs deeper formatting (quotes, semicolons, trailing commas) — don't let the two contradict (e.g., Prettier'stabWidthmust also be 2).
Recommendation▾
Add more diverse examples covering CSS and JS specifically (not just HTML indentation) since the skill claims to cover HTML, CSS, JS conventions but only shows one HTML example and one .editorconfig example.
Examples11 / 20
Example 1:
Input: Project has no .editorconfig, indentation is inconsistent (mix of 4-space and tabs).
Output:
INIroot = true [*] indent_style = space indent_size = 2 max_line_length = 100 charset = utf-8
Plus instruction to run Prettier with --tab-width 2 to auto-reformat existing files.
Example 2:
Input: <html> block indented with 4 spaces:
HTML<html> <head> <title></title> </head> </html>
Output:
HTML<html> <head> <title></title> </head> </html>
Recommendation▾
Include a 'bad output' example to contrast compliant vs non-compliant code more explicitly, and reference the actual official Alibaba style guide rules (e.g., BEM naming, comment blocks) for more credibility and completeness.
Best Practices
- Always pair
.editorconfig(whitespace-level rules) with Prettier (semantic formatting) — don't rely on one alone. - Set
indent_size = 2uniformly across HTML, CSS, JS/JSX, and JSON to keep deeply nested markup (like JSX) readable. - Treat the 100-char line width as a readability guideline for side-by-side diffs on large monitors, not an absolute hard limit — apply reasonable exceptions.
- Always specify
charset = utf-8explicitly; never assume default OS encoding. - Keep
insert_final_newline = trueandtrim_trailing_whitespace = trueto avoid noisy diffs.
Common Pitfalls
- Don't use tabs for indentation — rendering width is inconsistent across editors/environments.
- Don't mix 2-space config in
.editorconfigwith a differingtabWidthin.prettierrc— this causes formatter/editor conflicts. - Don't silently truncate or hard-wrap URLs/long strings just to satisfy the 100-char rule.
- Don't forget
charset = utf-8on non-JS files (Markdown, YAML, JSON) — encoding mismatches cause hard-to-debug issues in CI.