over 1 year ago

本篇文章中,我們將要和讀者說明,在使用vim開發javascript應用時,如何可以在每一次儲存時,自動的檢查我們js是否有問題,讓我們在開發時,可以更快速的進行修正。

配置完成果會如下圖,你可以看到他會自動顯示什麼地方需要修改,以及修改的原因。

Step1. 安裝syntastic

首先我們第一步,要先安裝syntastic,它是一個vim的套件,它的功用就是可以針對程式碼進行檢查,你可以針對不同的程式碼配置不同的檢查器,像我們要檢查javascipt時,就是配置了eslint這個檢查器。

由於我是使用vundle,所以只要在.vimrc加入下面這行。然後再執行PluginInstall就會自動幫你裝好這套件了。

 Plugin 'scrooloose/syntastic'

接下來我們會在.vimrc檔案內加入以下的配置。

 set statusline+=%#warningmsg#
 set statusline+=%{SyntasticStatuslineFlag()}
 set statusline+=%*
 let g:syntastic_always_populate_loc_list = 1
 let g:syntastic_auto_loc_list = 1
 let g:syntastic_check_on_open = 1
 let g:syntastic_check_on_wq = 0
 let g:syntastic_javascript_checkers = ['standard']
 let g:syntastic_javascript_standard_generic = 1
 let g:syntastic_javascript_checkers = ['eslint']
 let g:syntastic_javascript_eslint_exec = 'eslint'

Step2. 安裝eslint checker.

上面的步驟我們已經完成了vim的配置,並且已經設置好javascript的檢查器為eslint,但我們實際上還沒安裝好eslint,所以我們這裡將要說明如何安裝eslint

首先要安裝全域的eslint

npm install -g eslint

然後在有packjson下的專案,執行下列指令,該指令可以進行eslint的規則配置,它會問你是否用es6react之類的問題,然後根據你的回答產生出配置檔。

eslint --init

產生出配置檔如下。eslint會根據該配置檔,來檢查javascript檔案。正常來說,這樣就該可以使用,但有時還是會有問題。

module.exports = {
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "indent": [
      "error",
      "tab"
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
};

BUG---沒有出現錯誤訊息

正常來說,上面的流程有配置好,應該就可以使用,但是呢,我就在這邊debug了很久,它的錯誤提示一直沒有跑出來。我來說明一下我的debug流程。

首先,我在vim中使用:SyntasticInfo來確定,我的eslint checker是否有設定好。根據輸出的資料,Available checkerCurrently enabled checker都有設定好。那問題又出在那呢?

Syntastic version: 3.8.0-24 (Vim 704, Darwin, GUI)
Info for filetype: javascript
Global mode: active
Filetype javascript is active
The current file will be checked automatically
Available checker: eslint
Currently enabled checker: eslint

接下來我上網查到,可以看到syntasticcomplie log。首先你需要至.vimrc新增一行指令。

let g:syntastic_debug=3

然後再回到要檢查的檔案,並開起,你就會自動看到它跑出的complie log,如果沒自動跑出來你可以執行:mes一樣會跑出來。

開起後你就會看到一坨輸出。其中我看到這段輸出怪怪的,它說無法讀取到eslint-plugin-react

syntastic: 2.113305: checker output: ['', 'Oops! Something went wrong! :(', '', 'ESLint couldn''t find the plugin "eslint-plugin-react". This can happen for a
 couple different reasons:', '', '1. If ESLint is installed globally, then make sure eslint-plugin-react is also installed globally. A globally-installed ESLi
nt cannot find a locally-installed plugin.', '', '2. If ESLint is installed locally, then it''s likely that the plugin isn''t installed correctly. Try reinsta
lling by running the following:', '', '    npm i eslint-plugin-react@latest --save-dev', '', 'If you still can''t figure out the problem, please stop by https
://gitter.im/eslint/eslint to chat with the team.', '', '']

所以最後我就根據它的說明,直接安裝全域的eslint-plugin-react就解決囉。

npm install -g eslint-plugin-react

React的eslint規則設定

以下為用來測試的react檔如下。

import React from "react"; 
import ReactDOM from "react-dom";
var a ;
function App ()  {
    return (
    <div className="container">Hello</div>);
}

const app = document.createElement("div");
document.body.appendChild(app);
ReactDOM.render(<App/>, app);

然後我們實際執行eslint時會出現這三個錯誤。

  1 app/app.jsx|1 col 8 error| 'React' is defined but never used. (no-unused-vars)                                            |~
  2 app/app.jsx|4 col 5 error| 'a' is defined but never used. (no-unused-vars)                                                |~
  3 app/app.jsx|5 col 10 error| 'App' is defined but never used. (no-unused-vars)

但是我們發現,這幾個檢查在我們使用react時,都是一定會產生的,那要如何讓eslint不要略過這幾項呢?

首先,我們先看第三個錯誤'App' is defined but never used,我們App實際上是有使用在ReactDOM.render(<App/>, app)這上面,但eslint卻沒判斷到,這時我們只要在.eslintrc裡加入下面這行,就可以解決。

"react/jsx-uses-vars": [2]

那第一個錯誤呢'React' is defined but never used,雖然我們的確沒用到它,但在jsx檔中一定需要它,這時我們可以用這招,在該行加入這行文字// eslint-disable-line no-unused-vars就解決囉~

import React from "react"; // eslint-disable-line no-unused-vars

syntastic的顏色設定

一開始預設的的錯誤訊息以及提示的顏色不是很好看,如果你想修改,可以在.vimrc下加入這幾行。

其中SyntasticError指的是程式碼內的錯誤提示,而SyntasticErrorSign則是提示那一行有錯誤的那個箭頭。

highlight link SyntasticError ErrorMsg
highlight link SyntasticErrorSign WarningMsg

ErrorMsgWarningMsg為顏色與樣式,你可以在vim中輸入:highlight就可以看到很多的顏色與樣式可給你選擇了。

:highlight

參考資料

← 基礎資料結構(2)---連結串列(Linked list) 基礎資料結構(3)---樹狀結構與二元樹 →
 
comments powered by Disqus