• css를 조금 더 아름답고 일관되게 작성해보자
• 기본 prettier 포맷팅을 사용하면 들여 쓰기를 예쁘게 고쳐준다
• 그런데 규칙 없이 나열된 속성들을 일관되게 포맷팅을 하고 싶은 욕구가 생겨서 찾아보았다
• 이런 것들은 직접 하는 것보다는 도구의 도움을 받는 게 훨씬 좋다고 생각한다

prettier-plugin-style-order

• (참고) 나는 scss로 작업했다

1
2
3
4

yarn add -D prettier-plugin-style-order

// postcss-scss 도 인스톨 하라고 메시지가 나옴
yarn add -D postcss-scss

• 이렇게 패키지를 설치하고,
• fonmat on save 옵션이 켜져 있다면,
• 아무 css 파일에서 저장을 해보면 순서가 아름답게 정렬되는 것을 알 수 있다
• 기존에 작업하던 것들을 일괄적으로 포맷팅 하고 싶다면
• npm script에 prettier 명령어로 원하는 경로의 css파일들을 지정해서 일괄 포맷팅 한다
• "cssSort": "prettier --write src/**/*.scss"

생각

• 이전에는 항상 css를 주먹구구 중에서도 주먹구구로 작성해왔는데,
• 그러지 않을 수 있겠다

• css property order, css property sort 이런 식으로 검색을 했었는데
• stylelint 등 여러 가지 css를 정렬하는 도구들이 있는 것 같았다
• 그런데 prettier을 사용하고 있기 때문에, 다른 거 쓰지 말고 prettier에서 플러그인을 깔아서 해결해 보자 하여 prettier-plugin-style-order를 설치해서 사용해 보았다

참고

• https://9elements.com/css-rule-order/
• https://github.com/brandon-rhodes/Concentric-CSS/blob/master/style3.css
• https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/

• 마크다운에서는 여러 라인 범위를 포맷팅하지 않도록 설정할 수 있다
• formatOnSave 를 사용해서 내용이 많은 마크다운을 저장할 때, 이미 포맷팅이 잘 되어있더라도
• 좀 오래걸리는 느낌이 있었다
• 그래서 포맷팅을 무시하는 설정을 알아보았다
• 기분탓인지 몰라도 쫌 빨라진 것 같다..?

markdown perttier ignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- prettier-ignore -->
Do   not    format   this

format this

<!-- prettier-ignore-start -->
| MY | AWESOME | AUTO-GENERATED | TABLE |
|-|-|-|-|
| a | b | c | d |
<!-- prettier-ignore-end -->

| MY  | AWESOME | AUTO-GENERATED | TABLE |
| --- | ------- | -------------- | ----- |
| a   | b       | c              | d     |

js perttier ignore

1
2
3
4

// prettier-ignore
let a=1

let b = 2;

• js 에서는 한개의 라인을 포맷하지않도록 설정할 수 있다

1
2
3
4
5
6

let c = [1, 2, 3];

let c = [
  //  <-- 주석 넣으면 펼쳐짐
  1, 2, 3,
];

• 중간에 주석을 넣어서 펼쳐지게 포맷팅할 수 있다

참고

• Ignoring Code · Prettier

방법 바로 보기

react typescirpt eslint prettier airbnb style guide 적용 방법은 여기로…
https://github.com/chinsun9/typescript-react-eslint-prettier-practice

TMI

상황

• 진짜 여러 튜토리얼을 따라해도 뭔가 잘 안됬다
• 차근차근 따라하기보다 세팅을 빨리 끝마치고 싶은 생각에 복붙을 시전했다
• 일단 뭔가 쫌 되야 이렇구나 생각할텐데 잘안되서 머리가 아팠다

문제 & 원인

vscode setting.json

• eslint없이 prettier 를 사용하면서 설정해둔 설정값
• format on save 이것때문에, 린트 이후에 prettier가 다시 코드를 포맷팅하는 문제

1
2
3
4
5
6

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

• 처음에는 이거를 둘다켜놨엇다
• 기존에 eslint에서 fix한거 formatOnSave가 다시 prettier 포맷터로 다시 포맷해서 생겼었다

.eslintrc.js

Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js. The file must be included in at least one of the projects provided.

• 이유를 모르겠으나. .js 방식으로하면 위 오류가 떠서 안됬다
• 그래서 단순하게 .json방식으로 바꾸었다. 그랬더니 해결됬다…

알게된 것

• eslint-config-prettier 를 통해 별도 .prettierrc 파일없이
• eslintrc에서 prettier 설정이 가능하다

• reportWebVitals.ts 이런 자동생성된 파일은 린트를 적용시킬 필요가없다
• 파일 최상단에 /* eslint-disable */를 적어 무시해주자

