Prettier의 문자 수 제한 확인

Prettier의 --print-width 는 상한치라고 생각했지만, 개행을 싫어하고 극단적으로 큰 수치를 설정하면(자), 반대로 개행하고 싶을 때에도 정리된다(개행이 사라진다)라고 하는 배움.

$ npx prettier for_test/test.js --write --print-width=800

-import {
-  CollectionDashboard,
-  DashboardPlaceholder
-} from "../components/collections/collection-dashboard/main";
+import { CollectionDashboard, DashboardPlaceholder } from '../components/collections/collection-dashboard/main';q

덧붙여서 나는 120 이상으로 설정한 적이 없었기 때문에, 눈치채지 못했다. 기본적으로는 default의 80 로 그다지 곤란하지 않은 세상.

솔직히, Prettier에 대해서는 혼잡하게 쓴 코드가 마음대로 성형되는 것 이상의 감상을 가지지 않았기 때문에, 「아무래도 one-liner로 하고 싶다」세의 스트레스를 이해하지 못했다. 꼭 없어요! (리뷰하고 싶지 않다고 생각했지만)

Prettier가 일하지 않도록

In prettier, print width is not a rule, it's actually an input into the algorithm used to print code. Due to this it is impossible to turn off. You can set it to a very high number (not recommended) or use//prettier -ignore comments to disable prettier on a chunk of code.
htps : // 기주 b. 코 m/p 레치에 r/p 레치에 r/이스에 s/3468
printWidth는 Prettier에 필요한 값이며 규칙이 아닙니다.
무효로 하는 것은 불가능하기 때문에, 극단적으로 높은 값을 지정하는지 (원치 않는 성형이 되기 쉬워지지만), // pretteir-ignore 를 사용해 주세요. gitignore syntax 에 .prettierignore 를 둘 수도 있다.

Ignoring Code

// prettier-ignore
@@ -17,42 +17,51 @@ import {
 } from "../components/collections/collection-dashboard/main";

 // several lines
-import {
-  CollectionDashboard,
-  DashboardPlaceholder
-} from "../components/collections/collection-dashboard/main";
+import { CollectionDashboard, DashboardPlaceholder } from '../components/collections/collection-dashboard/main';

// prettier-ignore 붙이면, 좋은 느낌에 해당 개소만 무시해 준다(JS의 경우, next-line라든지 범위 지정이라든지 하지 않아도 능숙하게 가는 바람).

대부분의 사람들은 한 줄이 너무 길지 않도록 노력하기 때문에 대부분의 코드는 80자 이하가됩니다. 엣지 케이스의 대응으로 일일이 설정을 바꾸고 있으면 룰이 의미를 위하지 않게 되므로, 코멘트로 대응하는 편이 좋을 것입니다. 극단적으로 긴 수치를 설정한 결과, 보통의 코드도 one-liner가 되어 「Prettier는 빌어 먹을」하고 불만이 오기도 합니다.

소기

What Prettier is not concerned about 에도 있지만, + 와 따옴표로 연결해 가는 계열은 성형 대상이 되면 세세하게 잘려 버리므로, template literal로 바꾸면 좋다.

// long html strings
-var quote_and_plus   = '<div id="' + widgetContentID + '" style="' + widgetContentStyles + '">' + '</div>';
+var quote_and_plus =
+     '<div id="' +
+     widgetContentID +
+     '" style="' +
+     widgetContentStyles +
+     '">' +
+     '</div>';
 var template_literal = `<div id="${widgetContentID}" style="${widgetContentStyles}"></div>`;

편집기에 오류가 발생하지 않음

변환되는 것 자체는 좋지만, 쓸 때에 에러가 나오면 신경이 쓰이는, 라고 의견도 있다.


Prettier 자체는 에러를 내지 않기 때문에, eslint-plugin-prettier 라든지 물고 있는 경우의, ESLint의 경고군요. 왜 rules 지정하면 제어할 수 있습니다.

     "es6": true
   },
   "rules": {
-    "prettier/prettier": "error"
+    "prettier/prettier": "warn"
   }
 }

이 기사는 Corne Cherry에서 썼습니다.