自動修復 JavaScript Linting-errors 好工具 Fixmyjs

前端工程師撰寫 JavaScript 程式碼後一定會透過 JSHint 驗證程式碼品質，但是 JSHint 只會提醒各位開發者哪些代碼需要修正，工程師還是需要手動去修復這些錯誤，這有點麻煩，所以今天來介紹一套自動修正 JSHint 錯誤的好工具 Fixmyjs，如果大家有寫過 PHP，一定有聽過 PHP-FIG 制定了 PSR-0, PSR-1, PSR-2 等標準，希望 PHP 工程師可以遵守這些規則，而 PHP-CS-Fixer 就是根據 PHP-FIG 來自動修復 PHP 程式碼，讓程式碼可以遵守這些共同制定的標準。

Fixmyjs 的出現解決了 JSHint 的問題，但是大家會問 FixMyJS 幫我們解決了哪些問題，請看底下

自動幫忙補上分號 semicolons
強制轉換 camelCase
幫忙移除 debugger 程式碼
執行雙引號或單引號
自動補上空白
Mixed spaces/tabs
去除行尾空白
自動轉換 array literal 和 object literal

更多支援請參考這裡，給個範例大家比較有感覺，可以看一下底下程式碼

var a = Array();
var b = Object();
var c = [];
var d
debugger;
delete c;
a == null;
var e = undefined;
var foo = new Foo;
foo([1, 2, 3,]);
a = 1;
a++;
var x = 1;;
a == NaN;
a != NaN
var q = .25;

透過 fixmyjs 指令轉換，可以得到底下結果

var a = [];
var b = {};
var c = [];
var d;
c = undefined;
a == null;
var e;
var foo = new Foo();
foo([
  1,
  2,
  3
]);
a = 1;
a++;
var x = 1;
isNaN(a);
!isNaN(a);
var q = 0.25;

透過命令列可以直接轉換 JavaScript 檔案

$ npm install fixmyjs -g
$ fixmyjs app.js

另外如果有使用 Sublime Text 編輯器可以直接找 sublime-fixmyjs，當然也可以透過 gulp-fixmyjs 來導入自動修復流程。gulp 可以參考底下

gulp.task 'jshint', ->
  gulp.src 'app/assets/js/**/*.js'
    .pipe $.fixmyjs
      legacy: true
    .pipe gulp.dest 'app/assets/js/'
    .pipe $.jshint()
    .pipe $.jshint.reporter 'jshint-stylish'
    .pipe $.if !browserSync.active, $.jshint.reporter 'fail'

如果你將 legacy 設定為 false，你會發現 JavaScript 的空白 Line 會被移除，這已經回報到官方 Issue，所以現在建議大家還是將 legacy 設定為 true 會比較好，否則程式碼會擠成一團 XD

更多介紹可以直接參考 Explorations In Automatically Fixing JavaScript Linting-errors

See also