JavaScript Standard Style

English • Español (Latinoamérica) • Français • Bahasa Indonesia • Italiano (Italian) • 日本語 (Japanese) • 한국어 (Korean) • Português (Brasil) • 简体中文 (Simplified Chinese) • 繁體中文 (Taiwanese Mandarin)

이것은 JavaScript standard 규칙입니다.

standard에 대해 배우는 가장 좋은 방법은 그냥 설치하고 코드에 시도해 보는 것입니다.

규칙

• 들여쓰기시 2칸 공백사용 을 사용합니다.

  eslint: indent

  function hello (name) {
    console.log('hi', name)
  }
  

• 이스케이프를 피하기 위해 문자열에 작은 따옴표 를 사용합니다.

  eslint: quotes

  console.log('hello there')
  $("<div class='box'>")
  

• 사용하지 않는 변수를 정의하지 마세요.

  eslint: no-unused-vars

  function myFunction () {
    var result = something()   // ✗ 피하세요
  }
  

• 예약어 뒤에는 공백을 추가합니다.

  eslint: keyword-spacing

  if (condition) { ... }   // ✓ 좋아요
  if(condition) { ... }    // ✗ 피하세요
  

• 함수 선언 괄호 앞에 공백을 추가합니다.

  eslint: space-before-function-paren

  function name (arg) { ... }   // ✓ 좋아요
  function name(arg) { ... }    // ✗ 피하세요
  
  run(function () { ... })      // ✓ 좋아요
  run(function() { ... })       // ✗ 피하세요
  

• 항상 == 대신 ===을 사용 합니다.
  예외: null || undefined는 obj == null로 확인할 수 있습니다.

  eslint: eqeqeq

  if (name === 'John')   // ✓ 좋아요
  if (name == 'John')    // ✗ 피하세요
  

  if (name !== 'John')   // ✓ 좋아요
  if (name != 'John')    // ✗ 피하세요
  

• 공백사이에 연산자를 넣어주세요.

  eslint: space-infix-ops

  // ✓ 좋아요
  var x = 2
  var message = 'hello, ' + name + '!'
  

  // ✗ 피하세요
  var x=2
  var message = 'hello, '+name+'!'
  

• 쉽표 뒤에 공백 이 있어야 합니다.

  eslint: comma-spacing

  // ✓ 좋아요
  var list = [1, 2, 3, 4]
  function greet (name, options) { ... }
  

  // ✗ 피하세요
  var list = [1,2,3,4]
  function greet (name,options) { ... }
  

• else 문은 중괄호와 같은 줄에 두어야 합니다.

  eslint: brace-style

  // ✓ 좋아요
  if (condition) {
    // ...
  } else {
    // ...
  }
  

  // ✗ 피하세요
  if (condition) {
    // ...
  }
  else {
    // ...
  }
  

• 여러줄의 if문을 사용할 경우 중괄호를 사용해야합니다.

  eslint: curly

  // ✓ 좋아요
  if (options.quiet !== true) console.log('done')
  

  // ✓ 좋아요
  if (options.quiet !== true) {
    console.log('done')
  }
  

  // ✗ 피하세요
  if (options.quiet !== true)
    console.log('done')
  

• err 함수파라미터가 있을 경우 항상 처리해줘야 합니다.

  eslint: handle-callback-err

  // ✓ 좋아요
  run(function (err) {
    if (err) throw err
    window.alert('done')
  })
  

  // ✗ 피하세요
  run(function (err) {
    window.alert('done')
  })
  

• 항상 브라우저 전역 접두어에는 window를 붙여야 합니다.
  예외의 경우들: document, console, navigator.

  eslint: no-undef

  window.alert('hi')   // ✓ 좋아요
  

• 여러 줄의 공백을 허용하지 않습니다.

  eslint: no-multiple-empty-lines

  // ✓ 좋아요
  var value = 'hello world'
  console.log(value)
  

  // ✗ 피하세요
  var value = 'hello world'
  // blank line
  // blank line
  console.log(value)
  

