티스토리 뷰
설치되더라도 vscode prettier 확장프로그램을 설치해도 바로 적용이 안되는 경우가 있습니다.
참고자료의 도움으로 prettier 적용을 하게 됐습니다.
cmd(⌘) + , 단축키를 누르면 설정(Preference)에 들어갈 수 있습니다.
1. editor format on save 검색 후 체크박스 체크표시
(fomat on save 도 마찬가지로, '사용자'탭과 '작업영역'탭에 적용시켜주세요~)
2. json 검색 후, Edit in setting.json 에서 수정합니다.
3. default formatter 을 검색 후에 esbenp.prettier-vscode 를 선택하시면 됩니다.
참고로 작업하고 있는 프로젝트 에서 적용하고 싶다면, 검색창 바로 밑에 있는 '작업영역' 탭을 선택해주세요!
4. 1~3단계를 설정했다면, 자동으로 .vscode 라는 디렉토리에 settings.json 파일이 생깁니다.
settings.json 에서
editor.defaultFormatter가 'esbenp.prettier-vscode'인지
editor.formatOnSave 가 true 값인지 확인합니다.
확인후 추가하고 javascript 언어에 대한 코드포맷에 대한 설정을 하고 싶다면 아래와 같이 추가해봅시다.
// .vscode/settings.json
{
"open-in-browser.default": "chrome",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.maxTokenizationLineLength": 2500,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
5. 프로젝트의 루트디렉토리에 .prettierc.json 파일을 추가합니다.
.prettierc.json 은 코드포맷팅에 대한 규칙을 설정해주는 역할을 합니다.
// .prettierc.json
{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 줄 바꿈 할 폭 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}
[참고자료]
prettierc.json 파일 설정 세팅 참고
'Backend > 꾸준히 TIL' 카테고리의 다른 글
bcrypt 설치 관련 에러 (0) | 2022.08.29 |
---|---|
[mongodb] $in 와 $exist operator (0) | 2022.08.29 |
[mongodb/mongoose] methods vs method (0) | 2022.08.28 |
[mongodb] _id 컬럼으로 검색 - find()/findOne() (0) | 2022.08.28 |
Mysql Workbench 가 예기치않게 종료되었습니다 (0) | 2022.08.24 |
- Total
- Today
- Yesterday
- node.js
- MySQL
- gem
- RDBMS
- 디지털디톡스
- 참고
- Mongoose
- IT용어
- Nest.js
- 미완
- 바이트디그리
- jest
- 스마트폰중독
- Jekyll
- typeORM
- OS
- MongoDB
- 한달독서
- git
- TDD
- 나도 할 수 있다
- 한달어스
- nestjs jest
- 클린아키텍쳐
- 개발용어
- TypeScript
- 습관개선
- nestjs
- vscode
- 갓생살자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |