프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.
Prettier 설치
npm install --save-dev prettier
프로젝트 루트에 .prettierrc / .prettierrc.js 파일 추가
module.exports = {
printWidth: 200,
tabWidth: 2,
bracketSpacing: true,
arrowParens: 'always',
semi: true,
singleQuote: true,
trailingComma: 'all',
endOfLine: 'auto',
singleAttributePerLine: true,
};
- semi: false - 세미콜론을 사용하지 않는다.
- singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 사용
- trailingComma: 'all’ - 가능한 모든 곳에 후행 쉼표를 추가한다. (ex. const obj = {a: 1,b: 2,})
- useTabs: false - 탭 대신 스페이스를 사용
- tabWidth: 2 - 들여쓰기 할 때 사용하는 스페이스의 개수를 2칸으로 설정
- printWidth: 200 - 한 줄의 최대 길이를 200자로 설정함. 이 길이를 초과하면 줄바꿈을 한다.
- arrowParens: 'always’ - 화살표 함수의 매개변수에 항상 괄호를 사용 (ex. const func = (x) => x + 1)
- bracketSpacing: true - 객체 리터럴의 중괄호 양 옆에 공백을 추가합니다.
- endOfLine: 'auto’ - 파일의 끝 줄바꿈을 자동으로 감지하고 설정합니다. 운영 체제에 따라 다른 줄바꿈을 사용할 때 유용합니다.
- singleAttributePerLine: true - HTML, JSX, Vue 등의 태그에 하나의 속성만 한 줄에 위치하도록 설정
스크립트 설정 (package.json)
— ignore-path 옵션으로 .gitignore 파일을 선택함으로써, Git으로 관리하지 않는 파일들은 검사하지 않도록 설정한 스크립트
"scripts": {
…
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},
Prettier적용
기존 파일들에 프리티어 적용 하기 위해서 터미널에 npm run format 실행 후 wraning이 나온다면 npm run format:fix 실행한다.
그 후 npm run format 실행 후 All matched… 가 나오면 성공했다.
'Dev' 카테고리의 다른 글
React Developer Tools 설치(크롬 확장프로그램) (1) | 2024.09.10 |
---|---|
aws-sdk (S3 가져오기) (0) | 2024.09.10 |
S3 권한 설정 (IAM) (0) | 2024.09.10 |
AWS S3와 CloudFront 연동 (0) | 2024.09.06 |
AWS S3 버킷 만들기 (0) | 2024.09.06 |
프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.
Prettier 설치
npm install --save-dev prettier
프로젝트 루트에 .prettierrc / .prettierrc.js 파일 추가
module.exports = {
printWidth: 200,
tabWidth: 2,
bracketSpacing: true,
arrowParens: 'always',
semi: true,
singleQuote: true,
trailingComma: 'all',
endOfLine: 'auto',
singleAttributePerLine: true,
};
- semi: false - 세미콜론을 사용하지 않는다.
- singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 사용
- trailingComma: 'all’ - 가능한 모든 곳에 후행 쉼표를 추가한다. (ex. const obj = {a: 1,b: 2,})
- useTabs: false - 탭 대신 스페이스를 사용
- tabWidth: 2 - 들여쓰기 할 때 사용하는 스페이스의 개수를 2칸으로 설정
- printWidth: 200 - 한 줄의 최대 길이를 200자로 설정함. 이 길이를 초과하면 줄바꿈을 한다.
- arrowParens: 'always’ - 화살표 함수의 매개변수에 항상 괄호를 사용 (ex. const func = (x) => x + 1)
- bracketSpacing: true - 객체 리터럴의 중괄호 양 옆에 공백을 추가합니다.
- endOfLine: 'auto’ - 파일의 끝 줄바꿈을 자동으로 감지하고 설정합니다. 운영 체제에 따라 다른 줄바꿈을 사용할 때 유용합니다.
- singleAttributePerLine: true - HTML, JSX, Vue 등의 태그에 하나의 속성만 한 줄에 위치하도록 설정
스크립트 설정 (package.json)
— ignore-path 옵션으로 .gitignore 파일을 선택함으로써, Git으로 관리하지 않는 파일들은 검사하지 않도록 설정한 스크립트
"scripts": {
…
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},
Prettier적용
기존 파일들에 프리티어 적용 하기 위해서 터미널에 npm run format 실행 후 wraning이 나온다면 npm run format:fix 실행한다.
그 후 npm run format 실행 후 All matched… 가 나오면 성공했다.
'Dev' 카테고리의 다른 글
React Developer Tools 설치(크롬 확장프로그램) (1) | 2024.09.10 |
---|---|
aws-sdk (S3 가져오기) (0) | 2024.09.10 |
S3 권한 설정 (IAM) (0) | 2024.09.10 |
AWS S3와 CloudFront 연동 (0) | 2024.09.06 |
AWS S3 버킷 만들기 (0) | 2024.09.06 |