Skip to content

Latest commit

 

History

History
1404 lines (987 loc) · 36.8 KB

RULES-kokr.md

File metadata and controls

1404 lines (987 loc) · 36.8 KB
Raw

JavaScript Standard Style

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

js-standard-style

이것은 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'


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)

도움될만한 읽을거리

도움될만한 영상

현재 사용되는 모든 인기 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)

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