[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/

    - 매뉴얼

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