• 여러 줄의 삼항 연산자 를 사용할 경우 ?와 :를 각각의 행으로 처리해야합니다.

  eslint: operator-linebreak

  // ✓ 좋아요
  var location = env.development ? 'localhost' : 'www.api.com'
  
  // ✓ 좋아요
  var location = env.development
    ? 'localhost'
    : 'www.api.com'
  
  // ✗ 피하세요
  var location = env.development ?
    'localhost' :
    'www.api.com'
  

• var 선언의 경우 각각 자체적으로 선언해야 합니다.

  eslint: one-var

  // ✓ 좋아요
  var silent = true
  var verbose = true
  
  // ✗ 피하세요
  var silent = true, verbose = true
  
  // ✗ 피하세요
  var silent = true,
      verbose = true
  

• 조건부 할당을 추가적으로 괄호로 묶습니다. 이것은 표현식이 등호 (===)에 대한 오타보다는 의도적으로 할당 (=)이라는 것을 분명히해야 합니다.

  eslint: no-cond-assign

  // ✓ 좋아요
  while ((m = text.match(expr))) {
    // ...
  }
  
  // ✗ 피하세요
  while (m = text.match(expr)) {
    // ...
  }
  

• 한 줄에 중괄호로 처리할 경우 공백을 추가합니다.

  eslint: block-spacing

    function foo () {return true}    // ✗ 피하세요
    function foo () { return true }  // ✓ 좋아요
  

• 변수나 함수이름 사용시 카멜케이스(camelcase)를 사용합니다.

  eslint: camelcase

    function my_function () { }    // ✗ 피하세요
    function myFunction () { }     // ✓ 좋아요
  
    var my_var = 'hello'           // ✗ 피하세요
    var myVar = 'hello'            // ✓ 좋아요
  

• 뒤쪽에 쉼표는 허용하지 않습니다.

  eslint: comma-dangle

    var obj = {
      message: 'hello',   // ✗ 피하세요
    }
  

• 쉼표를 사용할 경우 현재 행 끝에 있어야 합니다.

  eslint: comma-style

    var obj = {
      foo: 'foo'
      ,bar: 'bar'   // ✗ 피하세요
    }
  
    var obj = {
      foo: 'foo',
      bar: 'bar'   // ✓ 좋아요
    }
  

• 점(Dot)은 각 속성과 같은 줄에 있어야 합니다.

  eslint: dot-location

    console.
      log('hello')  // ✗ 피하세요
  
    console
      .log('hello') // ✓ 좋아요
  

• 파일은 개행으로 끝나야합니다.

  eslint: eol-last

• 함수식별자와 호출사이에는 공백이 없어야 합니다.

  eslint: func-call-spacing

  console.log ('hello') // ✗ 피하세요
  console.log('hello')  // ✓ 좋아요
  

• 콜론과 키 값 쌍의 값 사이에 공백을 추가해야 합니다.

  eslint: key-spacing

  var obj = { 'key' : 'value' }    // ✗ 피하세요
  var obj = { 'key' :'value' }     // ✗ 피하세요
  var obj = { 'key':'value' }      // ✗ 피하세요
  var obj = { 'key': 'value' }     // ✓ 좋아요
  

• 생성자 이름은 대문자로 시작해야합니다.

  eslint: new-cap

  function animal () {}
  var dog = new animal()    // ✗ 피하세요
  
  function Animal () {}
  var dog = new Animal()    // ✓ 좋아요
  

• 인수가 없는 생성자는 괄호로 호출해야합니다.

  eslint: new-parens

  function Animal () {}
  var dog = new Animal    // ✗ 피하세요
  var dog = new Animal()  // ✓ 좋아요
  

• setter가 정의되면 객체에 getter가 포함되어 있어야 합니다.

  eslint: accessor-pairs

  var person = {
    set name (value) {    // ✗ 피하세요
      this._name = value
    }
  }
  
  var person = {
    set name (value) {
      this._name = value
    },
    get name () {         // ✓ 좋아요
      return this._name
    }
  }
  

