(작성중)[CodeConvention]ESLint

01 개요

ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구다. 코딩 컨벤션은 사전에 작성된 특정 형태를 따를 수도 있고, 사용자가 직접 작성할 수 있다.

02 생성

npx eslint --init

03 규칙(Rules)

no-unused-vars

module.exports = {
 ...
 rules: {
   "no-unused-vars": "off"
 }

99

React에서 chrome API를 사용하려 하면 다음과 같은 오류를 확인할 수 있다.

'chrome' is not defined no-undef

이는 다음과 같은 세 가지 방법으로 해결할 수 있다.

01. add /*global chrome*/ at top

/*global chrome*/
import React, { Component } from 'react';
import './App.css';

02. modify eslint rule locally

/ eslint-disable no-undef /

function callback(val) {
   console.log(val)
}

chrome.topSites.get(callback);
/* eslint-enable no-undef */

03. modify eslint config

module.exports = {
 ...otherConfigs,
 globals: {
   chrome: true
 }
}

리액트를 사용할 때 처음에 ESLint configuration이 숨겨진 채로 내부적으로 작동하는데, 이 때 no-undef rule이 활성화되어 있기 때문에 발생하는 문제이다.