<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/React">React</a></p><h2>[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)</h2>
                    <p><cite>
                        <span>JayLee</span>
                    </cite>
                </p></div>
                <p><time>2021. 9. 13. 16:25</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <figure><p><span data-url="https://blog.kakaocdn.net/dn/yHccG/btreX2pl9JO/L98ULkeMOGKtnnZpZTrKBk/img.jpg" data-lightbox="lightbox" data-origin-width="1280" data-origin-height="720"><img src="https://blog.kakaocdn.net/dn/yHccG/btreX2pl9JO/L98ULkeMOGKtnnZpZTrKBk/img.jpg"></span><span data-url="https://blog.kakaocdn.net/dn/dzQszI/btreOs4bqMy/ZafMh5aCBPq3atToTWeql1/img.png" data-lightbox="lightbox" data-origin-width="1200" data-origin-height="500"><img src="https://blog.kakaocdn.net/dn/dzQszI/btreOs4bqMy/ZafMh5aCBPq3atToTWeql1/img.png"></span></p></figure>
<h2 data-ke-size="size26">ESLint란?</h2>
<p data-ke-size="size16">JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구.</p>

<h2 data-ke-size="size26">Prettier란?</h2>
<p data-ke-size="size16">코드 포멧터(Code Formatter)</p>

<h2 data-ke-size="size26">Next.js 프로젝트에 ESLint/Prettier 적용하기 (VSCode)</h2>
<h3 data-ke-size="size23">프로젝트 생성</h3>
<pre id="code_1631517377649" data-ke-language="shell" data-ke-type="codeblock"><code>npx create-next-app --typescript</code></pre>
<p data-ke-size="size16">저는 typescript를 사용할 예정이므로 —typescript 옵션을 추가했습니다.</p>

<h3 data-ke-size="size23">ESLint 설치</h3>
<pre id="code_1631517405671" data-ke-language="shell" data-ke-type="codeblock"><code>npm i eslint --save-dev</code></pre>

<h3 data-ke-size="size23">ESLint 설정하기</h3>
<pre id="code_1631517476182" data-ke-language="shell" data-ke-type="codeblock"><code>eslint --init</code></pre>
<p data-ke-size="size16">위 명령어를 터미널에 실행하면 eslint 설정이 시작됩니다. 여러가지 질문들이 나오는데, 저는 아래와 같이 설정했습니다.</p>
<pre id="code_1631517463699" data-ke-language="shell" data-ke-type="codeblock"><code>❯ eslint --init 
✔ How would you like to use ESLint? · problems 
✔ What type of modules does your project use? · esm 
✔ Which framework does your project use? · react 
✔ Does your project use TypeScript? · Yes 
✔ Where does your code run? · browser 
✔ What format do you want your config file to be in? · JSON 

The config that you've selected requires the following dependencies: 
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest 
✔ Would you like to install them now with npm? · Yes</code></pre>
<p data-ke-size="size16">여기까지 하면 eslint-plugin-react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser는 기본적으로 설치가 됩니다.</p>
<p data-ke-size="size16">추가적으로 몇 가지 eslint-plugin을 설치해봅니다. 플러그인 사용 여부는 프로젝트에 따라 다를 수 있기 때문에 본인의 기호(?)에 맞게 설치하시면 됩니다.</p>
<pre id="code_1631517494306" data-ke-language="shell" data-ke-type="codeblock"><code>npm install eslint-plugin-react-hooks --save-dev 
npm install eslint-plugin-prettier --save-dev 
npm install eslint-plugin-import --save-dev</code></pre>