• 파생 클래스의 생성자는 super를 호출해야합니다.

  eslint: constructor-super

  class Dog {
    constructor () {
      super()   // ✗ 피하세요
    }
  }
  
  class Dog extends Mammal {
    constructor () {
      super()   // ✓ 좋아요
    }
  }
  

• 배열 생성자 대신에 배열 리터럴을 사용하십시오.

  eslint: no-array-constructor

  var nums = new Array(1, 2, 3)   // ✗ 피하세요
  var nums = [1, 2, 3]            // ✓ 좋아요
  

• arguments.callee과 arguments.caller를 사용하지 마십시오.

  eslint: no-caller

  function foo (n) {
    if (n <= 0) return
  
    arguments.callee(n - 1)   // ✗ 피하세요
  }
  
  function foo (n) {
    if (n <= 0) return
  
    foo(n - 1)                // ✓ 좋아요
  }
  

• 클래스로 선언된 변수를 수정하지 마세요

  eslint: no-class-assign

  class Dog {}
  Dog = 'Fido'    // ✗ 피하세요
  

• const를 사용하여 선언 된 변수는 수정하지 마십시오.

  eslint: no-const-assign

  const score = 100
  score = 125       // ✗ 피하세요
  

• 조건(반복 제외)에서 상수 표현식을 사용하지 마십시오.

  eslint: no-constant-condition

  if (false) {    // ✗ 피하세요
    // ...
  }
  
  if (x === 0) {  // ✓ 좋아요
    // ...
  }
  
  while (true) {  // ✓ 좋아요
    // ...
  }
  

• 정규식에는 제어 문자가 없습니다.

  eslint: no-control-regex

  var pattern = /\x1f/    // ✗ 피하세요
  var pattern = /\x20/    // ✓ 좋아요
  

• debugger문은 없습니다.

  eslint: no-debugger

  function sum (a, b) {
    debugger      // ✗ 피하세요
    return a + b
  }
  

• 변수에 delete 연산자는 없습니다.

  eslint: no-delete-var

  var name
  delete name     // ✗ 피하세요
  

• 함수 정의시 중복된 인수를 사용할 수 없습니다.

  eslint: no-dupe-args

  function sum (a, b, a) {  // ✗ 피하세요
    // ...
  }
  
  function sum (a, b, c) {  // ✓ 좋아요
    // ...
  }
  

• 클래스 멤버에 중복된 이름을 사용할 수 없습니다.

  eslint: no-dupe-class-members

  class Dog {
    bark () {}
    bark () {}    // ✗ 피하세요
  }
  

• 객체 리터럴에서 중복된 키 값을 사용할 수 없습니다.

  eslint: no-dupe-keys

  var user = {
    name: 'Jane Doe',
    name: 'John Doe'    // ✗ 피하세요
  }
  

• switch문에서 중복된 case 라벨을 사용할 수 없습니다.

  eslint: no-duplicate-case

  switch (id) {
    case 1:
      // ...
    case 1:     // ✗ 피하세요
  }
  

• 모듈 당 하나의 import 문을 사용해야 합니다.

  eslint: no-duplicate-imports

  import { myFunc1 } from 'module'
  import { myFunc2 } from 'module'          // ✗ 피하세요
  
  import { myFunc1, myFunc2 } from 'module' // ✓ 좋아요
  

• 정규식에서 빈 문자 클래스가 없어야 합니다.

  eslint: no-empty-character-class

  const myRegex = /^abc[]/      // ✗ 피하세요
  const myRegex = /^abc[a-z]/   // ✓ 좋아요
  

• 비어있는 구조의 패턴이 없어야 합니다.

  eslint: no-empty-pattern

  const { a: {} } = foo         // ✗ 피하세요
  const { a: { b } } = foo      // ✓ 좋아요
  

• eval()을 사용하지 않습니다.

  eslint: no-eval

  eval( "var result = user." + propName ) // ✗ 피하세요
  var result = user[propName]             // ✓ 좋아요
  

• catch절의 예외를 재할당하면 안됩니다.

  eslint: no-ex-assign

  try {
    // ...
  } catch (e) {
    e = 'new value'             // ✗ 피하세요
  }
  
  try {
    // ...
  } catch (e) {
    const newVal = 'new value'  // ✓ 좋아요
  }
  

