Prettier 적용하기(with vscode & eslint)

Prettier 는 표준이라고 할만한 Code Formatter 입니다. 아래 공식 사이트에 가면 좋은 설명을 볼 수 있습니다.

기존 사용되던 .editorconfig 설정 파일을 인식하므로 따로 editorconfig와 연동할 필요는 없습니다. (.prettier 설정파일이 있을시 그것을 더 우선시 하므로 주의)
https://prettier.io/
적용 방법은 다음과 같습니다.

1.Install prettier-eslint

npm install --save-dev prettier-eslint

prettier-eslint 를 설치하면 prettier 도 같이 설치되므로 prettier는 따로 설치할 필요 없습니다.

2.Install prettier-vscode plugin at marketplace

ext install esbenp.prettier-vscode

3.Set "prettier.eslintIntegration: true" in vs-code settings

Reference

• https://prettier.io/blog/2017/12/05/1.9.0.html#add-editorconfig-support-3255-https-githubcom-prettier-prettier-pull-3255-by-josephfrazier-https-githubcom-josephfrazier (.editorconfig 파일 지원에 대한 글)
• https://github.com/prettier/prettier-eslint/issues/135(추가 설명)

Webstorm 에서 File watcher 사용하기(Babel)

웹스톰에서 ES6 코딩을 하려고 설정을 바꾸면 File watcher 가 사용 가능하다는 알림이 뜨곤 하는데요..
File watcher 사용법에 대해서 알아보겠습니다.

먼저 웹스톰 설정(Language & Frameworks | JavaScript) 에서 ECMAScript 6 를 사용하도록 변경하셔야 합니다.

그러면 ES6에 대해서 코드 자동 완성, 실시간 문법 체크, 모듈과 클래스 네비게이션 등의 보조 기능이 제공됩니다.

현재 바벨은 트랜스파일러로서 가장 많이 사용되고 있습니다. 웹스톰의 File watchers 를 통해 설정할 수 있습니다.

File watcher 는 웹스톰의 기본 도구로서 파일이 변경되었을 때 자동으로 커맨드 라인 명령을 실행할 수 있게 해줍니다. 웹스톰에는 바벨을 위한 기본 설정 파일이 제공됩니다. 어떻게 적용하는지 보겠습니다.

npm 을 통해 Babel CLI 를 설치합니다.

npm install --save-dev babel-cli

그리고 Preferences->Tools->File watchers 메뉴에서 + 버튼을 눌러 바벨 file watcher 를 선택합니다.
File watcher 설정에서, Babel CLI 의 경로를 설정해줍니다.(e.g. node_modules/.bin/babel on OS X)

이 외에 ES6 트랜스파일링을 위한 Babel 6 을 설치하셔야 합니다. 터미널에서 다음을 실행하세요.

npm install --save-dev babel-preset-es2015

그리고 .babelrc 파일을 다음과 같이 작성하여 생성합니다.

{
"presets": ["es2015"]
}

그 외에 다른 Watcher 설정들은 미리 정의되어 있으므로, 바로 사용이 가능합니다.
이제 컴파일된 파일들은 원본 파일과 같은 경로에 위치하게 됩니다.

Windows 환경에서 리눅스 기본 명령어 사용하기

http://cmder.net/

찾아봤는데 제일 사용하기 쉬운 것 같다.
리눅스의 기본 명령어 cd,ls,... 같은 것 다 사용 가능하고
예를 들어 cmd 에선

> node_modules/.bin/webpack

이렇게 상위 폴더에서 하위 폴더 리소스에 접근하는 명령이 불가능한데 이것도 되네..