CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-stylistic--eslint-plugin-js

JavaScript stylistic rules for ESLint that enforce code formatting and style consistency without changing code logic.

—

Pending
Overview
Eval results
Files

punctuation-operators.mddocs/

Punctuation and Operators

Rules governing the placement and spacing of punctuation marks, operators, and symbols in JavaScript code.

semi

Requires or disallows semicolons instead of ASI (Automatic Semicolon Insertion).

const semi: Rule.RuleModule;

// Rule options
type SemiOptions = 
  | 'always'
  | 'never'
  | ['always' | 'never', {
      omitLastInOneLineBlock?: boolean;
      beforeStatementContinuationChars?: 'always' | 'any' | 'never';
    }];

Usage Examples:

// ✓ Good with "always" (default)
const name = 'John';
function greet() {
  return 'Hello';
}

// ✓ Good with "never"
const name = 'John'
function greet() {
  return 'Hello'
}

// ✓ Good with omitLastInOneLineBlock: true
function simple() { return true } // last statement in one-line block
function complex() {
  const x = 1;
  return x; // other statements still need semicolons
}

Configuration:

rules: {
  '@stylistic/js/semi': ['error', 'always']
}

semi-spacing

Enforces consistent spacing before and after semicolons.

const semiSpacing: Rule.RuleModule;

// Rule options
type SemiSpacingOptions = {
  before?: boolean;
  after?: boolean;
};

Usage Examples:

// ✓ Good with default settings (before: false, after: true)
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// ✓ Good with custom settings
for (let i = 0 ;i < 10 ;i++) { // before: true, after: false
  console.log(i);
}

Configuration:

rules: {
  '@stylistic/js/semi-spacing': ['error', { before: false, after: true }]
}

semi-style

Enforces location of semicolons.

const semiStyle: Rule.RuleModule;

// Rule options
type SemiStyleOptions = 'last' | 'first';

Usage Examples:

// ✓ Good with "last" (default)
const name = 'John';
const age = 30;

// ✓ Good with "first"
const name = 'John'
;const age = 30

Configuration:

rules: {
  '@stylistic/js/semi-style': ['error', 'last']
}

comma-dangle

Requires or disallows trailing commas.

const commaDangle: Rule.RuleModule;

// Rule options
type CommaDangleOptions = 
  | 'always'
  | 'always-multiline'
  | 'only-multiline'
  | 'never'
  | {
      arrays?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
      objects?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
      imports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
      exports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
      functions?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
    };

Usage Examples:

// ✓ Good with "always-multiline"
const arr = [1, 2, 3]; // single line, no trailing comma
const obj = {
  name: 'John',
  age: 30, // multiline, trailing comma required
};

// ✓ Good with "never"
const arr = [1, 2, 3];
const obj = {
  name: 'John',
  age: 30
};

// ✓ Good with custom config
const items = [
  'apple',
  'banana', // arrays: 'always-multiline'
];
function greet(name, age) {} // functions: 'never'

Configuration:

rules: {
  '@stylistic/js/comma-dangle': ['error', 'always-multiline']
}

comma-spacing

Enforces consistent spacing before and after commas.

const commaSpacing: Rule.RuleModule;

// Rule options
type CommaSpacingOptions = {
  before?: boolean;
  after?: boolean;
};

Usage Examples:

// ✓ Good with default settings (before: false, after: true)
const arr = [1, 2, 3];
function greet(name, age) {}

// ✓ Good with custom settings
const arr = [1 ,2 ,3]; // before: true, after: false
function greet(name ,age) {}

Configuration:

rules: {
  '@stylistic/js/comma-spacing': ['error', { before: false, after: true }]
}

comma-style

Enforces consistent comma style.

const commaStyle: Rule.RuleModule;

// Rule options
type CommaStyleOptions = 
  | 'last'
  | 'first'
  | ['last' | 'first', {
      exceptions?: {
        [nodeType: string]: boolean;
      };
    }];

Usage Examples:

// ✓ Good with "last" (default)
const obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// ✓ Good with "first"
const obj = {
    name: 'John'
  , age: 30
  , city: 'New York'
};

Configuration:

rules: {
  '@stylistic/js/comma-style': ['error', 'last']
}

quotes

Enforces the consistent use of either backticks, double, or single quotes.

const quotes: Rule.RuleModule;

// Rule options
type QuotesOptions = 
  | 'single'
  | 'double'
  | 'backtick'
  | ['single' | 'double' | 'backtick', {
      avoidEscape?: boolean;
      allowTemplateLiterals?: boolean;
    }];

Usage Examples:

// ✓ Good with "single"
const name = 'John';
const message = 'Hello, world!';

// ✓ Good with "double"
const name = "John";
const message = "Hello, world!";

// ✓ Good with avoidEscape: true
const message = "Don't worry"; // single quotes would require escaping
const other = 'He said "Hello"'; // double quotes would require escaping

// ✓ Good with allowTemplateLiterals: true
const template = `Hello, ${name}!`; // template literals always allowed

Configuration:

rules: {
  '@stylistic/js/quotes': ['error', 'single', { avoidEscape: true }]
}

jsx-quotes

Enforces the consistent use of either double or single quotes in JSX attributes.

