如何用 vim 進行 javascript 程式的排版 [論壇 - Ubuntu 程式設計]


正在瀏覽:   1 名遊客


 到底部   前一個主題   下一個主題  [無發表權] 請登錄或者註冊



如何用 vim 進行 javascript 程式的排版
會員一級
註冊日期:
2009/10/16 14:17
所屬群組:
已註冊使用者
等級: 1
HP : 0 / 0
MP : 0 / 19
EXP: 2
離線
最近想改用 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';


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

2015/12/8 15:27
應用擴展 工具箱
回覆: 如何用 vim 進行 javascript 程式的排版
管理員
註冊日期:
2011/3/11 6:32
所屬群組:
討論區管理群
等級: 44
HP : 216 / 1084
MP : 1088 / 26813
EXP: 38
離線
我沒有用 Vim,不過我是在 Git 版本控制系統的 clean/smudge filter 設定讓要提交進版本倉庫的程式碼自動跑過一次程式碼 beautifier

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

2015/12/8 15:43
本篇發表文章以「創用CC BY 3.0 或更新之台灣地區版本」授權條款釋出,如何使用敬請參考
 Creative Commons — 姓名標示 3.0 台灣 — CC BY 3.0 TW
 http://creativecommons.org/licenses/by/3.0/tw/

「你不懂的東西就不要亂講,被懂得人看破手腳就算了,騙不懂的人誤導別人,還要別人把你當成大師,這就真的是說不過去了。」
 by Allen Own
 出處 http://www.plurk.com/p/i4uogm

自由知識創作平台介紹
 https://docs.google.com/document/d/1MGG6lW_0qCgH4U785R-IwSc_INdoBGej1l-JxiA4gPE
如何建立新的自由知識創作平台文件
 https://docs.google.com/document/d/11NdzOW2lGYksfyQIcPMPye5tlmj1J0QTkgPTmQvIvKA
應用擴展 工具箱
回覆: 如何用 vim 進行 javascript 程式的排版
會員五級
註冊日期:
2012/4/22 10:50
所屬群組:
已註冊使用者
等級: 34
HP : 169 / 845
MP : 571 / 18143
EXP: 82
離線
陳小橘 寫到:
最近想改用 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我沒在用,所以都註解掉了。
最近小玩了一下vimneovim和這些PluginManger以及Plugin,
所以還有點印象,太深入的我也不會,過沒多久我應該就忘光光了 :p

2015/12/9 0:13
應用擴展 工具箱
回覆: 如何用 vim 進行 javascript 程式的排版
會員五級
註冊日期:
2012/4/22 10:50
所屬群組:
已註冊使用者
等級: 34
HP : 169 / 845
MP : 571 / 18143
EXP: 82
離線
剛用「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

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


2015/12/10 5:15
應用擴展 工具箱
回覆: 如何用 vim 進行 javascript 程式的排版
會員五級
註冊日期:
2012/4/22 10:50
所屬群組:
已註冊使用者
等級: 34
HP : 169 / 845
MP : 571 / 18143
EXP: 82
離線

2015/12/10 5:22
應用擴展 工具箱
回覆: 如何用 vim 進行 javascript 程式的排版
會員五級
註冊日期:
2012/4/22 10:50
所屬群組:
已註冊使用者
等級: 34
HP : 169 / 845
MP : 571 / 18143
EXP: 82
離線
## 題外話

剛發現一個站

Vim Awesome(github)


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



2015/12/14 0:42
應用擴展 工具箱


 [無發表權] 請登錄或者註冊


可以查看帖子.
不可發帖.
不可回覆.
不可編輯自己的帖子.
不可刪除自己的帖子.
不可發起投票調查.
不可在投票調查中投票.
不可上傳附件.
不可不經審核直接發帖.