Webstorm(웹스톰) Eslint 적용하기

Webstorm(웹스톰) Eslint 적용하기

eslint를 적용하면 최신 코드 스타일, fm스타일로 자동으로 바꾸어주고 최신 기능을 익히는데 도움이 많이 된다. 특히 자바스크립트는 es6스타일을 익히는데 도움이 많이 된다.

또한 좋은 코드를 추천 해주기 때문에 성능 향상 효과가 있다.

space를 2로 할 때 이 설정을 해준다.

https://intellij-support.jetbrains.com/hc/en-us/community/posts/207062575-JSHint-Tabs-Mixed-with-Spaces-Format-Code

특정 rule를 off하려면

이렇게 한다.

1. 아래 플러그인들을 설치한다.

"babel-eslint": "^7.2.3",
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-airbnb-base": "^11.3.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-react": "^7.3.0"

이건 package.json전문이다.

package.json

{
  "name": "nodejs_example_200",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "cheerio-httpcli": "^0.7.0",
    "express": "^4.15.4",
    "http": "0.0.0",
    "moment": "^2.18.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "eslint": "^4.5.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-config-airbnb-base": "^11.3.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-react": "^7.3.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Kyeongrok/nodejs_example_200.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Kyeongrok/nodejs_example_200/issues"
  },
  "homepage": "https://github.com/Kyeongrok/nodejs_example_200#readme"
}
 

2. .eslintrc.js 을 만든다.

npm i -g eslint

eslint --init

을 하면 된다.

.eslintrc.js

{
    "extends": "airbnb-base",
    "rules":{
        "linebreak-style": 0
    }
}

난 에어비엔비 스타일을 적용 하려고 이렇게 했다.

그러면 이런식으로 나온다.

프로젝트 루트에 .eslintrc.json 파일을 생성해준다.

3.settings에서 Enable해준다.

end.