ESLint에서 javascript 구문 검사!

4237 단어 ESLint

ESLint란?


  • javascript의 구문을 체크하는 툴입니다.
  • 사람에 따라 다른 javascript를 작성하는 방법도 팀 개발에서는 갖추어지지 않으면 기분이 나쁘고, 버그 아래…
  • 구문 체크 툴 「ESLint」를 도입하면, 스타일 가이드에 맞춘 팀 개발을 할 수 있다.

  • 코드 스타일의 일관성 유지
  • 스페이스, 들여쓰기, 브레이스(파괄호)의 배치 등의 코드 스타일의 문제를 린터로 확인할 수 있다.
  • 팀의 동의를 얻은 코딩 스타일을 설정 파일에 기술해 두면 자동적으로 확인할 수 있다

  • 잠재적인 에러나 좋지 않은 패턴을 구별할 수 있다
  • 린터는 중복 변수, 도달할 수 없는 코드, 무효인 정규 표현의 가능성이 있는 에러를 발견하기 위해서 보다 고도의 확인에 사용할 수 있다. 린터 경고는 런타임 전에 오류를 수정할 수 있습니다

  • 품질 강화
  • 사람과는 항상 손을 빼고 싶어지는 것이므로, 프로젝트의 특정의 스타일 가이드를 따를 때는 툴로 강화하는 것이 중요하다.
  • 생성 절차에 링팅 도구가있는 경우 프로젝트 시작을 중지하거나 수정되지 않은 오류가 있으면 저장소에 커밋합니다.

  • 시간 절약
  • 위의 3점에서 얻을 수 있는 주요 이점은 린터가 개발 중인 수고를 생략하는 것이다.
  • 브레이스에 대한 동료들과 실수 논의에 귀중한 시간을 소비하지 않고 초기 단계에서 1 ~ 2 개의 버그를 발견한다


    • ESLint를 소개합시다.



    npm에서 eslint install


    $ npm install --save-dev eslint
$ export PATH=$PATH:./node_modules/.bin
$ eslint -v

    eslint 초기 설정


    $ eslint --init

// 質問に対する回答を求められる
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript

    package.json
    {
  "devDependencies": {
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
  },
}

    .eslintrc.js
    module.exports = {
    "extends": "airbnb"
};

    Atom에 도입



    텍스트 편집기에 linter 설치
  • linter
  • linter-eslint

    • 도입 결과



    행의 왼쪽의 「빨간색 ●」는, 그 행에 javascript 구문 에러가 있는 마크(js는 일단 움직인다)



    js가 움직이지 않는 치명적인 에러의 경우는, 행의 왼쪽에 1점만 「빨간 ●」이 붙는다


    참고 사이트


  • JS 프로그래머의 엉뚱한 "버릇"은 ESLint를 도입하고 해결합시다.
  • Atom에 ESLint 도입
    • ESLint를 브라우저 내에서 사용
    Mocha 테스트 파일에서 ESLint 오류 'describe' is not defined no-undef

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage