最近想改用 vim + vundle 外掛工具當作開發的環境，最近想要用
Plugin 'Chiel92/vim-autoformat
來排版 javascript 時，一直不曉得要如何在 vimrc 裡正確設定，

https://github.com/Chiel92/vim-autoformat

基本上想選用 JSCS 來排版 *.js，想請問一下在 vimrc 中要如何設定，安裝完後結合快速鍵有作用，t不過排出來的版改改的
noremap <F3> :Autoformat<CR>

例如 import { each } from 'lodash';

老是會轉換成

import { each
} from 'lodash';


不曉得有人有相關經驗的嗎？

我沒有用 Vim，不過我是在 Git 版本控制系統的 clean/smudge filter 設定讓要提交進版本倉庫的程式碼自動跑過一次程式碼 beautifier

這樣無論你慣用什麼純文字文件編輯器、什麼 coding style 都可以做到排版的效果

陳小橘 寫到：
最近想改用 vim + vundle 外掛工具當作開發的環境，最近想要用
Plugin 'Chiel92/vim-autoformat
來排版 javascript 時，一直不曉得要如何在 vimrc 裡正確設定，

https://github.com/Chiel92/vim-autoformat

基本上想選用 JSCS 來排版 *.js，想請問一下在 vimrc 中要如何設定，安裝完後結合快速鍵有作用，t不過排出來的版改改的
noremap <F3> :Autoformat<CR>

例如 import { each } from 'lodash';

老是會轉換成

import { each
} from 'lodash';


不曉得有人有相關經驗的嗎？

剛照你給的網址玩了一下。

個人建議應該先了解「jscs」怎麼玩。


安裝「jscs」， 根據「這裡」或「這裡」提到的。

$ npm install jscs -g

產生一個測試資料夾「test」。

$ mkdir test

切換到資料夾「test」。

$ cd test

執行下面指令，產生設定檔「.jscsrc」

$ jscs --auto-configure ./

會顯示

Checking /home/user/tmp/test against the presets
Preset #Errors #Rules
1 airbnb 0 0
2 crockford 0 0
3 google 0 0
4 grunt 0 0
5 idiomatic 0 0
6 jquery 0 0
7 mdcs 0 0
8 node-style-guide 0 0
9 wikimedia 0 0
10 wordpress 0 0
11 yandex 0 0
Please choose a preset number:

這時候輸入「1」按下「Enter」

就會顯示

You chose the airbnb preset
Generated a .jscsrc configuration file in /home/user/tmp/test

也就是會產生一個設定檔「.jscsrc」

觀看「.jscsrc」

$ cat .jscsrc

顯示

{
"preset": "airbnb"
}

產生一個測試的「test.js」，內容如下

function test() {
console.log('hi');
}

然後執行下面的指令

$ jscs test.js

就會看到下面的訊息

Expected indentation of 2 characters at test.js :
1 |function test() {
2 |console.log('hi');
----------^
3 |}
4 |


1 code style error found.

剛剛只是預看結果，執行下面的指令，讓「jscs」去修改「test.js」。

$ jscs test.js --fix

再次觀看「test.js」內容

function test() {
console.log('hi');
}

你會發現「console.log('hi');」前面多兩個空白。(網頁呈現沒有空白是這個網站的排版我不會)


剛剛是用設定檔「.jscsrc」指定，預先設好的套裝規則。

也可以改用參數指定。

先把剛剛「test.js」，恢復一開始測試的樣子。

然後執行

$ jscs test.js --preset=jquery

這時候就顯示

Invalid quote mark found at test.js :
1 |function test() {
2 |console.log('hi');
--------------------^
3 |}
4 |

Missing space after opening round bracket at test.js :
1 |function test() {
2 |console.log('hi');
--------------------^
3 |}
4 |

Missing space before closing round bracket at test.js :
1 |function test() {
2 |console.log('hi');
------------------------^
3 |}
4 |


3 code style errors found.

然後在執行下面的指令，用「jscs」去更改「test.js」。

$ jscs test.js --preset=jquery --fix

觀看「test.js」

$ cat test.js

就會看到

function test() {
console.log( "hi" );
}

* 「(」後加了空白，
* 「)」前加了空白，
* 「單引號」變成「雙引號」

以上初步了解「jscs」的用法，
不過我個人覺得這個jscs蠻嚴謹的，
比較可以來預先來觀看程式有沒有寫錯，
當「beautifier」，可能需要好好調校。
才能符合你想要的「規則」。
剛在這個「專案」，有看到「preset」。
不過我沒深究下去了，就請自行研究吧。
===============================================

另外回過頭來，要搭配「vim-autoformat」整合到「vim」。

我猜你應該是會了。

我猜你有安裝「js-beautify」

$ npm install js-beautify -g

先將「js-beautify」移除，

$ npm uninstall js-beautify -g

因為在「js-beautify」和「jscs」同時並存的狀況下。

我目前還沒找到怎麼設定「vim-autoformat」去找「jscs」，

文件若找不到的話，可能就要去「trace vim-autoformat」來了解了，或是看看其他人曉不曉得


然後先將剛剛改變的測試檔，恢復一開始要測試的樣子。

$ vim test.js

在vim裡執行

:Autoformat

或是你有設定快速鍵「F3」

noremap <F3> :Autoformat<CR>

跟剛剛直接用jscs的結果是一樣的，你會發現「console.log('hi');」前面多兩個空白。

我目前會的也只是這樣，跟你會的應該是一樣的。



=======================================

另外關於

import { each } from 'lodash';

注: 「import」 是「es6」的語法。

我用「jscs」來排

$ jscs test2.js --preset=google
$ jscs test2.js --preset=airbnb
$ jscs test2.js --preset=node-style-guide

結果還是

import { each } from 'lodash';

若用「--preset=jquery」就會看到不符合規則了。

$ jscs test2.js --preset=jquery

或

$ jscs test2.js --preset=jquery --esnext

Invalid quote mark found at test2.js :
1 |import { each } from 'lodash';
-----------------------------^
2 |

1 code style error found.

我用「js-beautify」來排

$ js-beautify test2.js

一樣顯示(不管是下指令還是整合vim)

import {
each
}
from 'lodash';

我猜這是「js-beautify」的規則，所以這樣的顯示應該是正常的。

======================
另外你可以用「js-beautify」和「jscs」測試下面的code。

function test() {alert('hi');}

======================


報告完畢。




======================



## 題外話

除了「Vundle」，
這個「vim-plug」，也可以嘗試，我是看這個「影片」知道的
用法跟Vundle差不多，我比較記得的差異是一個Vundle叫「Plugin」一個叫vim-plug叫「Plug」。
類似的工具還有好幾個，不過這些Plugin我沒在用，所以都註解掉了。
最近小玩了一下vim和neovim和這些PluginManger以及Plugin，
所以還有點印象，太深入的我也不會，過沒多久我應該就忘光光了 :p

剛用「jscs」查詢，

查到這篇「javascript 程式撰寫/編碼風格」，

發現到「.jscsrc」也可以放到「$HOME」底下，也就是「~/.jscsrc」。

從上面也發現一篇衍生的文章「JavaScript, the winning style」and Github，還沒消化，先貼上來。


======================================================

另外有一篇「A Comparison of JavaScript Linting Tools」，有介紹同性質工具的比較，

包含了「JSLint」, 「JSHint」, 「JSCS」,「ESLint」。

======================================================


* Wikipedia / Lint (中文)
* Wikipedia / List of tools for static code analysis

======================================================

## 題外話

剛發現一個站

Vim Awesome(github)


這篇討論的「vim-autoformat」，也有紀錄。