• 네이티브 객체를 확장하지 않습니다.

  eslint: no-extend-native

  Object.prototype.age = 21     // ✗ 피하세요
  

• 불필요한 함수 바인딩을 피해야 합니다.

  eslint: no-extra-bind

  const name = function () {
    getName()
  }.bind(user)    // ✗ 피하세요
  
  const name = function () {
    this.getName()
  }.bind(user)    // ✓ 좋아요
  

• 불필요한 boolean 캐스트를 피해야 합니다.

  eslint: no-extra-boolean-cast

  const result = true
  if (!!result) {   // ✗ 피하세요
    // ...
  }
  
  const result = true
  if (result) {     // ✓ 좋아요
    // ...
  }
  

• 함수 표현식에는 불필요한 괄호가 없어야 합니다.

  eslint: no-extra-parens

  const myFunc = (function () { })   // ✗ 피하세요
  const myFunc = function () { }     // ✓ 좋아요
  

• 'switch'경우에 완료되지 못하는 것을 막기 위해 'break'를 사용하십시오.

  eslint: no-fallthrough

  switch (filter) {
    case 1:
      doSomething()    // ✗ 피하세요
    case 2:
      doSomethingElse()
  }
  
  switch (filter) {
    case 1:
      doSomething()
      break           // ✓ 좋아요
    case 2:
      doSomethingElse()
  }
  
  switch (filter) {
    case 1:
      doSomething()
      // fallthrough  // ✓ 좋아요
    case 2:
      doSomethingElse()
  }
  

• 부동 소숫점이 없어야 합니다.

  eslint: no-floating-decimal

  const discount = .5      // ✗ 피하세요
  const discount = 0.5     // ✓ 좋아요
  

• 함수 선언을 재지정하지 말아야 합니다.

  eslint: no-func-assign

  function myFunc () { }
  myFunc = myOtherFunc    // ✗ 피하세요
  

• 읽기전용 전역 변수를 재정의하지 말아야합니다.

  eslint: no-global-assign

  window = {}     // ✗ 피하세요
  

• eval()이 포함되지 않도록 합니다.

  eslint: no-implied-eval

  setTimeout("alert('Hello world')")                   // ✗ 피하세요
  setTimeout(function () { alert('Hello world') })     // ✓ 좋아요
  

• 중괄호 안에서 함수가 선언되지 말아야 합니다.

  eslint: no-inner-declarations

  if (authenticated) {
    function setAuthUser () {}    // ✗ 피하세요
  }
  

• RegExp 생성자에 잘못된 정규 표현식 문자열이 없어야 합니다.

  eslint: no-invalid-regexp

  RegExp('[a-z')    // ✗ 피하세요
  RegExp('[a-z]')   // ✓ 좋아요
  

• 불규칙한 공백이 없어야 합니다.

  eslint: no-irregular-whitespace

  function myFunc () /*<NBSP>*/{}   // ✗ 피하세요
  

• __iterator__를 사용하지 않아야 합니다.

  eslint: no-iterator

  Foo.prototype.__iterator__ = function () {}   // ✗ 피하세요
  

• 범위 변수와 이름을 공유하는 라벨이 없어야 합니다.

  eslint: no-label-var

  var score = 100
  function game () {
    score: while (true) {      // ✗ 피하세요
      score -= 10
      if (score > 0) continue score
      break
    }
  }
  

• 라벨문을 사용하지 말아야 합니다.

  eslint: no-labels

  label:
    while (true) {
      break label     // ✗ 피하세요
    }
  

• 불필요하게 중첩된 블록이 없어야 합니다.

  eslint: no-lone-blocks

  function myFunc () {
    {                   // ✗ 피하세요
      myOtherFunc()
    }
  }
  
  function myFunc () {
    myOtherFunc()       // ✓ 좋아요
  }
  

• 공백과 탭을 섞어서 사용하지 말아야 합니다.

  eslint: no-mixed-spaces-and-tabs

