Next.js에서 Pretter 가져오기 설정

일 때문에.js를 사용했고 코드 성형용 Prettier를 사용했습니다.
도입 방법과 설정 방법을 총결하였다.
대부분의 사람들이 에스린트와 함께 사용하고 있다고 생각해서 어울리는 설정 방법을 총결하였다.

설치하다.

eslint-config-prettier에 가입하면 Eslint와 덮어쓰는 규칙에 대해 Prepter를 우선적으로 사용할 수 있습니다.

# npmの場合
$ npm install -D prettier eslint-config-prettier

# yarnの場合
$ yarn add -D prettier eslint-config-prettie

Proettier 설정

그런 다음 Proettier를 설정합니다.
없으면.prettierrc 프로젝트 경로에서 직접 만드십시오..prettierrc 또는 .prettier.json.
파일 형식은 json을 제외하고javascript의 파일도 지원합니다.파일 이름이 prettier.config.js인지 .prettierrc.js인지.
파일을 만들지 않고 파일을 설정하지 않으면 다음 링크의 기본 파일이 적용됩니다.
https://prettier.io/docs/en/options.html
저 혼자 만들었어요javascript 형식prettier.config.js.
각자의 취향에 따라 설정 내용을 바꾸세요.자신의 상황은 다음과 같다.
prettier.config.js

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  jsxSingleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: "always",
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  endOfLine: "lf",
  embeddedLanguageFormatting: "off",
}

prettierignore 만들기

성형을 자동으로 저장할 때 대상 이외의 파일을 설정합니다.
.prettierignore

*.md

.eslintrc.json 설정

Eslint를 사용할 때 Priettier의 규칙이 있으면 Priettier의 규칙을 우선적으로 설정합니다.
.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"]
}

프로젝트 구성

다음은 상기prettier.config.js에서 설정한 항목에 대해 설명한다.

printWidth

반환할 행의 길이를 지정합니다.

기본 80

tabWidth

들여쓰기 공간 수 지정

기본값은 2

useTabs

탭에 공백이 아닌 탭을 축소해서 탭을 적용합니다.

기본값은 가짜

semi

문장은 마지막에 분호를 추가한다.진짜를 설정해서 마지막에 번호를 추가합니다.

기본값은 트루

false로 설정하면 번호 없이 잘못된 부분에만 번호를 추가합니다.

singleQuote

큰따옴표 대신 작은따옴표를 사용합니다.JSX quotes 항목을 무시합니다.
설정true을 통해 단과트를 사용합니다.

기본값은 가짜

quoteProps

객체 등록 정보를 참조할 때 수정됩니다.

as-need: 필요할 때만 대상 속성을 인용부호로 묶는다(기본값)

connsistent: 대상의 최소한의 속성에 인용부호가 필요하면 모든 속성을 인용부호로 묶는다

preserve: 입력한 인용부호 존중

jsxSingleQuote

JSX에서는 더블 쿼터 대신 싱글 쿼터를 사용합니다.

기본값은 가짜

trailingComma

끝의 쉼표를 설정합니다.

es5:ES5에서 유효한 끝의 쉼표(대상, 배열 등)

none: 끝에 쉼표를 붙이지 않음(기본값)

all: 가능한 한 끝에 쉼표(함수 파라미터 포함)

bracketSpacing

대상 소양각 안쪽에 빈칸을 남기다

기본값은 트루

bracketSameLine

여러 줄 요소의 마지막 행에 >를 배치합니다.다음 줄에 두다.

기본값은 가짜

arrowParens

아로 함수의 ()는 생략할 수 있어도 자주 써야 한다.

항상 쓰기 ()

avoid: 생략 가능 시 쓰지 않음()(기본값)

proseWrap

mardown의 반환 설정

always: Print Width에서 지정한 값을 초과하면 폴백

never: 되돌리지 않음

preserve: 직접 폴백(기본값)

htmlWhitespaceSensitivity

HTML 파일의 글로벌 공백 민감도 지정하기

css:display 속성의 기본값 존중(기본값)

strict: 공백 구분

ignore: 공백을 구분하지 않음

endOfLine

줄 바꿈 문자 코드 지정

lf: Linux, MacOS,git 창고에는 일반적으로 선만 송전(\n)

clef: Windows에서 흔히 볼 수 있는 슬라이더 리턴 + 피드백 문자(\r\n)

cr: 캐리지 리턴 문자만 (\r)

auto: 기존 줄 끝 유지(기본값)

embeddedLanguageFormatting

Preettier가 포함된 파일의 참조 코드를 포맷할지 여부를 조정합니다

off: 끼워 넣은 코드를 자동으로 포맷하지 않음

auto:Proettier가 자동으로 식별할 수 있는 경우 삽입 코드를 포맷합니다(기본값)

VScode 사용 시

VScode를 사용하는 사람이라면 다음 플러그인을 삽입하여 파일을 저장할 때 자동으로 성형할 수 있습니다.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
※ 그나저나 Eslint 플러그인이 있으니 함께 넣는 것을 추천합니다.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
여기에 규칙을 다음 순서대로 적용합니다.

덮어쓴 경우 Preettier

우선

파일을 저장할 때 자동으로 형태 지정

.md 제외

VScode의 기본 검사 기능이 있으므로 객체인 CSS 등은 제외됩니다.
settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.validate": ["html", "javascriptreact", "typescriptreact"],
  "css.validate": false,
  "scss.validate": false,
}

참고 자료

https://qiita.com/takeshisakuma/items/bbb2cd2f1c65de70e363