Prettier

미숙한 초보 코딩.Js·2019년 12월 4일
0

Setting

목록 보기
1/3
post-thumbnail

Why?

정해진 규칙을 정해주어서 코드 스타일링을 쉽게 가져간다.

설치

  • VS code 를 설치한다.
  • 왼쪽에 Extensions 에서 Prettier를 검색하고 다운로드 수가 제일 많은것을 다운!
  • React 에서 src 폴더에 .prettierrc를 만든다.

설정

파일을 만들었으면 설정을 해준다. prettier 공홈에서 소스를 보고 커스텀 할 수 있다.

{
  "trailingComma": "all", // 객체 나 배열사용시 , 자동생성
  "tabWidth" : 2, // 탭 할때 탭수
  "semi": true,   // 세미콜론 자동추가 여부
  "singleQuote": true // true = "", false = ''
}

사용

  • F1 키를 누르고 formatdocument 하면 맨 위에 창을 클릭하면 수동 정렬이 됩니다.

  • 자동정렬은 VScode 왼쪽 하단에 톱니바퀴에 설정에 들어가서 검색창에 format on save에 들어가서 아래 사진처럼 체크 하고 끄시면 저장 할때마다 정렬이 손쉽게 됩니다.

npm

npm install eslint --save-dev
npm install prettier --save-dev --save-exact
npm install eslint-config-prettier eslint-plugin-react
npm install eslint-plugin-prettier

.eslintrc.json 작성

{
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended",
        "plugin:react/recommended",
        "prettier",
        "prettier/react"
    ],
    "plugins": ["prettier", "react"],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
     "rules": {
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true,
                "printWidth": 120
            },
            {
                "usePrettierrc": false
            }
        ],
        "no-console": "warn",
        "semi": 2,
        "no-undef": "warn"
    }
}

profile
힘들땐 블로그 하나더 적자!!![ Suyang ]

0개의 댓글