프로젝트 생성

1. 프로젝트 생성

   mkdir portfolio-web
   cd portfolio-web
   

2. 루트 디렉토리에 main.js 파일 생성

   let greeting = "Hello, world!";
   
   console.log(greetting);
   
   let nickname = "짐코딩";
   let hobby = ["헬스", "수영"];
   
   let person = {
       nickname: nickname,
       hobby: hobby
   }
   

Prettier 설정

Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구입니다.

1. .prettierrc.json 설정 파일

   {
     "singleQuote": true,
     "semi": true,
     "useTabs": false,
     "tabWidth": 2,
     "trailingComma": "all",
     "printWidth": 80,
     "bracketSpacing": true,
     "arrowParens": "always",
     "endOfLine": "auto"
   }
   

   주어진 Prettier 설정 옵션에 대한 설명입니다:

   • singleQuote: 작은따옴표(')를 사용하여 문자열을 감싸도록 지정합니다.
   • semi: 문장 끝에 세미콜론을 추가하도록 지정합니다.
   • useTabs: 탭 대신 공백을 사용하여 들여쓰기를 합니다.
   • tabWidth: 탭의 너비를 지정합니다.
   • trailingComma: 객체나 배열의 마지막 요소 뒤에 쉼표를 항상 붙입니다.
   • printWidth: 한 줄의 최대 길이를 80자로 제한합니다.
   • bracketSpacing: 객체 리터럴의 중괄호 안에 공백을 추가합니다.
   • arrowParens: 화살표 함수의 매개변수가 하나인 경우에도 괄호를 항상 사용합니다.
   • endOfLine: 파일의 끝 행 구분자를 자동으로 설정합니다.

2. settings.json 파일 설정

   {
     **"editor.defaultFormatter": "esbenp.prettier-vscode", //** prettier를 기본 포맷터로 지정
     **"editor.formatOnSave": true, //** 파일을 저장할 때마다 포매팅 실행
     **"editor.tabSize": 2 // 탭을 2개의 공백 문자로 표기**
   }
   

참고

Options · Prettier