정해진 규칙을 정해주어서 코드 스타일링을 쉽게 가져간다.
파일을 만들었으면 설정을 해준다. prettier 공홈에서 소스를 보고 커스텀 할 수 있다.
{
"trailingComma": "all", // 객체 나 배열사용시 , 자동생성
"tabWidth" : 2, // 탭 할때 탭수
"semi": true, // 세미콜론 자동추가 여부
"singleQuote": true // true = "", false = ''
}
F1 키를 누르고 formatdocument 하면 맨 위에 창을 클릭하면 수동 정렬이 됩니다.
자동정렬은 VScode 왼쪽 하단에 톱니바퀴에 설정에 들어가서 검색창에 format on save에 들어가서 아래 사진처럼 체크 하고 끄시면 저장 할때마다 정렬이 손쉽게 됩니다.
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
{
"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"
}
}