/improvements-naming

Naming

The most important consideration in naming is that the name fully and accurately describes the entity/action the variable/function represents.

JavaScript

Use nouns for variable names

Exception: variables that contain boolean

Bad
const getEmptyString = ''
Good
const emptyString = ''

Use is/are or have/has prefixes for boolean variable

Bad
const valid = true
Good
const isValid = true

Use uppercase with splitting words by underscore(CONSTANT_CASE) for constant variables and dictionaries

Bad
const defaultUserRole = ''
const validationMessages = {}
Good
const DEFAULT_USER_ROLE = ''
const VALIDATION_MESSAGES = {}

Use verbs for functions names

Exception: not called computed properties and getters in Vue

Bad
const validation = () => {}
Good
const validate = () => {}

Use check for functions names that returns boolean

Bad
const valid = () => true
const isAuthorized = () => true
Good
const checkValidity = () => true
const checkAuthorization = () => true

Vue

Use variable naming for computed properties without parameter and function naming for computed properties with parameter

Bad
computed: {
  checkUserAuthorization() {},
  userById(id) {}
}
Good
computed: {
  isUserAuthorized() {},
  getUserById(id) {}
}

Use function naming for methods section

Bad
methods: {
  isUserAuthorized() {},
  user() {}
}
Good
methods: {
  checkUserAuthorization() {},
  getUser() {}
}

Use on prefix for event handlers names. Also prefer to use event name in method name

Bad
<CustomComponent @event-name="action" />
Good
<CustomComponent @event-name="onAction" />
Better
<CustomComponent @event-name="onEventName" />

Vuex

Use CONSTANT_CASE and ADD/SET/UPDATE/DELETE prefixes for mutations

Bad
mutations: {
  createUser() {},
  changeSettings() {}
}
Good
mutations: {
  ADD_USER() {},
  UPDATE_SETTINGS() {}
}

Better use modules for every entity with constant set of consistent mutations

Better
// modules/moduleA

mutations: {
  ADD() {},
  SET() {},
  UPDATE() {},
  DELETE() {},
}

// modules/moduleB

mutations: {
  ADD() {},
  SET() {},
  UPDATE() {},
  DELETE() {},
}

Use function naming for actions

Bad
actions: {
  googleAuthorization() {}
}
Good
actions: {
  authorizeByGoogle() {}
}

Use variable naming for getters without parameter and function naming for getters with parameter

Bad
getters: {
  getUser() {},
  checkUserAuthorization() {},
  userById(id) {}
}
Good
getters: {
  user() {},
  isUserAuthorized() {},
  getUserById(id) {}
}