<div id="readability-page-1" class="page"><div><p>모든 방식은 제가 문서를 보고 적용한 방식인데, 잘못 된 정보가 포함 되어 있을 수 있습니다.</p>
<h2>모듈 설치</h2>
<pre><code>pnpm i -D husky eslint-plugin-vue lint-staged prettier-eslint prettier-eslint-cli eslint-config-prettier</code></pre>
<p>pnpm 기준이지만, npm을 쓴다면 npm, yarn이라면 yarn으로 바꿔서 설치만 하면 된다. prettier-eslint 방식으로 설정 하는 이유는 기존 plugin 방식보다 속도가 더 빠르고, 가이드에서도 더 권장하는 방법이라 그렇다. </p>
<p><a href="https://prettier.io/docs/en/integrating-with-linters.html">https://prettier.io/docs/en/integrating-with-linters.html</a></p>
<h3>모듈 설명</h3>
<p>husky </p>
<ul>
<li>git hook을 쉽게 실행 시켜 주는 역할을 한다. npm으로 git hook을 실행 할 수 있다.<br>lint-staged</li>
<li>git에서 추적하는 파일이 staged 상태인 경우, 해당 파일들에 접근 할 수 있도록 도와줌. (목록을 얻어온다.)<br>eslint-config-prettier</li>
<li>eslint 설정에 prettier를 확장 할 수 있도록 설정 할때, 필요로 한다.<br>prettier-eslint</li>
<li>prettier를 적용하고, eslint를 적용하도록 하는 툴<br>prettier-eslint-cli</li>
<li>prettier-eslint를 cli로 실행 할 수 있도록 해준다.<br>eslint-plugin-vue</li>
<li>eslint vue 관련 확장 설정 모듈 </li>
</ul>
<h2>eslintrc.js</h2>
<pre><code>  "extends": [
    ..
    "prettier" // 마지막에 추가 하는 것이 좋다. eslint-config-prettier 모듈을 설치 해야 한다.
  ],</code></pre><h2>prettierrc</h2>
<p><a href="https://prettier.io/docs/en/options.html">https://prettier.io/docs/en/options.html</a></p>
<pre><code>{  
    "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"  
            }  
        }  
    ]  
}</code></pre>
<p>vue를 쓰고 있어서 vue 기준으로 설정 했다. </p>
<p><a href="https://github.com/prettier/prettier/issues/7153">https://github.com/prettier/prettier/issues/7153</a> 를 보면 <a href="https://prettier.io/docs/en/options.html#html-whitespace-sensitivity">https://prettier.io/docs/en/options.html#html-whitespace-sensitivity</a> 설정하도록 가이드 한다. </p>
<h2>package.json script 설정</h2>
<pre><code>"scripts": {  
"format": "prettier-eslint --write \"src/**/*.{vue,ts}\"",  
},
"husky": {  
    "hooks": {  
        "pre-commit": "lint-staged"  
    }  
},  
"lint-staged": {  
    "*.{ts,vue,css}": [  
        "prettier-eslint --write",  
        "git add"  
    ]
},</code></pre>
<h2>Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. 오류 관련</h2>
<p>위 오류를 해결 하는 방법은 3가지가 존재한다.<br>ref. <a href="https://github.com/nestjs/nest/issues/4900">https://github.com/nestjs/nest/issues/4900</a></p>
<ol>
<li>eslintrc.js -&gt; eslintrc.ts</li>
<li>parserOptions 하위에 <code>createDefaultProgram: true</code>를 추가한다.</li>
<li>ignorePatterns: ['.eslintrc.js'] 추가</li>
</ol></div></div>

Seungdols Company

seungdols

모든 방식은 제가 문서를 보고 적용한 방식인데, 잘못 된 정보가 포함 되어 있을 수 있습니다. 모듈 설치 pnpm i -D husky eslint-plugin-vue lint-staged prettier-eslint prettier-eslint-cli eslint-config-prettier pnpm 기준이지만, npm을 쓴다면 npm, yarn이라면 yarn으로 바꿔서 설치만 하면 된다. prettier-eslint 방식으로 설정 하는 이유는 기존..            
카카오스토리
트위터
페이스북
'프로그래밍 > JavaScript' 카테고리의 다른 글
npm을 pnpm 으로 바꾸면서 발생한 문제점 (--no-install Not Found)  (0)
2023.03.23
VueJS 학습 - TypeScript 사용  (0)
2022.10.13
VueJS 학습 - Component  (0)
2022.10.13
VueJS 학습 - Basic  (0)
2022.10.13
vuejs minimizer 설정 변경  (0)
2022.09.16

prettier-eslint, eslint 설정

댓글