spatie-javascript

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Spatie JavaScript Guidelines

Spatie JavaScript 编码指南

Overview

概述

Apply Spatie's JavaScript coding standards to keep JS/TS code consistent and readable.

应用Spatie的JavaScript编码规范，保持JS/TS代码的一致性和可读性。

When to Activate

适用场景

Activate this skill for any JavaScript or TypeScript coding work.
Activate this skill when working on
```
.js
```
,
```
.ts
```
,
```
.jsx
```
,
```
.tsx
```
, or
```
.vue
```
files.
Activate this skill when configuring Prettier or ESLint for a project.

在进行任何JavaScript或TypeScript编码工作时启用此技能。
处理
```
.js
```
、
```
.ts
```
、
```
.jsx
```
、
```
.tsx
```
或
```
.vue
```
文件时启用此技能。
为项目配置Prettier或ESLint时启用此技能。

Scope

适用范围

In scope: JavaScript, TypeScript, Vue single-file components, Prettier/ESLint configuration.
Out of scope: PHP, Laravel, CSS-only files, server configuration.

适用范围：JavaScript、TypeScript、Vue单文件组件、Prettier/ESLint配置。
不适用范围：PHP、Laravel、纯CSS文件、服务器配置。

Prettier Configuration

Prettier 配置

Indentation: 4 spaces (via
```
.editorconfig
```
, not Prettier default of 2)
Print width: 120 characters (not Prettier default of 80)
Quote style: single quotes

缩进：4个空格（通过
```
.editorconfig
```
设置，而非Prettier默认的2个空格）
打印宽度：120字符（而非Prettier默认的80字符）
引号风格：单引号

Variable Declarations

变量声明

Prefer
```
const
```
over
```
let
```
. Only use
```
let
```
when a variable will be reassigned.
Never use
```
var
```
.
Reassigning object properties is fine with
```
const
```
— the reference is not reassigned.

优先使用
```
const
```
而非
```
let
```
。仅当变量需要重新赋值时使用
```
let
```
。
绝不使用
```
var
```
。
使用
```
const
```
时可以重新赋值对象属性——因为引用并未改变。

Variable Names

变量命名

Don't abbreviate variable names in multi-line functions. Use full, descriptive names.
Exception: single-line arrow functions where context is obvious.

javascript

// Good — full names in multi-line functions
function saveUserSession(userSession) {
    // ...
}

// Acceptable — short name in single-line arrow
userSessions.forEach(s => saveUserSession(s));

在多行函数中不要缩写变量名。使用完整、具有描述性的名称。
例外：上下文清晰的单行箭头函数。

javascript

// Good — full names in multi-line functions
function saveUserSession(userSession) {
    // ...
}

// Acceptable — short name in single-line arrow
userSessions.forEach(s => saveUserSession(s));

Comparisons

比较操作

Always use
```
===
```
(strict equality). Never use
```
==
```
.
If unsure of the type, cast it first:

javascript

const number = parseInt(input);

if (number === 5) {
    // ...
}

始终使用
```
===
```
（严格相等）。绝不使用
```
==
```
。
若不确定类型，先进行类型转换：

javascript

const number = parseInt(input);

if (number === 5) {
    // ...
}

Functions

函数

Function Declarations

函数声明

Use the
```
function
```
keyword for named functions to clearly signal it's a function.

对命名函数使用
```
function
```
关键字，明确标识这是一个函数。

Arrow Functions

箭头函数

Use for terse, single-line operations.
Use for anonymous callbacks.
Use in higher-order functions when it improves readability.
Don't use arrow functions when you need
```
this
```
context (e.g., jQuery event handlers).

用于简洁的单行操作。
用于匿名回调函数。
在高阶函数中使用以提升可读性。
当需要
```
this
```
上下文时（如jQuery事件处理器），不要使用箭头函数。

Object Methods

对象方法

Use shorthand method syntax:

javascript

// Good
const obj = {
    handleClick(event) {
        // ...
    },
};

// Avoid
const obj = {
    handleClick: function(event) {
        // ...
    },
};

使用简写方法语法：

javascript

// Good
const obj = {
    handleClick(event) {
        // ...
    },
};

// Avoid
const obj = {
    handleClick: function(event) {
        // ...
    },
};

Destructuring

解构赋值

Prefer destructuring over manual property/index access:

javascript

// Good
const [hours, minutes] = '12:00'.split(':');

// Good — configuration objects with defaults
function createUser({ name, email, role = 'member' }) {
    // ...
}

// Avoid
const parts = '12:00'.split(':');
const hours = parts[0];
const minutes = parts[1];

Source: https://spatie.be/guidelines/javascript

优先使用解构赋值，而非手动获取属性/索引：

javascript

// Good
const [hours, minutes] = '12:00'.split(':');

// Good — configuration objects with defaults
function createUser({ name, email, role = 'member' }) {
    // ...
}

// Avoid
const parts = '12:00'.split(':');
const hours = parts[0];
const minutes = parts[1];

来源：https://spatie.be/guidelines/javascript