본문 바로가기
Vue

👀 vscode 에서 EditorConfig 쓰기

by frontChoi 2023. 6. 2.
반응형

EditorConfig

일관된 코드의 작성 형태를 맞추기 위해 보통 사용된다. eslint(문법 검사), prettier(코드 포맷) 와 같이 비교 되고는 한다.

다만 현 회사에서 이미 EditorConfig이 존재하기 때문에 이번에 알아보기로 했다.

 

 

Extension 설치

EditorConfig는  eslint,prettier와 달리 npm으로 설치 할 필요는 없다. 다만 Vscode 같은 경우 Extensions에 추가 설치가 필요하다.

 

🥼 Editorconfig 작성

EditorConfig는 어떻게 코드를 포맷 할것인가에 대해서 작성하는 곳이다. 예를 들어 들여쓰기 기준을 tab으로 잡을지 space 으로 잡을지 결정을 한다. 그리하는 나는 아래 처럼 작성하였다.

root = true

[*] # 모든 파일에 적용 특정파일에 적용도 가능하다.
indent_style = space # 들여쓰기 설정(space)
indent_size = 4   # 들여쓰기 사이즈
trim_trailing_whitespace = true # newline 앞의 공백 문자를 제거하려면
insert_final_newline = true # insert_final_newline
end_of_line = lf #개행 표시 방법 제어

 

🌚 설정 후기

현재 EditorConfig에서 max_line_length은 넣어도 적용되지 않았다.. 이유는 아직까지는 찾지를 못했다. 보통 라인이 넘어가면 자동 으로 개행처리하는게 필요한 부분이긴한데, vscode에서 동작을 하지 않는건지는 계속해서 알아볼 필요가 있다.

 

 

📡  auto fix 하기

vscode에서는 자동 저장시 적용이 되어야 하기 때문에 "settings.json"에서 아래같이 해줘야 동작하는 것으로 보인다.

 

{
   //settings.json
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.detectIndentation": false,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
}

 

반응형

'Vue' 카테고리의 다른 글

🏰 vue2 jest 환경세팅  (0) 2023.08.09
props으로 함수 받기  (0) 2023.07.23
Vue + jest + typescript 세팅  (0) 2023.05.01
🎲 vue + jest를 이용한 login 구현  (0) 2023.04.11
🖖 vue jest router 생긴 문제  (0) 2023.03.16

댓글