<p data-ke-size="size16"><span>eslint —init을 통해 .eslintrc.json 파일을 생성된 것을 확인할 수 있습니다. 설치한 플러그인들을 사용할 수 있도록 설정을 수정합니다. 저는 아래와 같이 설정했습니다.</span></p>
<pre id="code_1631517512328" data-ke-language="javascript" data-ke-type="codeblock"><code>{ 
  "env": { 
    "browser": true, 
    "es2021": true, 
    "jest": true
  }, 
  "extends": [ 
    "plugin:react/recommended", 
    "plugin:react-hooks/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "plugin:prettier/recommand" 
  ], 
  "parser": "@typescript-eslint/parser", 
  "parserOptions": { 
    "ecmaFeatures": { 
      "jsx": true 
    }, 
    "ecmaVersion": 12, 
    "sourceType": "module" 
  }, 
  "plugins": [ 
    "react", 
    "react-hooks", 
    "@typescript-eslint", 
    "prettier", 
    "import" 
  ], 
  "rules": { 
    "arrow-body-style": "error", 
    "prefer-arrow-callback": "off", 
    "no-var": "error", 
    "no-dupe-keys": "error", 
    "react/prop-types": "off" 
  } 
}</code></pre>
<h3 data-ke-size="size23">Prettier 설정하기</h3>
<p data-ke-size="size16">먼저 프로젝트에 .prettierrc 파일을 생성합니다. 저는 아래와 같이 세팅했습니다.</p>
<pre id="code_1631517679213" data-ke-language="javascript" data-ke-type="codeblock"><code>{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}</code></pre>