const jsxQuotes: Rule.RuleModule;

// Rule options
type JsxQuotesOptions = 'prefer-single' | 'prefer-double';

Usage Examples:

// ✓ Good with "prefer-double" (default)
const element = <div className="container">Content</div>;

// ✓ Good with "prefer-single"
const element = <div className='container'>Content</div>;

Configuration:

rules: {
  '@stylistic/js/jsx-quotes': ['error', 'prefer-double']
}

quote-props

Requires quotes around object literal property names.

const quoteProps: Rule.RuleModule;

// Rule options
type QuotePropsOptions = 
  | 'always'
  | 'as-needed'
  | 'consistent'
  | 'consistent-as-needed'
  | ['always' | 'as-needed' | 'consistent' | 'consistent-as-needed', {
      keywords?: boolean;
      unnecessary?: boolean;
      numbers?: boolean;
    }];

Usage Examples:

// ✓ Good with "as-needed" (default)
const obj = {
  name: 'John',
  age: 30,
  'full-name': 'John Doe', // needs quotes due to hyphen
  'class': 'person' // needs quotes if keywords: true
};

// ✓ Good with "always"
const obj = {
  'name': 'John',
  'age': 30,
  'full-name': 'John Doe'
};

// ✓ Good with "consistent"
const obj = {
  'name': 'John', // all quoted because one needs quotes
  'age': 30,
  'full-name': 'John Doe'
};

Configuration:

rules: {
  '@stylistic/js/quote-props': ['error', 'as-needed']
}

dot-location

Enforces consistent newlines before and after dots.

const dotLocation: Rule.RuleModule;

// Rule options
type DotLocationOptions = 'object' | 'property';

Usage Examples:

// ✓ Good with "object" (default)
const result = object
  .property
  .method();

// ✓ Good with "property"
const result = object.
  property.
  method();

Configuration:

rules: {
  '@stylistic/js/dot-location': ['error', 'property']
}

operator-linebreak

Enforces consistent linebreak style for operators.

const operatorLinebreak: Rule.RuleModule;

// Rule options
type OperatorLinebreakOptions = 
  | 'after'
  | 'before'
  | 'none'
  | ['after' | 'before' | 'none', {
      overrides?: {
        [operator: string]: 'after' | 'before' | 'none' | 'ignore';
      };
    }];

Usage Examples:

// ✓ Good with "after"
const result = a +
  b +
  c;

// ✓ Good with "before"
const result = a
  + b
  + c;

// ✓ Good with overrides
const result = a &&
  b // &&: 'after'
  || c; // ||: 'before'

Configuration:

rules: {
  '@stylistic/js/operator-linebreak': ['error', 'after']
}

switch-colon-spacing

Enforces spacing around colons of switch statements.

const switchColonSpacing: Rule.RuleModule;

// Rule options
type SwitchColonSpacingOptions = {
  before?: boolean;
  after?: boolean;
};

Usage Examples:

// ✓ Good with default settings (before: false, after: true)
switch (value) {
  case 'a': return 1;
  case 'b': return 2;
  default: return 0;
}

// ✓ Good with custom settings
switch (value) {
  case 'a' :return 1; // before: true, after: false
  case 'b' :return 2;
  default :return 0;
}

Configuration:

rules: {
  '@stylistic/js/switch-colon-spacing': ['error', { before: false, after: true }]
}

Common Punctuation Combinations

Standard Style

rules: {
  '@stylistic/js/semi': ['error', 'always'],
  '@stylistic/js/quotes': ['error', 'single'],
  '@stylistic/js/comma-dangle': ['error', 'always-multiline'],
  '@stylistic/js/comma-spacing': ['error', { before: false, after: true }]
}

Semicolon-free Style

rules: {
  '@stylistic/js/semi': ['error', 'never'],
  '@stylistic/js/quotes': ['error', 'single'],
  '@stylistic/js/comma-dangle': ['error', 'never'],
  '@stylistic/js/comma-style': ['error', 'last']
}

Type Definitions

interface PunctuationRules {
  'semi': Rule.RuleModule;
  'semi-spacing': Rule.RuleModule;
  'semi-style': Rule.RuleModule;
  'comma-dangle': Rule.RuleModule;
  'comma-spacing': Rule.RuleModule;
  'comma-style': Rule.RuleModule;
  'quotes': Rule.RuleModule;
  'jsx-quotes': Rule.RuleModule;
  'quote-props': Rule.RuleModule;
  'operator-linebreak': Rule.RuleModule;
}

interface SemiOptions {
  omitLastInOneLineBlock?: boolean;
  beforeStatementContinuationChars?: 'always' | 'any' | 'never';
}

interface CommaDangleConfig {
  arrays?: 'always' | 'always-multiline' | 'only-multiline' | 'never';  
  objects?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
  imports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
  exports?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
  functions?: 'always' | 'always-multiline' | 'only-multiline' | 'never';
}

Install with Tessl CLI

npx tessl i tessl/npm-stylistic--eslint-plugin-js

docs

array-formatting.md

code-quality-consistency.md

function-formatting.md

index.md

line-breaks-newlines.md

modern-javascript.md

object-formatting.md

plugin-configuration.md

punctuation-operators.md

spacing-indentation.md

tile.json