[TIL] 2022년 01월 21일 TIL - Eslint - Typescript

이번 시간에 배운 과정은 협업시 편리하게 사용할 수 있는 Eslint 에대해 배웠다.

 

• 타입스크립트를 엄격하게 관리하는 도구 - strict
• API로 받는 데이터 타입은 ? - graphql -codepen
• 협업하는데 규칙은 있어야지! - eslint / prettier 
• 규칙을 지키지 않는 사람은 Push할 권리도 없다! - husky

API 응답데이터를 GRAPHQL-CODEPEN 이라 한다. 이것은 직접 입력 없이 명령어  한번에 정의해준다.

 

 

기존의 fetchBoard를 gql을 사용해서 불러오는 방식에서 fetchBoard가 담긴 types.ts 파일에 정의해 Import해서 

불러올 수 있다. types.ts에서는 graph-ql의 fetchBoard에 types가 정의되어있어 Pick함수로 Query를 불러올 수 있다.

 

코드 린터와 코드 포멧터

코드 린터는 eslint이고, 이곳에서 import 하는 순서와 == 사용을 금지하고 ===를 필수적으로 사용할 수 있도록 

규칙을 정해줄 수 있다.

 

코드 포멧터는 prettier이며, 코드를 저장할때 자동으로 코드정렬을 도와주고 코드 띄어쓰기를 2칸까지 해주거나

설정한 길이가 맞지 않거나 길이가 넘으면 자동으로 줄바꿈을 도와준다.

 

eslint 초기 세팅법

 

npm install eslint --save -dev

eslint를 사용하기 위해서는 우선 적으로 라이브러리 설치가 필요하다. 

두번째로는 npx를 이용해 eslint 파일을 생성해주어야 한다.

npx eslint --init

위명령어를 사용하면 선택창이 뜸 

? How would you like to configure ESLint? Answer questions about your style
// ESLINT 를 어떻게 설정하시기를 원하신가요? 당신의 스타일에 대해 대답을 해주세요
? Are you using ECMAScript 6 features? 
// ECMAScript 6 을 사용하고 계시나요?
? Are you using ES6 modules?
// ES6 모듈을 사용하고 계시나요?
? Where will your code run? 
// 코드는 어디서 실행되나요? 
? Do you use CommonJS?
// CommonJS 를 사용하시나요?
? Do you use JSX? Yes
// JSX를 사용하시나요?
? Do you use React? Yes
// React를 사용하시나요?
? What style of indentation do you use? 
// indentation (들여쓰기)는 어떤 스타일로 사용하시나요? 
// 참고: 여기서는 space 또는 tab 으로 대답하시면 될 거에요~ 
? What quotes do you use for strings?
// string 이용시 따음표를 몇개 사용하시나요? 
// 한개 (Single) 또는 두개 (Double) 로 대답하시면 됩니다 
? What line endings do you use?
// line ending 은 어떤 것을 이용하나요? 
// 참고: 아마 주로 Windows 방식을 많이들 이용하실테니 Windows 라고 대답하셔도 무관할겁니다!
? Do you require semicolons?
// 쉼표는 필수인가요?
? What format do you want your config file to be in?
// config 파일의 포멧은 어떻게 할까요? 
[출처] ESLint 설정 및 사용하기|작성자 쿠폰파파

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: ['plugin:react/recommended', 'standard', 'prettier'],

    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaFeatures: {
            jsx: false,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    plugins: ['react', '@typescript-eslint'],
    rules: {
        'react/react-in-jsx-scope': 'off',
        'react/props-types': 'off',
    },
};

.eslintrc.json 파일이 생기는데 여기서 exports로 규칙을 생성해줄 수 있다.

 

typescript에서 eslintrc를 사용하면 기존에 js코드에서는 scope 오류가 발생한다, 이 문제를 해결해주기위해

.eslintrc.js파일에서 scope를 off로 해주어야 에러가 발생하지 않는다.