ESLint, Prettier, ESLint-plugin, ESLint-config, jsconfig.json

 

VSCode 마켓플레이스에서 ESLint와 Prettier 를 설치하고,

 

npm에서 ESLint 설치한다.

 

.prettierrc와 .jsconfig.json 작성(import할때 경로를 자동으로 추천해준다 ) 하고

 

ESLint-plugin-react-hook (hooks사용시 ESLint로 규칙을 도와줌) 을 설치할 것이다

 

마지막으로 .eslintrc.json 에서 Prettier 설정과, hook 설정을 적용할 것이다

 

---

# VSCode

 

마켓플레이스에서

Prettier - Code formatter ( 제작자 Esben Petersen ) 설치

수동사용법 : F1 > format 입력 엔터

자동사용법 : 파일 > 기본 설정 > 설정 > format on save 검색 >파일 저장할때마다 코드 자동 저장됨

ESLint ( 제작자 Dirk Baeumer ) 설치

보기 > 문제 로 하단에 창 활성화

 

---

 

# npm eslint 설치

 

$ yarn add -dev eslint

 

( $ npm install eslint --save-dev )

 

$ yarn run eslint --int

 

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JSON
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint@latest
? Would you like to install them now with npm? Yes
Installing eslint-plugin-react@latest, eslint@latest

 

---

 

# .prettierrc

 

프로젝트 루트 폴더에 파일 생성하고

 

{ 

  "singleQuote": true, 

  "semi": true, 

  "useTabs": false, 

  "tabWidth": 2, 

  "trailingComma": "all", 

  "printWidth": 80 

}

 

---

 

# .jsconfig.json

 

프로젝트 루트 폴더에 파일 생성하고

 

{ 

  "compilerOptions": { 

    "target": "es6" 

  } 

}

 

# .eslintrc.json

{

    "env": {

        "browser": true,

        "es6": true

    },

    "extends": [

        "eslint:recommended",

        "plugin:react/recommended",

        "plugin:react-hooks/recommended",

        "prettier"

    ],

    "globals": {

        "Atomics": "readonly",

        "SharedArrayBuffer": "readonly"

    },

    "parserOptions": {

        "ecmaFeatures": {

            "jsx": true

        },

        "ecmaVersion": 2018,

        "sourceType": "module"

    },

    "plugins": [

        "react"

    ],

    "rules": {

        "no-unused-vars": "warn",

        "no-console": "off"

    }

}

 

사용되지 않는 const 값에 대한 오류를 rules에서 비활성화 하였다

그리고  ESLint기본설정에서 console.log 사용을 비추천하고있는데, 이 규칙도 비활성화함.