JavaScript style guide

Основные инструменты

• https://eslint.org/
• https://github.com/standard/standard
• https://github.com/standard/standard

Современные стандарты описаны здесь
https://github.com/airbnb/javascript

Как поставить плагин airbnb
https://www.npmjs.com/package/eslint-config-airbnb

Используйте JSDoc для документирования своего JS / JSX кода
http://usejsdoc.org/

Как настроить eslint для проверки на соответствие airbnb и JSDoc

http://www.acuriousanimal.com/2016/08/14/configuring-atom-with-eslint.html
Настройка и запуск с ESLint — валидатора JS кода (Up and Running with ESLint — the Pluggable JavaScript Linter)

Обзор

http://eslint.org/docs/user-guide/getting-started

По этой ссылке можно найти информацию, какой код не надо писать
https://github.com/Droogans/unmaintainable-code

Ниже кратко основные правила Airbnb и несколько рекомендаций

JavaScript Language Rules

Semicolons
Always use semicolons (;)

Function Declarations Within Blocks

// bad 

if (x) {
  function foo() {}
}

// good 

if (x) {
  var foo = function() {};
}

delete
Prefer this.foo = null.

eval()
Не использовать для строк
Only for code loaders and REPL (Read–eval–print loop)

with() {}
никогда не используйте

this
Only in object constructors, methods, and in setting up closures

for-in loop
Only for iterating over keys in an object/map/hash

JavaScript Style Rules

Naming
functionNamesLikeThis
variableNamesLikeThis
ClassNamesLikeThis
EnumNamesLikeThis
methodNamesLikeThis
CONSTANT_NAMES_LIKE_THIS
foo.namespaceNamesLikeThis.bar
filenameslikethis.js


Строки
Предпочтительно ' над "

Фигурные скобки
if (something) {
  // ...
} else {
  // ...
}

Инициализация структур
// запятые ставим справа
var inset = {
  top: 10,
  right: 20,
  bottom: 15,
  left: 12
};

Аргументы функций
Если это возможно, аргументы размещайте на одной строке

Formatting Code - Prettier

Средство, которое жёстко задаёт определённые правила форматирования кода, приводя код к единообразному виду, что позволяет придерживаться единого стиля в проектах разного масштаба.

В то время, как инструменты для линтинга, вроде https://eslint.org/, уже давно умеют https://eslint.org/docs/user-guide/command-line-interface#--fix, Prettier отличается гораздо большими возможностями. В отличие от ESLint, Prettier поддерживает JSON, CSS, SASS, и даже GraphQL и Markdown. Кроме того, он предлагает глубокую https://prettier.io/docs/en/integrating-with-linters.html и со многими популярными https://prettier.io/docs/en/editors.html.

Пожалуй, если говорить о средствах автоматического форматирования кода, сообществу JS осталось лишь прийти к единому мнению по поводу точки с запятой.

In most cases, it is recommended to setup Prettier on top of ESLint and stylelint and integrate it into the workflow. This allows the code to be formatted into consistent style automatically via commit hooks, so that developers do not need to spend time formatting the coding style manually.

Note that Prettier only enforces coding style, but does not check for logic errors in the code. Hence it is not a replacement for linters.

Study Links

• https://prettier.io/
• https://github.com/prettier/prettier

StandardJS is a standalone Node module that can lint and fix your code, but if you want to use it in a big existing project and deactivate some rules (because some would need a lot of modifications), you can also use the https://github.com/feross/eslint-config-standard.