🌿 ESlint
-
ES(EcmaScript) + Lint(에러가 있는 코드에 표시) => 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구
-
사용자가 직접 정의한대로 코드를 점검하고 에러가 있으면 표시
-
코딩 스타일도 정할 수 있어서 협업하기에 좋다
-
하나의 코딩 스타일을 적용하여 ESLint를 설정해두면 한 사람이 코딩한 것 같은 결과를 얻을 수 있다
-
확장성때문에 인기가 있다
- 다양한 플러그인을 사용할 수 있음(새로운 규칙 추가, 손쉽게 다른 사람의 설정을 도입가능)
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"extends": "airbnb-base",
"env": {
"browser": true,
"node": true,
"mocha": true
},
"rules": {
"max-length": 0 // 0으로 설정하면 에러 검출 X
},
"plugins": ['import'],
"globals": {
"jQuery": true,
"$": true
}
}- parserOptions : js 버전, 모듈 사용 여부
- extends: 확장 설정
- env: 프로젝트의 사용 환경(예: browser, node ..)
- rules: extends와 plugins에 대한 세부 설정 변경 코드
- plugins: 플러그인 (html, import 등)
🍀 prettier
-
visual studio code extension으로 정해진 규칙에 따라 자동으로 코드 스타일을 정리해주는 도구(스타일 교정)
-
여러 규칙들을 쉽게 커스터마이징 할 수 있다.
-
코드를 저장 시 정해놓은 규칙에 맞게 자동으로 정렬하여 가독성을 높이고 코드 스타일을 통일할 수 있다.
{
"singleQuote": true, // 따옴표 고정
"semi": true, // 코드 끝에 ; 설정
"useTabs": false, // Tap 사용여부
"tabWidth": 2, // Tap 크기
"trailingComma": "all", // 객체 끝 부분에도 Comma 추가
"printWidth": 100 // 줄 당 max length
}출처: https://www.zerocho.com/category/JavaScript/post/583231719a87ec001834a0f2
https://analogcoding.tistory.com/164
옵션 설정 https://uxgjs.tistory.com/150
winwin