• 들여 쓰기를 제외하고는 여러 공백을 사용하지 말아야 합니다.

  eslint: no-multi-spaces

  const id =    1234    // ✗ 피하세요
  const id = 1234       // ✓ 좋아요
  

• 멀티라인 문자열을 사용하지 말아야 합니다.

  eslint: no-multi-str

  const message = 'Hello \
                   world'     // ✗ 피하세요
  

• 변수에 객체를 대입하지 않고 new를 사용하면 안됩니다.

  eslint: no-new

  new Character()                     // ✗ 피하세요
  const character = new Character()   // ✓ 좋아요
  

• Function 생성자를 사용하지 않아야 합니다.

  eslint: no-new-func

  var sum = new Function('a', 'b', 'return a + b')    // ✗ 피하세요
  

• Object 생성자를 사용하지 않아야 합니다.

  eslint: no-new-object

  let config = new Object()   // ✗ 피하세요
  

• new require를 사용하지 않아야 합니다.

  eslint: no-new-require

  const myModule = new require('my-module')    // ✗ 피하세요
  

• Symbol 생성자를 사용하지 않아야 합니다.

  eslint: no-new-symbol

  const foo = new Symbol('foo')   // ✗ 피하세요
  

• 원시 래퍼 인스턴스를 사용하지 않아야 합니다.

  eslint: no-new-wrappers

  const message = new String('hello')   // ✗ 피하세요
  

• 전역 개체 속성을 함수로 호출하지 않아야 합니다.

  eslint: no-obj-calls

  const math = Math()   // ✗ 피하세요
  

• 8진수를 사용하지 않습니다.

  eslint: no-octal

  const num = 042     // ✗ 피하세요
  const num = 34   // ✓ 좋아요
  

• 문자열 리터럴에는 8 진수 이스케이프 시퀀스가 없습니다.

  eslint: no-octal-escape

  const copyright = 'Copyright \251'  // ✗ 피하세요
  

• __dirname과 __filename을 사용할 때 문자열 연결을 피해야 합니다.

  eslint: no-path-concat

  const pathToFile = __dirname + '/app.js'            // ✗ 피하세요
  const pathToFile = path.join(__dirname, 'app.js')   // ✓ 좋아요
  

• __proto__ 사용은 피해야 합니다. 대신에 getPrototypeOf를 사용할 수 있습니다.

  eslint: no-proto

  const foo = obj.__proto__               // ✗ 피하세요
  const foo = Object.getPrototypeOf(obj)  // ✓ 좋아요
  

• 변수를 새로 재정의하지 말아야 합니다.

  eslint: no-redeclare

  let name = 'John'
  let name = 'Jane'     // ✗ 피하세요
  
  let name = 'John'
  name = 'Jane'         // ✓ 좋아요
  

• 정규 표현식 리터럴에서는 공백을 피해야 합니다.

  eslint: no-regex-spaces

  const regexp = /test   value/   // ✗ 피하세요
  
  const regexp = /test {3}value/  // ✓ 좋아요
  const regexp = /test value/     // ✓ 좋아요
  

• 반환 내용에 대한 대입 값은 괄호로 묶어야 합니다.

  eslint: no-return-assign

  function sum (a, b) {
    return result = a + b     // ✗ 피하세요
  }
  
  function sum (a, b) {
    return (result = a + b)   // ✓ 좋아요
  }
  

• 변수 자체에 자기 자신은 할당하지 않아야 합니다.

  eslint: no-self-assign

  name = name   // ✗ 피하세요
  

• 변수를 자기 자신과 비교하지 말아야 합니다.

  eslint: no-self-compare

  if (score === score) {}   // ✗ 피하세요
  

• 쉼표 연산자를 사용하지 말아야 합니다.

  eslint: no-sequences

  if (doSomething(), !!test) {}   // ✗ 피하세요
  

• 제한된 이름을 음영 처리해서는 안됩니다.

  eslint: no-shadow-restricted-names

  let undefined = 'value'     // ✗ 피하세요
  

• 빈공간 배열은 허용되지 않습니다.

  eslint: no-sparse-arrays

  let fruits = ['apple',, 'orange']       // ✗ 피하세요
  

