[코드 사양] prettier

prettier

모든 개발자는 자신의 코드 스타일을 가지고 있다. 예를 들어 다음과 같다.
예제 1

function foo(items) {
  return items
    .filter(item => item.checked)
    .map(item => item.value)
  ;
}

function foo(items) {
  return items.filter(item => item.checked).map(item => item.value);
}

예제 2

const food = [
  'pizza',
  'burger',
  'pasta',
]

const food = ["pizza", "burger", "pasta"];

예제 3

console.log(
  a
)

console.log(a)

예 4

let back = '' + a + JSON.stringify(b)

예 5

let b = {name:'xm', age:25, sex:'male', color:'yellow'}

let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' }

ESLint를 사용하여 스타일을 통일할 수 있습니다.그러나 코드가 100% 일치한다는 보장은 없다.
비교적 엄격한 airbnb 설정만 보면 예시 1, 예시 2, 예시 3을 통일할 수 없다. 예시 4에 대한 복구는 다음과 같다.

const back = `${a}${JSON.stringify(b)}`;

이런 침입식의 개작은 우리가 바라는 것이 아니다.
standard와airbnb 두 가지 기준에서 예시 5가 복원된 격식도 다르다.
standard:

let b = { name: 'xm', age: 25, sex: 'male', color: 'yellow' }

airbnb:

const b = {
  name: 'xm', age: 25, sex: 'male', color: 'yellow',
};

어떤 친구들은 이런 걸 갈망해요.

const c = {
  name: 'xm',
  age: 25,
  sex: 'male',
  color: 'yellow',
};

요약:
(1) 표준과 에어뱅크 표준은 차이가 있고 코드 스타일과 습관이 다르다.
(2) 단일 기준 하에서도 코드의 100% 일치를 보장할 수 없다.
(3) 일부 상황에서 침입식으로 코드의 표현 방식을 바꾸었다.
아직도 코드 형식이 다른 부분이 많은 것을 보았는데 수조의 작성법에 대해 A원숭이는 모든 항목이 줄을 바꿔야 한다고 생각했다. B원숭이는 줄을 바꿀 필요가 없다고 생각했다. C원숭이는 일정한 길이를 초과해서 줄을 바꿔야 한다고 생각했다. D원숭이는 너희들이 빨리 통일하라고 말했다.
이때 주견이 있는 프리티어가 와서 염증을 일으켰다. "당신들이 뭘 썼든 동생이 칼을 휘둘러야 해요."

Prettier의 구성 옵션이 매우 적기 때문에 결정을 내릴 필요가 없습니다.

팀원들은 규칙을 위해 논쟁할 필요가 없다.

소스 코드 개발자는 프로젝트의 코드 스타일을 배울 필요가 없다.

ESLint 보고서의 스타일 문제를 해결할 필요가 없습니다.

파일을 저장할 때 자동으로 스타일을 통일할 수 있습니다.

prettier 현재 사용자
prettier는 단독으로 사용할 수 있고,eslint와 결합하여 각각 장점을 취할 수 있다.가자, 가서 어떻게 사용하는지 보자
prettier 단독 사용

npm install prettier --save-dev

package.json

{
	"scripts"**:** {
		"format"**:** "prettier --write '**/*.{js,css,md}'"
	 }
}

파일 생성**.prettierrc**

{
  "printWidth": 50,
  "singleQuote": true,
  "trailingComma": "es5"
}

최후

npm run format

저희가 봤어요.
예시 1의 내용은 자동으로 규범화되었다

  let abc = items
    .filter(item => item.checked)
    .map(item => item.value);

예2의 내용은 자동으로 규범화되었다

const food = ['pizza', 'burger', 'pasta'];

예시 3의 내용은 자동으로 규범화되었다

console.log(b);

예시 4의 코드는 원형을 유지하고 침입식 수정을 하지 않았다
예시 5는 자동으로 규범화되었다

let b = {
  name: 'xm',
  age: 25,
  sex: 'male',
  color: 'yellow',
};

종합적으로prettier는 코드의 일치성을 유지하고 코드를 침입적으로 수정하지 않는다
다시 한 번,eslint 결합prettier의 사용 상황을 살펴보자

npm install prettier eslint-plugin-prettier --save-dev

업데이트eslintrc.js or .eslintrc.json

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 100,
        "singleQuote": true,
        "trailingComma": "es5"
      }
    ]
  }
}

최종 집행

npm run lint test.js

실행 순서는prettier를 먼저 진행한 다음에eslint를 진행했습니다. 만약 충돌하는 부분이 있으면prettier를 위주로 합니다.
손을 들어 좋아요를 누르는 사람, 주의하세요, 당신의 내포를 보았습니다.
전재 대상:https://juejin.im/post/5cd03fd351882541773182df