Semicolon auto disable in IntelliJ(Js/Ts)

자바스크립트나 타입스크립트 언어의 특징은
1. 끝에 세미콜론(;)이 있든 없든 에러가 아니다
2. 리스트나 객체의 끝에 ,가 있어도 에러가 아니다
3. 문자열로 '', ""둘다 허락한다

1.
const test = '123';
const test = '123'

2.
const arrTest = [1, 2, 3, 4, 5,]
const arrTest = [1, 2, 3, 4, 5]

let t2 = {age: 25, height: 180, grade: 'A',}
let t2 = {age: 25, height: 180, grade: 'A'}

3.
const hello='hello'
const hello="hello"

나는 끝에 세미콜론을 붙이지 않는 것을 선호한다
또한 자바스크립트나 타입스크립트는 [1,2,3,4,5,]처럼 끝에 , 가 있어도 에러없이 실행이된다
Vscode를 쓰는 타 기업 프론트엔드 팀에서는 끝에 ;를 붙일지 말지 혹은 끝에 ,를 붙이는 것을 허락할지 말지를 정한다고 한다
보통 끝에 콤마는 Trailling comma라고 부른다
그리고 ''나 ""는 single/double quotes라고 부른다

그럼 깔끔하게 인텔리제이에서 이 설정을 ON/OFF하는 설정을 알아본다
방법은 2가지가 있다
1. 단축키로 선택한 줄들 혹은 현재 파일의 전체 포맷을 정리하는 방법
2. 저장할때마다 파일의 전체 포맷이 정리되게하는 방법

IntelliJ에서 설정(Preferences)를 연다
맥 기준으로 command + ,이다. 윈도우는 파일.. 설정을 찾아보자! 단축키는 까먹었다..헤헷

그리고 Editor->Code Style->JavaScript/TypeScript에서 이렇게 설정을 해준다
[Don't use] 세미콜론 [always]
Use [single] quotes [always]
Trailling comma [remove]

자 그리고 내가 테스트할 코드는 이것이다

/*
  TODO ( 자바 스크립트파일 )
  1. 줄 선택해서 정리
  2. 전체 정리
  3. 저장될때 자동정리
 */
const test = '123';
const arrTest = [1, 2, 3,4, 5,];
let t = {};
t.name = "Kim";
t.age = 23;
let t2 = {age: 25, height: 180, grade: 'A',};

모든 라인의 끝에 ; 세미콜론이 있고
arrTest는 3,4가 붙어있으며 5뒤에 끝에,가 불필요하게 있다
그리고 t.name에는 "(double quotes)로 문자열을 감싸고 있다
마지막 t2객체 안에도 grade뒤에 ,가 있다
이때 아까 설정한 코드스타일로 수정되려면 Reformat 단축키를 알아야 한다
Mac기준으로 option + command + L 이다
선택한 라인을 정해서 리포맷하는 방법이 있고, 어느 줄도 셀렉션하지 않은 채 단축키를 누르면 현재의 전체 라인이 리포맷된다

선택한 라인만 정리

전체 라인을 정리

이제 두번째 방법인 저장할때 이 형식이 바뀌게 하고 싶을땐 어떻게 해야할까?
Tools->Actions on Save의 설정으로 가보자
거기에서 맨 위에 있는 Reformat code에서 Files중 JavaScript, TypeScript, Whole file을 선택하자

그러면 저장할때마다 우리가 설정한 스타일대로 저장될 것이다
그럼 결과를 확인해보자