본문으로 바로가기

Webstorm(웹스톰) Eslint 적용하기

category 개발/Node.js 2017.09.11 12:46

Webstorm(웹스톰) Eslint 적용하기

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

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


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

1
2
3
4
5
6
"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"
cs


이건 package.json전문이다.

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "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"
}
 
cs


2. .eslintrc.json 을 만든다.

.eslintrc.json

1
2
3
4
5
6
{
    "extends""airbnb-base",
    "rules":{
        "linebreak-style"0
    }
}
cs

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

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


3.settings에서 Enable해준다.


end.



저작자 표시 비영리
신고

댓글을 달아 주세요