프로젝트 설정 패키지 설치npm install --save-dev prettier eslint eslint-config-next eslint-plugin-prettier eslint-config-prettierprettier: 코드 포맷터eslint: 코드 린터eslint-config-next: Next.js에 적합한 ESLint 설정eslint-plugin-prettier: ESLint에서 Prettier 포맷팅 체크eslint-config-prettier: ESLint와 Prettier 간 충돌 방지Prettier 설정 프로젝트 루트에 .prettierrc 파일 생성 후 아래 내용 추가:{ "semi": true, "singleQuote": true, "trailingComma": "all", ..
ES Lint? ESLint는 JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구입니다. ESLint의 규칙은 구성 가능하며 사용자 정의 된 규칙을 정의하고로드 할 수 있습니다. ESLint는 코드 품질과 코딩 스타일 문제를 모두 다룹니다. Why should we use it? 문법적인 오류를 잡아주고 코드를 일관성 있게 만들어 준다. 여럿이서 작업할경우 일괄된 규칙의 코드를 작성할수 있다. How to apply it in WebStorm? WebStorm > Preference > Languages & Frameworks > Javascript > Code Quality Tools > ESLint
intellij debuging 할때 collect 변수를 확인한다거나 할때 아래와 같은 메시지가 뜬다면,,, intellij unable to evaluate the expression cannot find source class for java.util.list jdk 버전이 제대로 설정이 되어있는지를 확인한다. 프로젝트셋팅 cmd + ; -> SDKs 를 확인하자
intellij 를 사용하면서 자주쓰는 단축키 (mac 기준) Cmd + b 변수에서 눌렀을 경우 해당 변수를 사용하는 list를 보여준다. method에 눌렀을 경우 method로 진입 Cmd + o 최근 사용한 파일 Cmd + shif + u 대소문자 변환 Cmd + opt + [ or ] 마지막 괄호 위치로 이동, 최근 괄호 위치로 이동 Cmd + shif + a Action 계속 생각나는데로 업데이트 하겠습니다.
front 개발을 하다보니 가벼운 atom 에디터를 사용하고 있다.사용하면서 유용한 라이브러리들을 소개한다. (윈도우os기준..) - sublime-style-column-selection alt 클릭하고 드래그로 세로 선택 가능 이클립스에 block select와 같은기능 - angularjsangularjs 개발시 태그 자동완성 - autoclose-html html 태그 작성시 자동으로 종료태그를 넣어준다 . - goto-last-editctrl + i 마지막으로 수정한 위치로 커서를 이동시켜준다. - linter문법검사 - 필수로 설치하시길 . - linter-htmlhinthtml 문법검사를 해준다. - linter-jshint javascript 문법검사를 해준다. - minimap 없어도 크..