더블리의 12층

• vi에서 indentation을 맞추는게 생각보다 까다롭다. 어떤 툴을 써서 각자의 코드에 맞게 수정을 한다던지...
• how-do-i-fix-the-indentation-of-an-entire-file-in-vi 에서 indentation 파일 전체를 하는방법이 있다.
• 참고로 gg는 파일 첫번째 줄로 이동, G는 파일 맨끝으로 이동, ==은 indentation 아래는 이명령어의 조합을 사용

파일 전체 들여쓰기
gg=G    

To indent the all the lines below the current line  
\=G

# To indent the current line

To indent n lines below the current line  
n==

For example, to indent 4 lines below the current line  
4==

To indent a block of code, go to one of the braces and use command  
\=% 

• 이렇게 하면 들여쓰기가 자동으로 맞춰지는 무슨 기준으로 맞춰지는걸까...
• indent-multiple-lines-quickly-in-vi 에 상당히 자세하게 나와있다 이후에 한번 살펴보자

EsLint, Prettier는 VS Code에서 React를 개발할때 설치하면 좋은 확장 툴이다.
ESLint는 문법 검사, Prettier는 코드 스타일 자동 정리를 해주는 툴이다.

여러 개발자들이 동시에 개발하는 프로젝트라면 Prettier는 무조건 필수라고 할 수 있다.
git에서 merge할때 indentation 관련한 코멘트를 받으면 ... 창피

ESLint는 설치하고 바로 사용하면 되고, Prettier의 경우에는 프로젝트에 설정을 해야 한다.
프로젝트의 root directory에서 .prettierrc라는 파일을 설정하고
아래와 같이 프로젝트에서 사용할 prettierrc를 정의를 하면된다.

prettierrc example

{
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

prettier에 관련한 옵션은 다음 사이트에서 확인

코드 자동으로 정렬

VS Code에서는 코드를 저장할때 자동으로 정렬을 해준다.

[Code] - [Preference] - [Settings] 
에서 format on save 을 검색하고 체크