repository·main·Indexed 22 days ago
https://github.com/alibaba/f2e-specA comprehensive set of coding standards and engineering best practices for front-end development. It includes specification documentation for JS, TS, CSS, HTML, React, and Node.js, alongside automated linting tools such as f2elint, eslint-config-ali, stylelint-config-ali, prettier-config-ali, commitlint-config-ali, and markdownlint-config-ali to enforce compliance across projects.
The Alibaba Front-end Specification is a set of coding and engineering standards used extensively within Alibaba's economic ecosystem. It aims to reduce collaboration costs and improve project maintainability and stability by unifying coding styles, promoting best practices, and providing automated code defect checks.
The project consists of two main parts:
You can either read the documentation to understand the standards or use tools like f2elint to integrate these checks into your project automatically.
When using a for-in loop, always verify that the key belongs to the object's own properties. This prevents the loop from iterating over properties inherited from the prototype chain.
Recommended ESLint rule: guard-for-in
// bad
for (const key in foo) {
doSomething(key);
}
// good
for (const key in foo) {
if (Object.prototype.hasOwnProperty.call(foo, key)) {
doSomething(key);
}
}Select a workflow based on your team size and release requirements:
main/master.main/master). Create feature or hotfix branches from main and merge back. Versions are typically strictly increasing.LTS branches) to backport security fixes to older versions.Follow these naming rules to ensure consistency and compatibility with ESLint rules like react/jsx-filename-extension and react/jsx-pascal-case:
.jsx, .tsx, .js, or .ts for React component files.// bad
import reservationCard from './reservation-card';
// good
import ReservationCard from './reservation-card';
// bad
const ReservationItem = <ReservationCard />;
// good
const reservationItem = <ReservationCard />;The <!doctype html> declaration is Mandatory. It must be at the very beginning of the document and must use lowercase HTML5 syntax.
<!-- ✅ good -->
<!doctype html>
<html lang="zh-CN"></html>Avoid manually requiring Node.js built-in modules that are already available as global variables. This keeps code cleaner and follows node/prefer-global ESLint rules.
// bad
const { Buffer } = require('buffer');
const b = Buffer.alloc(16);
// good
const b = Buffer.alloc(16);
// bad
const process = require('process');
process.exit(0);
// good
process.exit(0);Starting from version 15.0.0, the node and typescript/node configurations no longer provide egg related settings. To lint Egg.js projects, you must use the following configurations instead:
egg for standard Egg.js projects.typescript/egg for Egg.js projects using TypeScript.Class members should follow a consistent order:
static) come before instance members.field) come before constructor, which comes before methods (method).public members come before protected, which come before private.// good
class Foo {
public static foo1 = 'foo1';
protected static foo2 = 'foo2';
private static foo3 = 'foo3';
public static getFoo1() {}
public bar1 = 'bar1';
protected bar2 = 'bar2';
private bar3 = 'bar3';
public constructor() {}
public getBar1() {}
}Follow these rules for defining and managing React components:
class extends React.Component instead of createReactClass.this in Function Components: Do not use this inside function components; access props and context directly.React.createElement: Use JSX instead of calling React.createElement directly unless you are not using JSX files.componentWillMount, componentWillReceiveProps, or componentWillUpdate. Use constructor, componentDidMount, or componentDidUpdate instead. You can use the rename-unsafe-lifecycles codemod to prefix these with UNSAFE_.// good - Use ES6 class
class Listing extends React.Component {
render() {
return <div>{this.state.hello}</div>;
}
}
// good - Use function component for stateless components
function Listing({ hello }) {
return <div>{hello}</div>;
}When using specific array methods, you must include a return statement in the callback function to avoid misuse or errors. This applies to the following methods:
map, filter, from, every, find, findIndex, reduce, reduceRight, some, and sort.
Common Pitfalls:
map for side effects: If you only want to iterate over an array without creating a new one, use forEach instead of map.return in reduce: Failing to return the accumulator (memo) in a reduce callback will result in a TypeError (e.g., Cannot set property '...' of undefined).// bad: map used for side effects instead of forEach
myArray.map((item, index) => {
myObj[item] = index;
});
// good: use forEach for side effects
myArray.forEach((item, index) => {
myObj[item] = index;
});
// bad: missing return in reduce
const myObj = myArray.reduce((memo, item, index) => {
memo[item] = index;
}, {});
// good: return the memo in reduce
const myObj = myArray.reduce((memo, item, index) => {
memo[item] = index;
return memo;
}, {});