node, babel7, eslint, prettier 설정하기(2019.6.9) with Webstorm

티스토리 뷰

Development

node, babel7, eslint, prettier 설정하기(2019.6.9) with Webstorm

sungtae 2019. 6. 9. 18:07

node 기반의 프로젝트를 진행할 때 매번 인터넷 검색을 통해서 프로젝트 설정을 그때 그때 찾아서 했었고,
내가 원하는 내용을 하나의 사이트에서 전부 찾기 힘들어서 직접 정리를 한번 해보았다.

babel, eslint, prettier, webstorm 의 공식 홈페이지를 최대한 참조하여 작성을 하였다.

우선 프로젝트의 폴더 구조는 다음과 같다.

─ sample
    ├─ src
   │ ├─ lib
   │ │ └─ util.js
   │ └─ index.js
     ├─ .babelrc
     ├─ .eslintrc.json
     ├─ .prettierrc
     ├─ config.js
     └─ package.json

1. babel 설정

- 참고 url
https://babeljs.io/docs/en/usage

아래와 같이 babel 모듈을 설치한다. (babel7 버전부터는 모듈이 @로 시작한다.)

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

아래와 같이 .babelrc 파일을 생성한다. (touch .babelrc)

{
  "presets": ["@babel/preset-env"]
}

package.json 파일의 "scripts" 부분에 아래와 같이 "build", "start" 명령을 추가한다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "babel ./src -d ./build",
  "start": "npm run build;node ./build/index.js"
}

src/index.js 파일의 시작부분에 아래 코드를 추가한다.

import '@babel/polyfill';

2. eslint 설정

- 참고 url
https://eslint.org/docs/user-guide/getting-started
https://www.npmjs.com/package/eslint-config-airbnb
https://www.npmjs.com/package/eslint-config-airbnb-base
https://github.com/babel/babel-eslint

아래 명령어로 eslint 모듈을 설치한다.

npm install eslint --save-dev

eslint 모듈 설치후 프로젝트 폴더에서 아래 명령어를 실행하여 기본 eslint 설정 파일을 생성하자
(eslint 를 -g 옵션으로 global 설정을 하면 ./node_modules/.bin 경로를 필요 없다.)

./node_modules/.bin/eslint --init

eslint --init을 실행하면 다음과 같이 선택항목들이 나온다.

? How would you like to use ESLint? (Use arrow keys)
To check syntax only
❯ To check syntax and find problems (code style은 prettier를 사용할 예정이기 때문에 default 옵션을 선택)
To check syntax, find problems, and enforce code style

? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) (익숙한 import/export를 사용하기 위하여 default 선택)
CommonJS (require/exports)
None of these

? Which framework does your project use?
React
Vue.js
❯ None of these (server side 코드를 위한 설정이기 때문에 선택)

? Where does your code run?
◯ Browser
❯ ◉ Node (Node 에서 실행할 것이어서 선택)

? What format do you want your config file to be in?
JavaScript
YAML
❯ JSON (개인취향으로 json 파일을 선택)

위와 같이 선택하면 .eslintrc.json 파일이 다음과 같이 생성 되는 것을 확인 할 수 있다.

{
    "env": {
      "es6": true,
  "node": true
      },
  "extends": "eslint:recommended",
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
      "parserOptions": {
    "ecmaVersion": 2018,
  "sourceType": "module"
  },
  "rules": {
  }
  }

"rules"에 다음을 추가한다.
(eslint:recommended 에서는 console.log 사용을 권장하고 있지 않기 때문에 console.log 사용을 위해 추가한다.)

"rules": {

+ "no-console": "off"
}

많은 사람들이 사용하는 airbnb 설정을 추가하자.

eslint-config-airbnb-base : 기본설정 (지금 설정은 server side 이기 때문에 base를 사용할 것이다.)
eslint-config-airbnb : 기본설정 + react

아래 명령어로 관련 모듈을 설치한다.
(npm 버전은 5이상이라는 가정)

npx install-peerdeps --dev eslint-config-airbnb-base

그리고 .eslintrc.json 의 "extends" 에 "airbnb-base"를 추가한다.

+ "extends": ["eslint:recommended", "airbnb-base"]

3. babel, eslint 설정

babel과 eslint를 같이 사용하기 위해서는 babel-eslint 모듈을 사용해야 한다.

아래의 명령어로 babel-eslint 모듈을 설치하고

npm install --save-dev babel-eslint

.eslintrc.json 에 "parser"를 추가한다.

{

+ "parser": "babel-eslint",
"rules": {
...
}

}

4. eslint를 위한 Webstorm 설정

- 참고 url
https://www.jetbrains.com/help/webstorm/eslint.html

아래 메뉴에서
Preferences > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint

“Automatic ESLint configuration” 메뉴를 체크하여 활성화 시킨다.

5. prettier 설정

- 참고 url
https://prettier.io/docs/en/install.html
https://prettier.io/docs/en/configuration.html

아래 명령어로 prettier 모듈을 설치한다.

npm install --save-dev --save-exact prettier

.prettierrc 파일을 생성하여 공식 페이지에 있는 basic 설정을 그대로 저장한다

{

"trailingComma": "es5",
"tabWidth": 2, -> 4로 되어 있는데 2로 변경
"semi": false,
"singleQuote": true
}

6. prettier를 위한 Webstorm 설정

