Webstorm에 Eslint 적용하기(설정)

프로젝트 웹 개발 코드품질 향상을 위해 포맷 맞추기용 ESLint 사용하자

사용하는 IDE인 Webstorm에 적용해보자

 

 

# 사전조건

 

1. npm i -D eslint ... 로 설치 (react 등 프로젝트에 맞게 설치)

{
  ...,
  
  "devDependencies": {
    "eslint": "^8.11.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.3.0"
  }
 
}

 

2. .eslintrc 파일 작성

{
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    ...
  ],
  "plugins": [
    "import",
    "react-hooks"
  ],
  "rules": {
	...
  }
}

 

# Webstorm 설정

 

(MacOS 기준)

 

1.  Settings/Preferences dialog (⌘ ,) 로 이동

2.  메뉴 진입 : Languages and Frameworks > JavaScript > Code Quality Tools > ESLint

 

3. Manual ESLint configuration 선택하여 적용

 

# 적용 여부 확인

 

적용 후 작성했던 샘플 소스를 보면 빨간색 경고가 있다.

처리해주자.

 

끝