express 프로젝트 설정하기 - 근데 이제 pre-commit에 eslint와 prettier를 곁들인

0. Requirements

• nvm이든 뭐든 일단 node가 설치되어있어야 합니다.
• 저는 nvm use --lts 로 16.15.1을 사용했습니다.
• 당연히 편집기도 필요합니다.(vscode, vim, ...)

1. express generator로 프로젝트 생성

순서대로 터미널에서 입력합니다.

1. npm install -g express-generator
2. express {님께서 만드실 앱의 이름} --view=pug
3. cd 앱이름
4. git init

2. .gitignore 생성 및 내용 추가

.gitignore라는 파일을 만들어 아래 내용을 추가하고 저장합니다.

node_modules
package-lock.json

3. 필요한 패키지 설치

아래 내용을 터미널에서 입력합니다. (한줄이니까 그냥 npm부터 eslint-config-prettier까지 복사해서 넣으세요)
npm install --save-dev eslint prettier husky@4 lint-staged eslint-config-prettier

4. eslint 초기화

npx eslint —init를 터미널에서 입력합니다.
그러면 선택할 게 엄청 많은데 제가 고른 걸 참고하셔도 좋고, 본인의 상황에 맞는 적절한 셋팅을 하시면 됩니다.

제가 고른 선택지들은...

1. To check syntax, find problems, and enforce code style
2. JavaScript modules
3. None of these
4. No
5. Browser, Node
6. Use popular guide
7. Airbnb
8. JavaScript
9. Yes
10. npm

5. eslintrc.js 내용 추가

4번이 정상적으로 진행되었다면, eslintrc.js라는 이름의 파일이 생성됩니다.
파일을 열어 extends의 뒤에 'prettier'를 추가해줍니다. 그러면 아래처럼 됩니다.
extends: ['airbnb-base', 'prettier']

6. .prettierrc 생성

eslintrc.js와 같은 경로에 .prettierrc를 생성해줍니다.
그리고 아래 내용을 붙여넣습니다.
(저도 잘 모릅니다. 적절한 거 검색해다 넣으세요.)

{
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "jsxSingleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "endOfLine": "auto"
}

7. package.json에 내용 수정 및 추가

package.json을 잘 보시면 scripts라는 key에 붙어있는 json형태의 정보가 있을 텐데요, start밑에 아래 내용을 넣어줍니다.

    "eslint": "./node_modules/.bin/eslint --fix",
    "format": "prettier --write"

그 다음엔 package.json의 맨 밑에 냅다 복붙해주세요.
그렇다고 완전 맨 밑이 아니고, 파일 전체를 아우르는 {} 안에는 들어가있어야 합니다.

    "husky": {
        "hooks": {
            "pre-commit": "lint-staged --no-stash"
            }
        },
    "lint-staged": {
        "*.{js,jsx}": [
            "npm run eslint"
            ]
        }

끝나면 package.json은 대충 이런 느낌이 됩니다.

끝

앞으로 커밋을 할 때, 알아서 eslint와 prettier를 적용합니다. 
(통과못하면 커밋 안 됨)

팀원분들은 이렇게 설정해서 푸시된 저장소를 clone한 후에 npm install만 하면 편하게 이용할 수 있습니다.

이제 협업하면서 좀 더 보기 좋은 코드를 볼 수 있겠죠?

우여곡절 로그

--save-dev가 뭐지

• 개발환경에서만 쓰이는 패키지를 따로 관리하기 위해 쓰는 플래그
• product용으로 build 할 때는 안 들어가게(경량, 보안, ..)

어 뭐야 왜 검사 안 하고 바로 커밋되지

문제 상황: 허스키를 설치했는데 pre-commit hook 설정이 안 되어있었다
원인: git init을 먼저 하고 install 했어야 함 (git이 있어야 hook을 설정하지 바보야)
해결방법: node_modules폴더 지우고 npm install 다시 하면 끗.

 

참고한 글

https://shiningjean.tistory.com/86

husky , lint-staged로 git hook하기 - 컨벤션 세팅

https://velog.io/@yrnana/prettier%EC%99%80-eslint%EB%A5%BC-%EA%B5%AC%EB%B6%84%ED%95%B4%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

prettier와 eslint를 구분해서 사용하자

https://gist.github.com/estorgio/e8bcaa8e87d0fcdcf85fdf598956e34c

Setting up Prettier and ESLint with pre-commit hook