<ul data-ke-list-type="disc">
<li>문자열에 홑따음표 사용(')</li>
<li>코드는 세미콘론으로 끝나야함.</li>
<li>tab대신 스페이스 사용</li>
<li>들여쓰기 스페이스 2칸 사용</li>
<li>객체나 배열에서 맨 마지막 요소에 쉼표를 붙임</li>
<li>한줄이 80자를 넘지 않음</li>
</ul>
<h2 data-ke-size="size26">VSCode 설정</h2>
<h3 data-ke-size="size23">Extension 설치</h3>
<figure><p><span data-url="https://blog.kakaocdn.net/dn/zT97o/btreY1QZ56u/IRH0c9d3r5vp0xAKZAnxsK/img.png" data-lightbox="lightbox" data-origin-width="1228" data-origin-height="416" data-filename="스크린샷 2021-09-13 오전 9.48.19.png"><img src="https://blog.kakaocdn.net/dn/zT97o/btreY1QZ56u/IRH0c9d3r5vp0xAKZAnxsK/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/pqXf3/btreYntfTvd/8Nvby8ByuDDrjLF5tmJbMk/img.png" data-lightbox="lightbox" data-origin-width="1046" data-origin-height="374" data-filename="스크린샷 2021-09-13 오전 9.47.19.png"><img src="https://blog.kakaocdn.net/dn/pqXf3/btreYntfTvd/8Nvby8ByuDDrjLF5tmJbMk/img.png"></span></p></figure>
<h3 data-ke-size="size23">Setting</h3>
<p data-ke-size="size16">Code → Preference → Settings</p>
<figure data-origin-width="1468" data-origin-height="204" data-filename="스크린샷 2021-09-13 오전 11.16.02.png" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/rCCKQ/btreLDLqIDA/6C118NYrapV94WHDkGUF9k/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/rCCKQ/btreLDLqIDA/6C118NYrapV94WHDkGUF9k/img.png" data-origin-width="1468" data-origin-height="204" data-filename="스크린샷 2021-09-13 오전 11.16.02.png" data-ke-mobilestyle="widthOrigin"></span></figure><figure><p><span data-url="https://blog.kakaocdn.net/dn/bhJcAv/btreOMVr365/yl0nsIjuqS0WAF9BrzrY11/img.png" data-lightbox="lightbox" data-origin-width="714" data-origin-height="176" data-filename="스크린샷 2021-09-13 오전 11.16.48.png"><img src="https://blog.kakaocdn.net/dn/bhJcAv/btreOMVr365/yl0nsIjuqS0WAF9BrzrY11/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/1tNmP/btreMvzCXE9/fHIITNSCOVHCA3Dj0wzkHk/img.png" data-lightbox="lightbox" data-origin-width="636" data-origin-height="140" data-filename="스크린샷 2021-09-13 오전 11.17.17.png"><img src="https://blog.kakaocdn.net/dn/1tNmP/btreMvzCXE9/fHIITNSCOVHCA3Dj0wzkHk/img.png"></span></p></figure><figure data-origin-width="886" data-origin-height="222" data-filename="스크린샷 2021-09-13 오전 11.18.20.png" width="404" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/cRsOPg/btreTJc0Ywu/gyxNxdmriwkzzHkvKj6p9k/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/cRsOPg/btreTJc0Ywu/gyxNxdmriwkzzHkvKj6p9k/img.png" data-origin-width="886" data-origin-height="222" data-filename="스크린샷 2021-09-13 오전 11.18.20.png" width="404" data-ke-mobilestyle="widthOrigin"></span></figure>

                                                            
                                
											
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

Hello Jay's Programming World!

ESLint란?
JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구.
 
Prettier란?
코드 포멧터(Code Formatter)
 
Next.js 프로젝트에 ESLint/Prettier 적용하기 (VSCode)
프로젝트 생성
npx create-next-app --typescript
저는 typescript를 사용할 예정이므로 —typescript 옵션을 추가했습니다.
 
ESLint 설치
npm i eslint --save-dev
 
ESLint 설정하기
eslint --init
위 명령어를 터미널에 실행하면 eslint 설정이 시작됩니다. 여러가지 질문들이 나오는데, 저는 아래와 같이 설정했습니다.
❯ eslint --init 
✔ How would you like to use ESLint? · problems 
✔ What type of modules does your project use? · esm 
✔ Which framework does your project use? · react 
✔ Does your project use TypeScript? · Yes 
✔ Where does your code run? · browser 
✔ What format do you want your config file to be in? · JSON 
The config that you've selected requires the following dependencies: 
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest 
✔ Would you like to install them now with npm? · Yes
여기까지 하면 eslint-plugin-react, @typescript-eslint/eslint-plugin, @typescript-eslint/parser는 기본적으로 설치가 됩니다.
추가적으로 몇 가지 eslint-plugin을 설치해봅니다. 플러그인 사용 여부는 프로젝트에 따라 다를 수 있기 때문에 본인의 기호(?)에 맞게 설치하시면 됩니다.
npm install eslint-plugin-react-hooks --save-dev 
npm install eslint-plugin-prettier --save-dev 
npm install eslint-plugin-import --save-dev
 
eslint —init을 통해 .eslintrc.json 파일을 생성된 것을 확인할 수 있습니다. 설치한 플러그인들을 사용할 수 있도록 설정을 수정합니다. 저는 아래와 같이 설정했습니다.
{ 
  "env": { 
    "browser": true, 
    "es2021": true, 
    "jest": true
  }, 
  "extends": [ 
    "plugin:react/recommended", 
    "plugin:react-hooks/recommended", 
    "plugin:@typescript-eslint/recommended", 
    "plugin:prettier/recommand" 
  ], 
  "parser": "@typescript-eslint/parser", 
  "parserOptions": { 
    "ecmaFeatures": { 
      "jsx": true 
    }, 
    "ecmaVersion": 12, 
    "sourceType": "module" 
  }, 
  "plugins": [ 
    "react", 
    "react-hooks", 
    "@typescript-eslint", 
    "prettier", 
    "import" 
  ], 
  "rules": { 
    "arrow-body-style": "error", 
    "prefer-arrow-callback": "off", 
    "no-var": "error", 
    "no-dupe-keys": "error", 
    "react/prop-types": "off" 
  } 
}
Prettier 설정하기
먼저 프로젝트에 .prettierrc 파일을 생성합니다. 저는 아래와 같이 세팅했습니다.
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}
 
문자열에 홑따음표 사용(')
코드는 세미콘론으로 끝나야함.
tab대신 스페이스 사용
들여쓰기 스페이스 2칸 사용
객체나 배열에서 맨 마지막 요소에 쉼표를 붙임
한줄이 80자를 넘지 않음
VSCode 설정
Extension 설치
Setting
Code → Preference → Settings

[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)

댓글