웹스톰에서 단축키로 코드정리하기
프리티어 (prettier) 플러그인의 사용
보기 좋은 떡이 먹기도 좋듯, 정갈하게 작성한 코드가 디버깅하기 편하다. 가장 좋은 코드는 한사람이 짠 것 같은 코드라는 말도 있다. 들여쓰기 간격, 한줄을 띄는 기준과 같은 부분을 동일하게 맞추면 팀 협업에 도움이 된다.
프리티어 플러그인 설치 및 설정
https://prettier.io/프리티어 플러그인은 npm install --save-dev --save-exact-prettier 로 간단히 설치할 수 있다. 프로젝트 터미널창을 열어 설치해보자. 그 다음에 할 일은 설정이다. 아마 이것을 설치하면 프로젝트 파일들 가운데 .prettierrc.js 라는 파일이 생성된 것을 볼 수 있을 것이다. 열어보면 대략 이런식으로 생겼다.
module.exports = {
bracketSpacing: false,
trailingComma: 'all',
jsxBracketSameLine: true,
singleQuote: true,
};
혹은 이렇게 생겼다.
{
"bracketSpacing": true,
"trailingComma": "all"
"singleQuote": true,
}
리액트 프로젝트와 리액트 네이티브 프로젝트의 차이인지는 모르겠으나, 파일 문법에 차이가 있었다. 어쨌든, 최초 설정되어있는 한두가지 규칙이 있으니 문법을 참고해 원하는 규칙을 만들면 된다. 들여쓰기 사용여부는 useTab, 탭간격은 tabWidth 으로 설정할 수 있고 더 많은 설정들이 options 항목으로 제공되며, 파일이 커밋될 때 자동으로 규칙을 적용하도록 설정할 수도 있다.
eslint 와 별개로 사용
eslint 도 역시 코드를 정리해주는 좋은 도구이고 프리티어와 조합하여 슬기롭게 사용할 수 있는 방법들도 있지만, 나에게는 별로 도움이 되지 않았다. 아마도 내가 eslint를 제대로 사용해보기 전에 프리티어를 더 많이 활용해서 익숙해졌기 때문인 것 같다. 둘을 조합해서 사용하는 방법은 프리티어 공식 사이트에 제시되어 있다.
내가 주로 활용하는 방법은 단축키를 누르면 프리티어 규칙이 적용되도록 하는 방법이다.
웹스톰 환경설정 (preferences) 열기
Languages & Frameworks > Javascript > Prettier 환경설정의 Languages & Frameworks > Javascript > Prettier 항목에서 Prettier package 부분을 채워주자. 클릭하면 자동으로 패키지가 설치된 경로가 인풋 하단에 떠서 클릭만 해주면 자동으로 입력된다.
KeymapKeymap(단축키) 설정에서 prettier 를 검색해 원하는 단축키를 설정해주자! 커서가 어디에 있든 이 단축키를 누르면 현재 프로젝트 파일의 코드가 규칙에 맞게 정리될 것이다.
Languages & Frameworks > Javascript > Code Quality Tools > ESLint마지막으로 Eslint 는 disable 시켜주자.
비활성화 시키는 이유는, 이게 돌아가면 툭하면 빨간줄이 그어지기 때문이다. 가령 ESlint 규칙 상에서 의미없이 두줄이상 띄어질 수 없다고 되어있는데 내가 두줄을 띄어서 코드를 작성한다면 그 부분에 빨간 줄이 그어진다. 그러면 실제로 철자가 틀렸다거나 자바스크립트 문법을 틀려서 빨간 줄이 생기는 것과 구분이 어려워 불편해서 비활성화시키기로 한 것이다. 물론 ESlint 의 설정을 바꾸면 될 일이지만, 나는 프리티어가 더 편하기 때문에 특별한 이유가 없는 한 프리티어만 쓸 예정이다.
참고자료
프리티어 공식 사이트 : https://prettier.io/docs/en/webstorm.html
Photo by Markus Spiske on Unsplash