• 탭을 사용해서는 안됩니다.

  eslint: no-tabs

• 일반 문자열에는 템플릿 리터럴 자리 표시자가 없어야 합니다.

  eslint: no-template-curly-in-string

  const message = 'Hello ${name}'   // ✗ 피하세요
  const message = `Hello ${name}`   // ✓ 좋아요
  

• this를 사용하기 전에 super()를 호출해야 합니다.

  eslint: no-this-before-super

  class Dog extends Animal {
    constructor () {
      this.legs = 4     // ✗ 피하세요
      super()
    }
  }
  

• 반드시 throw는 Error 객체여야 합니다.

  eslint: no-throw-literal

  throw 'error'               // ✗ 피하세요
  throw new Error('error')    // ✓ 좋아요
  

• 줄 끝에서 공백을 사용할 수 없습니다.

  eslint: no-trailing-spaces

• 'undefined'로 초기화하는 것은 허용되지 않습니다.

  eslint: no-undef-init

  let name = undefined    // ✗ 피하세요
  
  let name
  name = 'value'          // ✓ 좋아요
  

• 반복문에서 수정될 수 없는 조건이 없어야 합니다.

  eslint: no-unmodified-loop-condition

  for (let i = 0; i < items.length; j++) {...}    // ✗ 피하세요
  for (let i = 0; i < items.length; i++) {...}    // ✓ 좋아요
  

• 더 간단한 대안이 있을 때 삼항연산자를 사용하지 않습니다.

  eslint: no-unneeded-ternary

  let score = val ? val : 0     // ✗ 피하세요
  let score = val || 0          // ✓ 좋아요
  

• return,throw,continue,break 문 다음에 도달 할 수없는 코드는 없습니다.

  eslint: no-unreachable

  function doSomething () {
    return true
    console.log('never called')     // ✗ 피하세요
  }
  

• finally 블록에 흐름을 제어할 수 있는 명령문이 없어야 합니다.

  eslint: no-unsafe-finally

  try {
    // ...
  } catch (e) {
    // ...
  } finally {
    return 42     // ✗ 피하세요
  }
  

• 관계 연산자의 왼쪽 피연산자를 부정해서는 안됩니다.

  eslint: no-unsafe-negation

  if (!key in obj) {}       // ✗ 피하세요
  if (!(key in obj)) {}       // ✓ 좋아요
  

• .call ()과.apply ()를 불필요하게 사용하지 말아야 합니다.

  eslint: no-useless-call

  sum.call(null, 1, 2, 3)   // ✗ 피하세요
  

• 객체에서 불필요하게 계산 된 속성 키를 사용하지 말아야 합니다.

  eslint: no-useless-computed-key

  const user = { ['name']: 'John Doe' }   // ✗ 피하세요
  const user = { name: 'John Doe' }       // ✓ 좋아요
  

• 불필요한 생성자가 없어야 합니다

  eslint: no-useless-constructor

  class Car {
    constructor () {      // ✗ 피하세요
    }
  }
  

• 불필요한 이스케이프가 없어야 합니다.

  eslint: no-useless-escape

  let message = 'Hell\o'  // ✗ 피하세요
  

• import, export 및 소멸된 할당의 이름을 동일한 이름으로 바꾸는 것은 허용되지 않습니다.

  eslint: no-useless-rename

  import { config as config } from './config'     // ✗ 피하세요
  import { config } from './config'               // ✓ 좋아요
  

• 속성 앞에 공백이 없어야 합니다.

  eslint: no-whitespace-before-property

  user .name      // ✗ 피하세요
  user.name       // ✓ 좋아요
  

• with문을 사용하지 않습니다.**

  eslint: no-with

  with (val) {...}    // ✗ 피하세요
  

• 객체 속성 간의 일관성을 유지합니다.

  eslint: object-property-newline

  const user = {
    name: 'Jane Doe', age: 30,
    username: 'jdoe86'            // ✗ 피하세요
  }
  
  const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }    // ✓ 좋아요
  
  const user = {
    name: 'Jane Doe',
    age: 30,
    username: 'jdoe86'
  }                                                                 // ✓ 좋아요
  

