react + eslint + vscode + airbnb 셋팅 #2

react + eslint + vscode + airbnb 셋팅 #1

여기에 이어서..

1. 프로젝트를 생성합니다.

# create-react-app book
# cd book

book이란 이름의 리액트 프로젝트를 생성합니다.

그리고 프로젝트 폴더로 이동합니다.

2. Airbnb 설정 패키지를 설치합니다.

# yarn add -D eslint-config-airbnb

• -D : 옵션은 --dev 옵션하고 같은거로 빌드시 얘를 제외합니다.

3. eslint 설정파일을 생성합니다.

# vi .eslintrc.js

vi 말고 에디터로 .eslintrc.js 파일 만들어도 되구요.

아래 내용을 입력하고 저장합니다.

module.exports = {
  'parser': 'babel-eslint',
  'extends': 'airbnb',
  'plugins': ['react', 'jsx-a11y', 'import'],
  'env': {
    'browser': true
  },
  'rules': {
    'quotes': ['error', 'single'],
  }
};

🌱2018.12.04 Update - 이것저것 만지다보니 아래 설정으로 업데이트!

module.exports = {
  'parser': 'babel-eslint',
  'extends': ['airbnb', 'react-app'],
  'plugins': ['react', 'jsx-a11y', 'import'],
  'env': {
    'browser': true
  },
  'rules': {
    'linebreak-style': 0,
    'react/jsx-filename-extension': [1, {
      "extensions": [".js", ".jsx"]
    }],
    'quotes': ['error', 'single', {
      'allowTemplateLiterals': true
    }],
  }
};

4. 이 프로젝트를 vscode 로 열어주세요.

# code .

vscode가 실행되면 src/App.js 파일을 오픈합니다.

에러인듯 에러아닌 에러같은 너(...)가 빨간 밑줄로 잘 보이네요!

1. state가 없으면 class 말고 함수로 바꿔주세요.
2. 확장자를 .jsx 로 바꿔주고요.
3. 12라인 줄바꿈 하고
4. 여기도 줄바꿈 해 줍니다.

ESLint 관련 페이지(영어) : https://eslint.org/

Airbnb 스타일가이드(한국어) : https://github.com/ParkSB/javascript-style-guide