- 참고 url

https://prettier.io/docs/en/webstorm.html
https://www.jetbrains.com/help/webstorm/prettier.html

파일을 저장할 때 마다 prettier 를 적용하기 위해서는 Webstorm 설정이 필요하다.

Preferences > Tools > File Watchers 메뉴에서 watcher를 새로 추가한다.

'+' 버튼을 선택하면 제공되는 template 에 prettier가 있고, 해당 템플릿의 기본 설정을 그대로 저장하면 된다.

webstorm에 설정된 prettier 정보는 아래 경로에서 확인 할 수 있다.

Preferences > Languages and Frameworks > JavaScript > Prettier

7. eslint, prettier 설정

- 참고 url
https://prettier.io/docs/en/integrating-with-linters.html

eslint와 prettier를 같이 사용하는 경우 서로 상이한 룰이 있기 때문에 해당 문제를 해결하기 위해서는
eslint-config-prettier를 사용해야 한다.

다음 명령어로 eslint-config-prettier 모듈을 설치한다.

npm install --save-dev eslint-config-prettier

그리고 .eslintrc.json 파일의 "extends" 에 "prettier" 를 추가한다.

"extends": ["eslint:recommended", "airbnb-base", "prettier"]

8. babel alias 사용하기

- 참고 url
https://github.com/tleunen/babel-plugin-module-resolver#readme
https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md
https://github.com/benmosher/eslint-plugin-import
https://github.com/tleunen/eslint-import-resolver-babel-module

import를 하는 경우 상대경로로 표시를 하기 때문에 아래와 같이 형식이 발생할 수 있다.

import Util from '../../lib/util';

이런 경우 babel alias 설정을 사용하면 다음과 같이 사용이 가능하다.

import Util from '@root/lib/util';

alias 기능을 사용하기 위해서 아래 명령어로 babel-plugin-module-resolver 모듈을 설치 한다.

npm install --save-dev babel-plugin-module-resolver

그리고 .babelrc 파일에 "plugins" 항목을 추가한다.

{

"plugins": [

["module-resolver", {

"root": ["./src"],

"alias": {

"@root": "./src",

"@test": "./test"

}

}]

]
}

"root" 항목의 경우 import 에서 사용하는 path에 암묵적으로 사용된다.

import xxx from 'lib/util';

-> .src/lib/util을 찾는다.

"alias" 는 특정 path를 표시하는 이름을 지정할 수 있다.

import xxx from '@root/lib/util';
-> ./src/lib/util을 찾는다

import xxx from '@test/lib/util';
-> ./test/lib/util을 찾는다

개인적인 취향으로는 alias에 명시적으로 이름을 부여해서 사용하는 방법을 즐기는 편이다.

9. babel alias를 위한 eslint 설정

- 참고 url
https://github.com/benmosher/eslint-plugin-import
https://github.com/tleunen/eslint-import-resolver-babel-module

babel alias를 사용 하는 경우 eslint에서 관련 path에 대하여 경고, 에러를 표시 할 수 있도록
아래 명령어로 eslint-plugin-import, eslint-import-resolver-babel-module 모듈을 설치한다.
(babel-plugin-module-resolver 페이지에서 같이 사용하는 것을 추천하고 있다.)

npm install --save-dev eslint-plugin-import eslint-import-resolver-babel-module

모듈 설치 후 .eslintrc.json 파일의 "extends"에 아래 항목을 추가하여 babel alias에서 설정한 path에 대하여 체크 할 수 있도록 한다.

"extends": ["eslint:recommended", "prettier", "plugin:import/errors", "plugin:import/warnings"]

그리고 .eslintrc.json 파일에 "settings" 항목을 추가하여 babel에서 설정한 path를 eslint에서도 찾을 수 있도록 설정해준다.

"settings": {
      "import/resolver": {
          "babel-module": {
              "paths": ["./src", "./test"]
          }
      }
  }

10. babel alias를 위한 webstorm 설정

- 참고 url
https://github.com/tleunen/babel-plugin-module-resolver#readme

babel alias를 사용하는 경우 IDE에서 인식을 못하기 때문에, 자동 완성 기능을 사용할 수 없다.
babel-plugin-module-resolver를 보면 atom, vs code 에 대한 방법은 나와 있는데,
webstorm 에 대하여 언급된 방법으로는 잘 되지 않았다.

인터넷을 열심히 돌아다녀서 찾은 방법은 프로젝트 root 폴더에 js 파일을 하나 생성하고
(이름은 상관이 없다. 나는 config.js로 하였다.)

파일에 아래와 같이 babel alias 내용을 추가하면 webstorm 에서 자동 완성 기능을 사용할 수 있다.

System.config({
      paths: {
          '@root/*': './src/*',
          '@test/*': './test/*' }
  });

저작자표시 비영리 변경금지

'Development' 카테고리의 다른 글

[PostgreSQL] stored function(stored procedures) 사용하기 (2)	2019.09.08
[PostgreSQL] upsert(insert .. conflict on ..) 구문 사용하기 (2)	2019.08.25
Docker 실습하기 03편 - node 서버 실행하기 (0)	2019.05.01
Docker 실습하기 02편 - hello docker 출력하기 (0)	2019.04.27
Docker 실습하기 01편 (0)	2019.04.25

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			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

글 보관함

sungtae kim

티스토리 뷰