Spatie JavaScript Guidelines

Overview

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.

Scope

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

Prettier Configuration

• Indentation: 4 spaces (via

  .editorconfig

  , not Prettier default of 2)
• Print width: 120 characters (not Prettier default of 80)
• Quote style: single quotes

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.

Variable Names

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

// 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:

const number = parseInt(input);

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

Functions

Function Declarations

• Use the

  function

  keyword for named functions to clearly signal it's a 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).

Object Methods

• Use shorthand method syntax:

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

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

Destructuring

• Prefer destructuring over manual property/index access:

// 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];