prettier-eslint, eslint 설정

모든 방식은 제가 문서를 보고 적용한 방식인데, 잘못 된 정보가 포함 되어 있을 수 있습니다.

모듈 설치

pnpm i -D husky eslint-plugin-vue lint-staged prettier-eslint prettier-eslint-cli eslint-config-prettier

pnpm 기준이지만, npm을 쓴다면 npm, yarn이라면 yarn으로 바꿔서 설치만 하면 된다. prettier-eslint 방식으로 설정 하는 이유는 기존 plugin 방식보다 속도가 더 빠르고, 가이드에서도 더 권장하는 방법이라 그렇다.

https://prettier.io/docs/en/integrating-with-linters.html

모듈 설명

husky

• git hook을 쉽게 실행 시켜 주는 역할을 한다. npm으로 git hook을 실행 할 수 있다.
  lint-staged
• git에서 추적하는 파일이 staged 상태인 경우, 해당 파일들에 접근 할 수 있도록 도와줌. (목록을 얻어온다.)
  eslint-config-prettier
• eslint 설정에 prettier를 확장 할 수 있도록 설정 할때, 필요로 한다.
  prettier-eslint
• prettier를 적용하고, eslint를 적용하도록 하는 툴
  prettier-eslint-cli
• prettier-eslint를 cli로 실행 할 수 있도록 해준다.
  eslint-plugin-vue
• eslint vue 관련 확장 설정 모듈

eslintrc.js

  "extends": [
    ..
    "prettier" // 마지막에 추가 하는 것이 좋다. eslint-config-prettier 모듈을 설치 해야 한다.
  ],

prettierrc

https://prettier.io/docs/en/options.html

{  
    "singleQuote": true,  
    "semi": false,  
    "useTabs": false,  
    "tabWidth": 4,  
    "trailingComma": "all",  
    "arrowParens": "avoid",  
    "bracketSpacing": true,  
    "proseWrap": "preserve",  
    "requirePragma": false,  
    "vueIndentScriptAndStyle": true,  
    "endOfLine": "auto",  
    "overrides": [  
        {  
            "files": "*.vue",  
            "options": {  
                "parser": "vue"  
            }  
        }  
    ]  
}

vue를 쓰고 있어서 vue 기준으로 설정 했다.

https://github.com/prettier/prettier/issues/7153 를 보면 https://prettier.io/docs/en/options.html#html-whitespace-sensitivity 설정하도록 가이드 한다.

package.json script 설정

"scripts": {  
"format": "prettier-eslint --write \"src/**/*.{vue,ts}\"",  
},
"husky": {  
    "hooks": {  
        "pre-commit": "lint-staged"  
    }  
},  
"lint-staged": {  
    "*.{ts,vue,css}": [  
        "prettier-eslint --write",  
        "git add"  
    ]
},

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. 오류 관련

위 오류를 해결 하는 방법은 3가지가 존재한다.
ref. https://github.com/nestjs/nest/issues/4900

1. eslintrc.js -> eslintrc.ts
2. parserOptions 하위에 createDefaultProgram: true를 추가한다.
3. ignorePatterns: ['.eslintrc.js'] 추가