ESLint Rules는 JavaScript의 역사와 지식이 담겨있습니다. 그래서 ESLint Rules를 공부하는 것만으로도 자바스크립트를 깊이 이해할 수 있습니다.
아래 코드는 어디까지나 대표적인 예시입니다. 각각의 규칙은 옵션에 따라 규칙을 변경할 수 있어서 최적의 코드는 아닐 수 있습니다.
하지만, 아래 소개할 글은 (비록 길지만) 정독해두면 코딩할 때 많은 도움이 될 거라 생각합니다.
for-direction
for문 긍정적인 방향으로 작성하는 것을 강제합니다.
// NG
for (var i = 0; i < 10; i--) {
console.log(i)
}
// OK
for (var i = 0; i < 10; i++) {
console.log(i)
}
getter-return
get 구문에서 return을 무조건 작성해야 합니다.
// NG
var hoge = {
get name () {
console.log('hoge')
}
}
// OK
var hoge = {
get name () {
return 'hoge'
}
}
no-await-in-loop
await를 반복문에서 사용하는 것을 금지합니다.
// NG
async function ngHoge () {
let dataList = []
let data
for (let i = 0; i < 10; i++) {
data = await doSomething(i)
dataList.push(data)
}
return dataList
}
// OK
async function okHoge () {
let dataList = []
for (let i = 0; i < 10; i++) {
dataList.push(doSomething)
}
return await Promise.all(dataList)
}
no-compare-neg-zero
-0과 비교하는 것을 금지합니다.
// NG
var i = 0
if (i === -0) {
console.log(i)
}
no-cond-assign
조건식에서 대입하는 것을 금지합니다.
// NG
const obj = {}
if (obj.hoge = true) {
console.log(i)
}
no-console
console 사용하는 것을 금지합니다.
console은 production 환경을 푸시하기 전에 제거되어야 합니다.
// NG
console.log('log')
console.warn('warn')
console.error('error')
no-constant-condition
조건식 상수(예를 들어 리터럴)를 삽입하는 것을 금지합니다.
// NG
if (false) {
doSomethingForDevelopment()
}
// OK
if (env === 'development') {
doSomethingForDevelopment()
}
no-control-regex
정규표현식에서 제어 문자 지정하는 것을 금지합니다.
정규표현식에서 제어 문자 사용하는 것은 드물며 대부분의 경우 오타입니다.
// NG
var pattern1 = /Hello¥x0aWorld/
var pattern2 = new RegExp("Hello¥x0aWorld")
// OK
var pattern1 = /Hello¥sWorld/
var pattern2 = new RegExp("Hello¥sWorld")
no-debugger
debugger 문장 사용을 금지합니다.
debugger 디버그를 위해 사용하는 코드에 포함되면 안 됩니다.
// NG
function hoge () {
debugger
console.log('hoge')
}
no-dupe-args
함수 정의 시에 중복 인수를 금지합니다.
// NG
function example (hoge, fuga, hoge) {
console.log(hoge)
}
no-dupe-keys
객체 정의 시 중복된 키 이름을 금지합니다.
// NG
const obj = {
key1: 'key1',
key1: 'key2'
}
no-duplicate-case
switch 문에 중복된 케이스 라벨을 금지합니다.
// NG
switch (hoge) {
case 1:
console.log('This is case 1')
break
case 2:
console.log('This is case 2')
break
case 1:
console.log('This is case 3')
break
}
no-empty
빈 블록을 금지합니다.
기술적으로 잘못된 것은 아니지만, 코드를 읽을 때 헷갈릴 수 있습니다.
// NG
function example (x) {
if (x) {
}
switch (x) {
}
}
no-empty-character-class
정규표현식에서 빈 character classes[]를 사용하는 것을 금지합니다.
빈 []은 무엇과도 일치하지 않으므로 오타입니다.
// NG
var hoge = /abc[]/
// OK
var fuga = /abc[a-z]/
no-ex-assign
cache절에서 예외 개체에 대한 재할당을 금지합니다.
예외 개체에 대한 대체 연결 수단은 존재하지 않아 대입할 경우 무조건 에러입니다.
// NG
try {
} catch (e) {
e = new Error()
}
no-extra-boolean-cast
불필요한 Boolean 형태로 변환하는 것을 금지합니다.
if문 등의 조건식에는 식의 결과가 무조건 Boolean입니다.
var example = 10
// NG
if (Boolean(example)) {
}
if (!!example) {
}
// OK
if (example) {
}
if (!example) {
}
no-extra-parens
불필요한 괄호를 금지합니다.
// NG
var total = (10 * 20) - 30
no-extra-semi
불필요한 세미콜론을 금지합니다.
불필요한 세미콜론은 기술적인 오류는 아니지만, 코드를 읽을 때 헷갈립니다.
// NG
var example = 5;;
function example () {
console.log('sample')
};
no-func-assign
함수에 다시 대입하는 것을 금지합니다.
// NG
function example () {
console.log('before')
}
example = true
no-inner-declarations
블록 내에서 함수 선언을 금지합니다. 그러나 블록 내에서의 함수식은 허용됩니다.
// NG
if (true) {
function example () {
console.log('example')
}
}
// OK
if (true) {
var example = function () {
console.log('example')
}
}
no-invalid-regexp
RegExp 생성자에서 잘못된 정규식을 지정하는 것을 금지합니다.
정규식 리터럴을 사용했을 때 코드를 파싱하면 SyntaxError가 발생하지만, RegExp 개체의 경우 코드가 실행되었을 때 SyntaxError가 발생하기 때문입니다.
// NG
var regexp = new RegExp('[')
no-irregular-whitespace
잘못된 공백을 금지합니다.
무효 또는 불규칙한 공백은 ECMAScript5 파서에서 문제를 일으키는 코드의 디버깅을 어렵게 합니다.
// NG
function thing() {
return 'test'; /*<ENSP>*/
}
function thing() {
return `template <NBSP>string`;
}
no-obj-calls
글로버 객체를 함수로 호출하는 것을 금지합니다.
EcmaScript는 대문자 전역 개체를 제공하지만, 그 함수들은 실행하면 오류가 발생합니다.
// NG
Math()
var json = JSON()
var reflect = Reflect()
no-prototype-builtins
Object.create에서 생성한 객체에 대해 Object.prototypes의 메소드(함수) 직접 호출을 금지합니다.
var parent = function () {
return this
}
parent.prototype.hoge = function () {
console.log('hoge')
}
var child = Object.create(parent)
// NG
var hasHoge = child.hasOwnProperty('hoge')
// OK
var hasHoge = Object.hasOwnProperty.call(child, 'hoge')
no-regex-spaces
정규표현식에서 여러 공백을 금지합니다.
정규표현식은 실수를 없애기 위해 가능한 한 단순하게 유지해야 합니다.
// NG
var regex = /Hell World/
var regex = new RegExp("Hello World")
// OK
var regex = /Hell {3}World/
var regex = new RegExp("Hello {3}World")
no-sparse-arrays
빈 배열을 만드는데 스퍼스(Spurs) 배열 사용하는 것을 금지합니다.
스퍼스 배열 구현 의도를 이해하기 어렵고 혼란스럽습니다.
// NG
var array1 = [,,]
var array2 = ['red',,'blue']
// OK
var array1 = new Array(3)
var array2 = ['red', 'blue', ] // 마지막 쉼표는 OK
no-template-curly-in-string
일반적으로 문자열에서 템플릿 문자열의 자리 표시자 사용을 금지합니다.
템플릿 문자열을 잘못된 일반 문자열로 사용하는 것을 방지합니다.
// NG
var str1 = "Hello ${wld}"
var str2 = 'Hello ${wld}'
no-unexpected-multiline
혼란스러운 여러 줄(개행)은 금지합니다.
개행은 몇 가지 규칙을 제외하고 자동 세미콜론 삽입하여 끝냅니다.
// NG
var foo = bar
(1 || 2).baz();
(개행)
(개행)
// OK
var foo = bar;
(1 || 2).baz();
no-unreachable
return, throw, continue, break 문에 닿지 못하는 코드를 금지합니다.
// NG
function hoge () {
return 'hoge'
console.log('hoge')
}
no-unsafe-finally
return, throw, continue, break 문을 finally 블록으로 정의하는 것을 금지합니다.
이건 try~catch 구문에 의해 예기치 않은 동작을 방지할 수 있습니다.
// NG
try {
return 1
} catch (e) {
return 2
} finally {
return 3
}
no-unsafe-negation
관계 연산자에서 왼쪽 피연산자로 부정하는 것을 금지합니다.
개발자 의도완 다르게 작동할 가능성이 있기 때문입니다.
// NG
if (!hoge in obj) {
}
if (!hoge instanceof Object) {
}
// OK
if (!(hoge in obj)) {
}
if (!(hoge instanceof Object)) {
}
use-isnan
NaN을 판정할 때에는 isNaN()을 사용해야 합니다.
NaN으로 비교했을 경우 결과가 혼란스럽기 때문입니다.
// NG
if (hoge === NaN) {
}
// OK
if (isNaN(hoge)) {
}
valid-jsdoc
JSDoc 주석은 무조건 추가해야 합니다.
// NG
/**
* Add two numbers.
* @param {number} num The first number.
* @returns The sum of the two numbers.
*/
function add(num1, num2) {
return num1 + num2;
}
// OK
/**
* Add two numbers.
* @param {number} num1 The first number.
* @param {number} num2 The second number.
* @returns {number} The sum of the two numbers.
*/
function add(num1, num2) {
return num1 + num2;
}
valid-typeof
typeof로 비교할 때 문자열이 유효한지 확인해야 합니다.
// NG
if (typeof hoge === 'undefiend') {
}
if (typeof hoge === 'stirng') {
}
// OK
if (typeof hoge === 'undefined') {
}
if (typeof hoge === 'object') {
}
다음 편으로 이어집니다. [ESLint es6] JavaScript 이해하기 2 최선의 예제 이어 보세요.
댓글