2017年1月19日 星期四

sublime text3 eslint搭配Babel-lint做語法檢查(React)

eslint搭配Babel-lint做語法檢查,以確保團隊的程式碼結構統一。

要用到eslint並搭配使用Babel的話記得在package.json的devDependencies中放入這些項目,這些會裝到node_mudules底下


STEP1:
package.age 格式
    "babel-eslint": "^7.1.1",
    "eslint": "^3.13.1",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.7.1",
CLI安裝指令:

sudo npm i babel-eslint eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react


STEP2:

在sublime text3 package install 中安裝SublimeLinter以及SublimeLinter-contrib-eslint, Babel, SublimeLinter這三個,之後在Sublime中的view-syntax就有Babel Javascript語法可以選擇

STEP3:

在專案最上層加入這三個基礎設定檔案

(1).babelrc


檔案內容為:
{
   "presets": ["react", "es2015", "stage-0"]
}


(2).eslintrc

檔案內容為:
{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  },
  "globals": {
    "document": true,
  }
}

(3).jshintrc


檔案內容為:
  "esversion": 6 
}


沒有留言:

張貼留言