ESLint 및 Pycharm 적용

인터넷망

1. Node.js(NPM) 설치

2. ESLint 설치
   1. npm install --save-dev eslint
3. Pycharm ESLint 플러그인 다운로드
   1. https://plugins.jetbrains.com/plugin/7494-eslint
4. airbnb-eslint 관련 기타 플러그인 설치
   1. npm install --save-dev eslint-plugin-import
   2. npm install --save-dev eslint-plugin-react
   3. npm install eslint-plugin-jsx-a11y@5.1.1 --save-dev
   4. npm install --save-dev eslint-config-airbnb
5. node_modules 복사
   1. C:\Users\사용자\AppData\Roaming\npm 디렉토리 복사
   2. eslint 설치한 경로의 node_modules 복사
6. 파일 전산망 옮기기
   1. npm 디렉토리, node_modules, node 설치파일, Pycharm ESLint 플러그인 파일(zip파일)

 

전산망

1. Node.js(NPM) 설치
2. npm 덮어씌우기
   1. C:\Users\사용자\AppData\Roaming\npm 디렉토리에 덮어씌우기
   2. 덮어씌운 npm 디렉토리 내부에 node_modules 디렉터리를 복사해온 node_modules 디렉토리 덮어씌우기
3. Pycharm ESLint 플러그인 설치
   1. File->Settings->Editor->Plugins->Install plugin from disk 클릭
   2. 옮겨온 plugin 파일 지정(zip파일) 선택 후 OK 클릭
   3. 설치 후 Pycharm 재시작
4. Pycharm ESLint 적용
   1. File->Settings->Languages & Frameworks->JavaScript->Code Quality Tools->ESLint
   2. Enable 체크
   3. Node Interpreter 지정
      1. C:\Program Files\nodejs\node.exe
   4. ESLint package 지정
      1. ~\AppData\Roaming\npm\node_modules\eslint
   5. Config 파일 지정
      1. \원하는 경로\.eslintrc
5. confing(.eslintrc) 생성
   1. Pycharm에서 config 지정항 경로에 .eslintrc 생성
   2. .eslintrc 내용 작성 (하단참조)

{     "extends": "airbnb", //airbnb 룰 적용     "rules": {         "indent": ["error", 4],  //indent 4로 지정(default 2)     } }

 

스크린샷 참조

 

 

(전산망 -> 4. Pycharm ESLint 적용)

 

(전산망 -> 5. confing(.eslintrc) 생성)