借助 SublimeLinter 編寫高質量的 JavaScript & CSS 代碼


  SublimeLinter 是前端編碼利器——Sublime Text 的一款插件,用於高亮提示用戶編寫的代碼中存在的不規范和錯誤的寫法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進行 JS & CSS 校驗。

  准備工作

  安裝 Sublime Text 包管理工具:http://wbond.net/sublime_packages/package_control

  使用 Sublime Text 包管理工具安裝 SublimeLinter:https://github.com/SublimeLinter/SublimeLinter

  安裝 Node.js,建議安裝 Windows Installer 版本:http://nodejs.org

  參數配置

  打開 SublimeLinter 的配置文件,Preferences->Package Settings->SublimeLinter->Settings - User,進行如下配置:

(1)運行模式
    "sublimelinter": "save-only",

  SublimeLinter 的運行模式,總共有四種,含義分別如下:

  • true - 在用戶輸入時在后台進行即時校驗;
  • false - 只有在初始化的時候才進行校驗;
  • "load-save" - 當文件加載和保存的時候進行校驗;
  • "save-only" - 當文件被保存的時候進行校驗;

  推薦設置為 “save-only”,這樣只在編寫完代碼,保存的時候才校驗,Sublime Text 運行會更加流暢。

(2)校驗引擎
    "sublimelinter_executable_map":
    {
        "javascript":"D:/nodejs/node.exe",
        "css":"D:/nodejs/node.exe"
    }

  這里是配置 JavaScript 和 CSS 校驗需要用到的 JS 引擎(這里用的是 Node.js)的安裝路徑。

(3)JSHint 選項

  SublimeLinter 使用 JSHint 作為默認的 JavaScript 校驗器,也可以配置為 jslint 和 gjslint(closure linter)。下面我使用的 jshint 校驗選項,大家可以根據自己的編碼風格自行配置,選項的含義可以參考這里:http://www.jshint.com/docs/#options

    "jshint_options":
    {
        "strict": true,
        "noarg": true,
        "noempty": true,
        "eqeqeq": true,
        "undef": true,
        "curly": true,
        "forin": true,
        "devel": true,
        "jquery": true,
        "browser": true,
        "wsh": true,
        "evil": true
    }
(4)CSSLint 選項

  SublimeLinter 使用 CSSLint 作為 CSS 的校驗器,下面是默認配置的校驗選項,可以根據個人編碼風格修改:

    "csslint_options":
    {
        "adjoining-classes": "warning",
        "box-model": true,
        "box-sizing": "warning",
        "compatible-vendor-prefixes": "warning",
        "display-property-grouping": true,
        "duplicate-background-images": "warning",
        "duplicate-properties": true,
        "empty-rules": true,
        "errors": true,
        "fallback-colors": "warning",
        "floats": "warning",
        "font-faces": "warning",
        "font-sizes": "warning",
        "gradients": "warning",
        "ids": "warning",
        "import": "warning",
        "important": "warning",
        "known-properties": true,
        "outline-none": "warning",
        "overqualified-elements": "warning",
        "qualified-headings": "warning",
        "regex-selectors": "warning",
        "rules-count": "warning",
        "shorthand": "warning",
        "star-property-hack": "warning",
        "text-indent": "warning",
        "underscore-property-hack": "warning",
        "unique-headings": "warning",
        "universal-selector": "warning",
        "vendor-prefix": true,
        "zero-units": "warning"
    }

 

您可能感興趣的相關文章

 

本文鏈接:借助 SublimeLinter 編寫高質量的 JS & CSS 代碼

編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM