• Lint

  1. JSLint
  2. JsHint
  3. ESLint

• Prettier

• ESLint 가 검사하는 항목

  1. 코드 품질 : 버그나 error 를 찾아주는것

• Prettier 가 검사하는 항목

  1. 코딩 컨벤션 유지

• ESLint 설치 및 사용법

  1. Nodejs 가 설치되어있어야한다.

     1. **http://www.nodejs.org ( 제 버전은 8.5.0 )**

  2. 터미널/cmd 창에서 사용할 프로젝트 디렉토리로 위치시킨다.

  3. 명령어를 입력하여 ESlint 모듈, prettier 모듈을 설치한다.

     $ npm install -D eslint
     $ npm install prettier --save-dev --save-exac
     

     

     

  4. 추가 모듈들 설치

     • eslint-config-prettier: Prettier와 충돌할 설정들을 비활성화합니다. eslint-plugin-prettier: 코드 코맷할 때 Prettier를 사용하게 만드는 규칙을 추가합니다

     $ npm install eslint-plugin-prettier eslint-config-prettier --save-dev
     

  5. .eslintrc.json 라는 파일을 만들어주고 다음 내용을 넣는다.

     • .eslintrc.json 은 ESlint 의 connvention 을 정해주는 장소라고 생각하면된다.

     $ touch .eslintrc.json
     -----------------------
     
     {
       "root": true,
       "plugins": ["prettier"],
       "extends": ["eslint:recommended", "plugin:prettier/recommended"],
       "rules": {
         "prettier/prettier": "error",
         "no-console": "off",
         "no-undef": "off"
       }
     }
     

6. vscode extension 에서 ESLint 와 Prettier 를 설치해준다.

7. 설정 ctrl + , 맥은 cmd + ,

이것을 누르면 settings.json 파일이 나오고

// settings.json
{
  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

prettier 규칙을 만드려면 .prettier.json 파일을 .eslintrc.json 파일과 같이 만들고 규칙을 넣으면된다.

//.prettier.json

{
    "printWidth": 80, // 한 줄 최대 문자 수
    "tabWidth": 2, // 들여쓰기 시, 탭 너비
    "useTabs": false, // 스페이스 대신 탭 사용
    "semi": true, // 문장 끝 세미콜론 사용
  "trailingComma": "all", // 꼬리 콤마 사용
  "bracketSpacing": true, // 중괄호 내에 공백 사용
  "arrowParens": "avoid", // 화살표 함수 단일 인자 시, 괄호 생략
  "proseWrap": "never", // 마크다운 포매팅 제외
  "endOfLine": "auto", //기존 줄 끝 유지(한 파일 내의 혼합 값은 첫 번째 줄 이후에 사용된 내용을 보고 정규화됨)
}

ESLint 규칙 - https://eslint.org/docs/latest/rules/

Prettier 옵션 - https://prettier.io/docs/en/options.html

⭐ 구글 스타일사용하려면 - https://ingg.dev/eslint/

$ npm install --save-dev eslint eslint-config-google
후에
.eslintrc.json 파일에

  "extends": ["eslint:recommended", "google"],
  
를 추가하면된다.

그리고 huskty 은 git이 커밋될때 코드가 제대로고쳐졌는지 확인후에 커밋할수있도록하는건데 좀더 알아봐야할듯…

html 도 extension…

https://google.github.io/styleguide/jsguide.html 구글 jsguide