ESLint 규칙

규칙

• 들여쓰기시 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 = 2var message = 'hello, ' + name + '!'

  // ✗ 피하세요var x=2var 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 = truevar 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 = 100score = 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 namedelete 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 = trueif (!!result) { // ✗ 피하세요 // ...} const result = trueif (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 = 100function 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 namename = '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)

  ESLint 조금 더 잘 활용하기

  들어가며 안녕하세요. 카카오 FE플랫폼팀의 Joah입니다. 최근에 팀에서 사용하는 JavaScript 스타일 가이드를 개선하는 업무에 참여했습니다. 업무를 하며 스타일 가이드에서 사용하고 있는 ESLint에 관심이 생기게 되었고, 어떻게 동작하는지 소스코드를 분석해보다가 ESLint에 직접 컨트리뷰션 하는 경험도 하게 되었습니다. 이 과정들에서 알게 된 ESLint를 조금 더 잘 활용할 수 있는 방법에 대해 정리해 보았는데요.

  https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

  

도움될만한 읽을거리

• An Open Letter to JavaScript Leaders Regarding Semicolons

• JavaScript Semicolon Insertion – Everything you need to know

• https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

도움될만한 영상

• 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은 다음과 같은 경우를 제외하고는 명령문을 끝냅니다 :명령문은 닫히지 않은 괄호, 배열 리터럴 또는 객체 리터럴을 가지거나 명령문을 종료하는 유효한 방법이 아닌 다른 방법으로 끝납니다. (예 :. 또는,로 끝남)선은 -- 또는 ++입니다 (이 경우 다음 토큰을 감소/증가시킵니다).{ 가 없는 경우 중에서 for(), while(), do, if(), else 입니다.다음 줄은 [, (, +, *, /, -, ,, ., 또는 단일 표현식에서 두 개의 토큰 사이에서만 발견 될 수있는 다른 이항 연산자로 시작합니다.첫 번째는 꽤 분명합니다. 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)장점은 ( 또는 [ 없이 세미콜론으로 시작하는 줄을 보지 못한다면 익숙해지기 쉽습니다.

Uploaded by N2T