[Javascript] Prettier - js 포매팅 툴
Code Formatter
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
//----------------------
* prettier/prettier
https://github.com/prettier/prettier - 39.1k
- 2.2.1 , 2020.11
- 매뉴얼
https://prettier.io/docs/en/install.html
- 설치
npm install --global prettier
- 실행
prettier -w foo.js
- 설정 파일 적용
prettier --config c:\.prettierrc.js -w foo.js
//-------------------------
< php에 적용 > <== 비추
https://github.com/prettier/plugin-php - 1.2k
- v0.16.1 , 2020.12
- plugin 설치
npm install --global prettier @prettier/plugin-php
- 실행
prettier --config c:\.prettierrc.js -w foo.php
- php에 html이 혼합된 경우 html, js에는 적용안됨
--parse html 옵션을 쓰면 php는 무시됨
//---------------------------------------------------
* 설정파일 : .prettierrc.js
module.exports = {
tabWidth: 2,
printWidth: Infinity, //줄 넓이
//-----------
// 기본값
useTabs: false, //들여쓰기에 빈칸대신 탭문자 사용
semi: true, //줄끝에 세미콜론 추가
singleQuote: false, // 큰따옴표를 작은따옴표로 변경
jsxSingleQuote: false, //JSX에서 작은따옴표 사용
quoteProps: "as-needed", //개체 값의 따옴표를 변경
trailingComma: "es5", //요소뒤의 콤마처리
bracketSpacing: true, //{}에 공간 넣기
arrowParens: "always", //화살표 함수 인자에 괄호 치기
requirePragma: false, //파일 전반부 설명 강제
insertPragma: false, //파일 전반부 설명 추가
proseWrap: "preserve",
htmlWhitespaceSensitivity: "css", //
vueIndentScriptAndStyle: false, //Vue에서 <script> 나 <style> 안에 있어도 적용
endOfLine: "lf", //개행문자
embeddedLanguageFormatting: "auto", //
};
//-------------------------------------------------------------------
< VS Code Extension >
prettier/prettier-vscode
https://github.com/prettier/prettier-vscode - 3.8k
- v5.9.2 , 2021.2
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular
GraphQL · Markdown · YAML
https://prettier.io/docs/en/options.html