Prettier 사용법

prettierr 사용법

1. prettierrc.js 파일 생성

module.exports = {
  printWidth: 80, //  줄 바꿈 할 폭 길이
  tabWidth: 2, // 탭 너비
  singleQuote: true, // single 쿼테이션 사용 여부
  trailingComma: 'all', // 여러 줄을 사용할 때, 후행 콤마 사용 방식
};

등 원하는 규칙 생성

2. npm i prettier -D 로 설정한 모듈 적용

3. package.json 파일에 scripts 부분에 
    "prettify": "prettier --write *.js **/*.js"
붙여 넣기
(scripts 부분에 붙여 넣을때 ,(콤마)빼먹지 않기)

prettify 실행시 원하는 프리티어 규칙대로 코드가 바뀜

4. npm run prettify
prettify 실행 명령어

간단히 사용법
확장 프로그램 프리티어 다운

코드화면에서 우클릭후 문서서식프로그램 클릭
prettier 기본값 설정 클릭
문서서식 클릭 (Alt+Shift+F) 원래하던 정렬


기본 설정 종류

trailingComma: "es5"
- `es5`라는 값은 JavaScript 버전중 하나인 ES5에서 허용되는 부분까지만 콤마를 뒤에 붙이는 규칙입니다.
- `none`이라는 값은 가능한 모든 코드에서 코드 뒤에 붙은 콤마를 제거합니다. (에러가 나도록 다 제거하는것은 아닙니다!)
- `all` 이라는 값은 ES8 이전의 버전까지 허용되는 모든 부분에 콤마를 붙이도록 합니다.

아직 `all` 규칙에 해당하는 문법을 지원하지 않는 브라우저가 있기 때문에 권장 규칙은 "`es5`" 혹은 "`none`" 입니다.

tabWidth: 4
들여쓰기 한번에 얼만큼의 스페이스(여백)로 구성할지에 대한 설정입니다
코드가 길어보인다 하면 보통 2
들여쓰기 구분이 잘 안된다 하면 보통4 를 사용한다.

semi: true
코드 뒤에 세미콜론을 붙일지 말지 결정하는 규칙입니다.
true인 경우 세미콜론을 항상 붙이도록 해줍니다.
코드의 끝을 직관적으로 볼 수 있기때문에 true 가 권장

singleQuote: true
문자열을 표기하는 문법에서 외따옴표를 사용할지, 쌍따옴표를 사용할지의 여부를 설정하는 규칙입니다.
true 설정은 외따옴표를 사용하는 것이며 쌍따옴표와 차이가 특별히 없기에 외따옴표를 주로 사용

arrawParens: "always"
Arrow function에서 파라메터 부분에 괄호를 항상 붙여주는 규칙입니다.
화살표 함수에서 파라메터에 괄호를 붙혀 가독성을 향상 시켜준다

module.exports = {

    trailingComma: 'es5',

    tabWidth: 2,

    semi: true,

    singleQuote: true,

    arrowParens: 'always',

  };

위의 것들을 전부 적용한 코드