VSCode 프로젝트에 prettier 적용하기

0. Extentions > Prettier 검색 > Prettier - Code formatter 선택 > install

 

1. settings.json 을 열기위해 ctrl + , (컨트롤 키 + 쉼표 키) 를 눌러 Settings에 들어간다

   우측 상단에 파일 아이콘(Open Settings (JSON)) 으로 들어가 다음을 작성한다.

{ // settings.json
    // Set the default
    "editor.formatOnSave": false,
    // Enable per-language
    "[javascript]": {
      "editor.formatOnSave": true
    },
    "editor.codeActionsOnSave": {
      // For ESLint
      "source.fixAll.eslint": true
    }
}

 

2. 프로젝트 최상위 디렉토리(프로젝트 폴더 자체)에 '.prettierrc' 파일을 만든다. (확장자 없이!)

  경로 : /프로젝트폴더/.prettierrc

{ // .prettierrc
    "arrowParens": "avoid",
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": false,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 2,
    "trailingComma": "none",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
  }

 

3. js 파일에서 테스트 해본다. 작성 후 js 파일을 save 하면 prettier 가 실행된다.

// Prettier 적용 전

	// charAt()
var str = "HELLO WORLD";
    str.charAt(0);      // 'H'

// charCodeAt()
    str.charCodeAt(0)   ;;; // 72

// Prettier 적용 후

// charAt()
var str = "HELLO WORLD";
str.charAt(0); // 'H'

// charCodeAt()
str.charCodeAt(0); // 72