• 블록 안에 패딩이 없어야 합니다.

  eslint: padded-blocks

  if (user) {
                              // ✗ 피하세요
    const name = getName()
  
  }
  
  if (user) {
    const name = getName()    // ✓ 좋아요
  }
  

• 스프레드 연산자와 표현식 사이에 공백이 없어야 합니다.

  eslint: rest-spread-spacing

  fn(... args)    // ✗ 피하세요
  fn(...args)     // ✓ 좋아요
  

• 세미콜론은 뒤쪽에 공백을 두고 앞쪽에는 공백을 두지 않아야 합니다.

  eslint: semi-spacing

  for (let i = 0 ;i < items.length ;i++) {...}    // ✗ 피하세요
  for (let i = 0; i < items.length; i++) {...}    // ✓ 좋아요
  

• 블록 앞에 공간이 있어야 합니다.

  eslint: space-before-blocks

  if (admin){...}     // ✗ 피하세요
  if (admin) {...}    // ✓ 좋아요
  

• 괄호 안에 공백이 없어야 합니다.

  eslint: space-in-parens

  getName( name )     // ✗ 피하세요
  getName(name)       // ✓ 좋아요
  

• 단항 연산자 뒤에 공백이 있어야 합니다.

  eslint: space-unary-ops

  typeof!admin        // ✗ 피하세요
  typeof !admin        // ✓ 좋아요
  

• 주석 안에는 공백을 사용해야 합니다.

  eslint: spaced-comment

  //comment           // ✗ 피하세요
  // comment          // ✓ 좋아요
  
  /*comment*/         // ✗ 피하세요
  /* comment */       // ✓ 좋아요
  

• 템플릿 문자열에는 간격이 없습니다.

  eslint: template-curly-spacing

  const message = `Hello, ${ name }`    // ✗ 피하세요
  const message = `Hello, ${name}`      // ✓ 좋아요
  

• NaN을 검사 할 때 isNaN()을 사용하십시오.

  eslint: use-isnan

  if (price === NaN) { }      // ✗ 피하세요
  if (isNaN(price)) { }       // ✓ 좋아요
  

• typeof는 유효한 문자열과 비교되어야 합니다.

  eslint: valid-typeof

  typeof name === 'undefimed'     // ✗ 피하세요
  typeof name === 'undefined'     // ✓ 좋아요
  

• 즉시 호출 된 함수 식(IIFE)은 줄 바꿈되어야 합니다.

  eslint: wrap-iife

  const getName = function () { }()     // ✗ 피하세요
  
  const getName = (function () { }())   // ✓ 좋아요
  const getName = (function () { })()   // ✓ 좋아요
  

• yield *표현식의 *은 앞뒤에 공백이 있어야 합니다.

  eslint: yield-star-spacing

  yield* increment()    // ✗ 피하세요
  yield * increment()   // ✓ 좋아요
  

• Yoda 조건을 피하십시오.

  eslint: yoda

  if (42 === age) { }    // ✗ 피하세요
  if (age === 42) { }    // ✓ 좋아요
  

세미콜론

• 세미콜론은 사용하지 않습니다.. (볼거리: 1, 2, 3)

  eslint: semi

  window.alert('hi')   // ✓ 좋아요
  window.alert('hi');  // ✗ 피하세요
  