• 빨간줄이 생기면 희소식이다. 빨간줄 조차 안생기면 eslintrc 파일에 문제가 생긴거다
• vscode도 재시작해보자

• “source.fixAll.eslint”: true 설정으로 eslint에서 포맷팅을 실행할 수 있다

• 쓸모없다고 생각하는 룰은 그냥 꺼버리자
• 마우스를 올려서 어떤 룰인지 확인하고 .eslintrc > rules 에 해당 룰을 적고 0으로 세팅한다

세팅법 - 여기까지 리액트 프로젝트

https://github.com/chinsun9/typescript-react-eslint-prettier-practice

• readme.md에 설정하는 방법을 정리해두었다
• 커밋내역을 보면 명령어 입력 순서가 나와있으니 참고하면 좋을 것 같다

참고

• Create-React-App with TypeScript, ESLint, Prettier, and Github Actions | by Bryan Grill | Medium
• prettier/eslint-config-prettier

1
2
3
4
5
6

npx create-react-app my-react-app
cd my-react-app

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/chinsun9/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

yarn start

• 누군가 자동으로 세팅하는 스크립트를 제작해두었다
• 명령어 3개만 입력하면 세팅이 끝난다
• windows에서는 gitbash에서 해당 명령을 실행하면 된다
• 추가로 eslint 확장도구가 설치되어 있어야한다

• 추가로, prettier 확장도구를 통해 자동포맷팅을 사용하는 사람들은

1
2
3
4
5
6

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": false
}

• "editor.formatOnSave": false ; prettier 확장도구로 인한 포맷팅은 비활성화해주고,
• "source.fixAll.eslint": true ; eslint에서 포맷팅을 하도록한다

TMI

따라해도 나오는 오류

Replace onPerfEntry with (onPerfEntry)eslint (prettier/prettier)

• src/reportWebVitals.js 파일에서 1개의 파라미터만 받는 함수에 괄호로 묶어주라는 오류가 나올 것이다
• 이것만 고쳐주면 잘 동작한다

• 혹시 빨간줄이 계속남아있거나, 안된다면 vscode를 다시 실행해보자

계속된 세팅 실패

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

        leadingComments: [
          {
            type: 'Line',
            value: ' If you want to start measuring performance in your app, pass a function',
            start: 270,
            end: 344,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' to log results (for example: reportWebVitals(console.log))',
            start: 345,
            end: 406,
            loc: [SourceLocation],
            range: [Array]
          },
          {
            type: 'Line',
            value: ' or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals',
            start: 407,
            end: 481,
            loc: [SourceLocation],
            range: [Array]
          }
        ],
      }
    ],
    parent: null
  }
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-practice@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-practice@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\chin_\AppData\Roaming\npm-cache\_logs\2020-11-17T06_40_37_514Z-debug.log

• eslint-config-airbnb 만 설치하면 위 오류가 뜨면서 실행조차 안됬다
• 이유는 모르겠다

eslint-prettier-airbnb-react 포크

• karlhadwen/eslint-prettier-airbnb-react를 포크해서 내가 오류난 부분을 바꿔주었다
• Delete `␍`eslintprettier/prettier 문제였는데,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "rules": {
    // ...
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80,
        "endOfLine": "auto" // <-- 추가
      }
    ]
    // ...
  }
}

• "endOfLine": "auto"를 추가해어 해결하였다

.prettierrc 파일 불필요

• eslint-config-prettier 을 사용해서 prettierrc 파일없이 eslint 설정만으로도 가능하다고한다
• eslintrc.json에 rule 아래 prettier/prettier이 있는데, 여기에 내가 필요한 포맷팅 설정을 해두면된다

여기까지 리액트 프로젝트

• https://github.com/chinsun9/react-eslint-prettier-practice

참고

• 동영상 Setup ESLint, Prettier & Airbnb Style Guide in under 2 Minutes
• eslint-prettier-airbnb-react

1
2
3
4
5
6
7
8
9
10

{
  // ...
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

• settings.json에 추가시켜준다
• 저장할 때마다 자동으로 포맷팅되는 것을 확인할 수 있다

일괄적으로 포맷팅하기

• prettier 없이 개발했다가 코드 포맷팅을 일괄적으로 하고싶을 때가 있다

1
2
3
4
5
6
7

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "printWidth": 120,
  "tabWidth": 2
}

• .prettierrc 파일을 생성한다

npx prettier -w **/*.tsx

• terminal에 위 명령을 치면
• prettier가 일회성으로 설치되면서 지정한 확장자에 대해 포맷팅을 일괄적으로 실행해준다
• .prettierrc prettier config file을 참고해서 실행되니
• 원하는 디렉터리만, 또는 무시할 디렉터리, 파일들을 설정해서 사용할 수 있다

참고

• Prettier Configuration File