Vimmer가 형식을 의식하면서 JavaScript (ES2015)를 작성하기 위해 한 일

소개

golang을 만나고 나서 정적 형식화의 장점을 다시 한번 실감한 Vimmer가 자바스크립트를 쓰기 위해 0.5인일 정도 시행착오한 이야기입니다.

절차

준비하는 것

Vim 8

Node.js(v6.9.4)

Flow

ESLint

ALE

설정

Vim 및 Node.js 설정은 생략합니다.
또, Vim은 8계를 이용하기 때문에, 주의해 다.

JavaScript 관련

Flow은 자바 스크립트 유형 검사기로 Facebook이 주도하는 프로젝트입니다.
flow-bin로 NPM으로 배달되기 때문에 npm 명령으로 설치합니다.
전 세계적으로 설치하고 있지만, 각자의 환경에 맞추어 주세요.

$ npm install flow-bin -g

궁극적으로는 AWS Lambda(Node.js)의 함수로 배포하기 때문에 ES2015에서 개발하겠습니다.
린터로 ESLint를 설치합니다.

$ npm install eslint -g

ALE (Asynchronous Lint Engine)

ALE는, Vim8(NeoVim 포함한다)의 job나 timmer의 기능을 사용해 비동기에 린트 해 주는 멋진 Vim Plugin입니다.
귀찮고 보수적인 저는 NeoBundle 을 이용하고 있으므로, 아래와 같이 ALE를 인스톨 했습니다.

$ vi ~/.vimrc

" ALE(Asynchronous Lint Engine)
NeoBundle 'w0rp/ale'

:NeoBundleInstall

동작 확인

이번에는 JavaScript(ES2015)의 학습도 겸하고 Flow의 리포지토리를 체크아웃하고 튜토리얼용 코드 베이스를 이용합니다.

$ git clone [email protected]:facebook/flow.git && cd flow/example

Flow에 의한 타입 체크

Flow에 유형을 확인하도록 하려면 다음 작업이 필요합니다.

구성 파일 배치

대상 JavaScript 파일에 @flow를 주석으로 표시

튜토리얼에서는 위가 설정되어 있지만, 자신의 프로젝트에서는 대응할 필요가 있으므로, 주의해 주세요.

그럼 5개의 튜토리얼이 준비되어 있으므로 Vim에서 첫 번째를 열어 갑니다.



foo라는 함수는, number형을 인수에 곱셈합니다만, 7행째로 콜할 때에 string형을 건네주고 있으므로, 4행째로 형태가 다른 취지를 지적해 줍니다.
콜할 때, number형을 건네주도록(듯이) 수정하면 지적 사항이 없어져, 클리어가 되고 있네요

ESLint에 의한 린트

린트의 설정 파일을 생성해, 내용을 확인해 봅니다.

$ eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Node
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Double
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JavaScript

$ vi -R .eslintrc.js

module.exports = {
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

이전과 비슷한 자바 스크립트 파일을 Vim에서 열어보십시오.



들여쓰기의 공간량으로 지적되고 있으므로, 4공간으로 수정했습니다.
깨끗해졌습니다

결론

Vimmer가 자바스크립트(ES2015)로 프로그래밍할 때 조금만 행복할 수 있는 (하지만 중요한) 코네타를 소개해 보았습니다.
JavaScript는 아직 습득하고 있는 도중입니다만, 깊은 언어이므로 즐기면서 프로그래밍 할 수 있으면 좋겠습니다.

참고

Vim에서 ESLint와 Flow를 사용하기 위해 Neomake에서 ALE로 전환 - Qiita

O'Reilly Japan - 최초의 JavaScript