• (, [, or `를 사용하여 라인을 시작하지 마십시오. 이것은 세미콜론을 생략한 유일한 시도이며 standard는 이 잠재적인 문제로부터 여러분을 보호합니다.

  eslint: no-unexpected-multiline

  // ✓ 좋아요
  ;(function () {
    window.alert('ok')
  }())
  
  // ✗ 피하세요
  (function () {
    window.alert('ok')
  }())
  

  // ✓ 좋아요
  ;[1, 2, 3].forEach(bar)
  
  // ✗ 피하세요
  [1, 2, 3].forEach(bar)
  

  // ✓ 좋아요
  ;`hello`.indexOf('o')
  
  // ✗ 피하세요
  `hello`.indexOf('o')
  

  참고: 만약 종종 이런 식으로 코드를 작성한다면, 영리해 지려고 노력할지도 모릅니다.

  영리한 비글들은 가능할 때마다 명확하고 읽기 쉬운 표현들을 선호한다.

  다음과 같은 이점이 있습니다.

  ;[1, 2, 3].forEach(bar)
  

  이는 강력하게 선호합니다.

  var nums = [1, 2, 3]
  nums.forEach(bar)
  

도움될만한 읽을거리

• An Open Letter to JavaScript Leaders Regarding Semicolons
• JavaScript Semicolon Insertion – Everything you need to know

도움될만한 영상

• Are Semicolons Necessary in JavaScript? - YouTube

현재 사용되는 모든 인기 code minifiers는 AST 기반 축소를 사용하므로 아무런 문제없이 세미콜론이없는 JavaScript를 처리 할 수 있습니다. (JavaScript에서는 세미콜론이 필요하지 않기 때문에)

Excerpt from "An Open Letter to JavaScript Leaders Regarding Semicolons":

[자동 세미콜론 삽입에 의존]은 매우 안전하며 모든 브라우저가 이해할 수있는 완벽하게 유효한 JS입니다. Closure 컴파일러, yuicompressor, packer 및 jsmin은 모두이를 적절히 축소 할 수 있습니다. 어디서나 성능에 영향을 미치지 않습니다.

당신을 교육하는 대신,이 언어 공동체의 지도자들이 거짓말과 두려움을 주셨다는 것을 유감스럽게 생각합니다. 부끄러운 일 이었어. JS에서의 진술이 어떻게 실제로 종료되었는지 (어떤 경우에는 종료되지 않았는지) 배우는 것이 좋습니다. 그래서 당신이 아름답게 찾은 코드를 작성할 수 있습니다.

일반적으로 \n은 다음과 같은 경우를 제외하고는 명령문을 끝냅니다 : 1. 명령문은 닫히지 않은 괄호, 배열 리터럴 또는 객체 리터럴을 가지거나 명령문을 종료하는 유효한 방법이 아닌 다른 방법으로 끝납니다. (예 :. 또는,로 끝남) 2. 선은 -- 또는 ++입니다 (이 경우 다음 토큰을 감소/증가시킵니다). 3. { 가 없는 경우 중에서 for(), while(), do, if(), else 입니다. 4. 다음 줄은 [, (, +, *, /, -, ,, ., 또는 단일 표현식에서 두 개의 토큰 사이에서만 발견 될 수있는 다른 이항 연산자로 시작합니다.

첫 번째는 꽤 분명합니다. JSLint조차 JSON과 괄호로 묶인 구조체의 \n 문자와 ,로 끝나는 여러 줄에 걸쳐있는 var 문과도 괜찮습니다.

두 번째는 아주 이상합니다. 나는 당신이 'i\n++\nj라고 쓰고 싶지만, (이런 종류의 대화 밖에서) 파싱 된 사실을 본 적이 없습니다. i; ++j가 아니라 i++;j`입니다.

세 번째는 일반적으로 멸시받는 경우 잘 이해됩니다. if (x)\ny()는 if (x) { y() }와 같습니다. 구문은 블록이나 명령문에 도달 할 때까지 끝나지 않습니다.

if(x);는 if (x) {} 또는 "If x, nothing do nothing"과 동일합니다. 이것은 일반적으로 루프 체크가 수행되는 루프에 적용됩니다 또한 업데이트 기능입니다. 비정상적이지만 전례가 아닙니다.

네 번째는 일반적으로 "오, 설마, 당신은 세미콜론이 필요합니다!"라는 사례가 있습니다. 하지만, 이전 라인의 연속이 아니더라도 세미콜론으로 접두어를 붙이는 것은 쉽습니다. 예를 들어, 다음코드로 대신할 수 있습니다.

foo();
[1,2,3].forEach(bar);

다음과 같이 할 수 있습니다.

foo()
;[1,2,3].forEach(bar)

장점은 ( 또는 [ 없이 세미콜론으로 시작하는 줄을 보지 못한다면 익숙해지기 쉽습니다.