Sublime Text3 lint 오류를 실시간으로 표시하여 자바 스크립트 구현을 약간 효율적으로 만듭니다.

Node.js의 구현을 하고 있고, 제일 마지막에 eslint를 실행하고 있었지만, 매번 결과로부터 해당 파일을 찾는다→행 번호를 찾는다→에러를 제거한다, 라고 하는 흐름이 귀찮게 되었기 때문에 Sublime Text3의 플러그인 SublimeLinter를 넣어 보았습니다.
이것으로 코딩하면서 lint 체크 할 수 있기 때문에 다소 효율 업!

eslint 설치



다음은 npm을 사용한 샘플
$ npm install -g eslint
$ eslint -v
v3.0.1

SublimeLinter 설치


  • Package Control(Mac의 경우 cmd + shift + p)에서 Install Package를 선택합니다.
  • SublimeLinter를 입력하고 Enter를 눌러 설치합니다.

    SublimeLinter-contrib-eslint 설치


  • 마찬가지로 Install Package에서 SublimeLinter-contrib-eslint를 입력하고 Enter 키를 눌러 설치합니다

  • 설정 파일에 설정을 기재


  • Preferences -> Package Settings -> SublimeLinter -> Settings User를 선택


  • Mac의 경우의 예. 포인트는 이하.
    1. linters의 eslint 항목에서 args에 eslint 정의 파일을 설정합니다.
    2. linters의 eslint 항목에서 disable을 false로 설정합니다. 이것을하지 않으면 움직이지 않았다.
    3. lint_mode: background에 의해 라이브 체크를 한다
    4. paths의 osx에 eslint까지의 경로를 기재. 여기는 사용중인 패키지 관리 도구에 따라 다르므로주의하십시오.
    {
      "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
          "eslint": {
            "@disable": false,
            "args": [
              "--config",
              "/path/to/somewhere/.eslintrc.json"
            ],
            "excludes": []
          },
          "jshint": {
            "@disable": true,
            "args": [],
            "excludes": []
          }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
          "linux": [],
          "osx": [
            "~/.nodebrew/current/bin"
          ],
          "windows": []
        },
        "python_paths": {
          "linux": [],
          "osx": [],
          "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
          "html (django)": "html",
          "html (rails)": "html",
          "html 5": "html",
          "php": "html",
          "python django": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
      }
    }
    

    그리고 다시 시작합니다.

    작동한 예



    이런 식으로 Warning(황색)과 Error(적색)가 나온다.


    무슨 오류인지 확인



    나온 에러가 무슨 에러인지를 확인하려면, 방금 전의 설정 파일 중,
    "debug": false
    

    을 true로 변경합니다.
    그러면 아래의 콘솔에 에러의 행 번호와 이유가 쓰여진다.



    아이콘 변경



    h tp // w w.ぃめぃん r. 코 m/엔/ㄱ st/그리고 r_테메 s. HTML
    여기에 있는 것처럼, gutter-themes라는 것을 변경하면 아이콘의 커스터마이즈가 가능.
    "gutter_theme": "Packages/SublimeLinter/gutter-themes/Blueberry/cross/Blueberry - cross.gutter-theme"
    

    하면, 이런 느낌이 된다.



    console에 Failed to load plugin~~이 나오면



    이런 에러가 나오는 경우가 있다.
    맞춤법 검사를 정의했지만 플러그인이 없기 때문에 오류가 발생합니다.
    Error: Failed to load plugin spellcheck: Cannot find module 'eslint-plugin-spellcheck'
    

    이것은 eslintrc.json에 정의되어 있지만, plugin의 인스톨이 되어 있지 않은 경우에 나온다.
    위의 경우 npm에서 전역 설치.
    npm install -g eslint-plugin-spellcheck
    
  • 좋은 웹페이지 즐겨찾기