Quantcast
Channel: starriv's blog » JavaScript
Viewing all articles
Browse latest Browse all 2

写码利器: SublimeLinter帮你编写高质量的JavaScript & CSS代码

$
0
0

  还在担心代码不规范吗?担心语法错误吗?今天starriv推荐一款写码利器
→_→ SublimeLinter。
SublimeLinter它是一款前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。

image

  准备工作,安装 Sublime Text 包管理工具: 点我进去
  使用 Sublime Text 包管理工具安装 SublimeLinter:点我进去
  安装 Node.js,建议安装 Windows Installer 版本:点我进去
  参数配置

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

  (1)运行模式
 

  1. "sublimelinter"

    "save-only"
    ,  

   SublimeLinter 的运行模式,总共有四种,含义分别如下:
▲  true - 在用户输入时在后台进行即时校验;
▲false - 只有在初始化的时候才进行校验;
▲"load-save" - 当文件加载和保存的时候进行校验;
▲"save-only" - 当文件被保存的时候进行校验;
   推荐设置为 “save-only”,这样只在编写完代码,保存的时候才校验,Sublime Text 运行会更加流畅。

  (2)校验引擎

  1. "sublimelinter_executable_map"
    :  
  2.    
  3. {  
  4.    
  5.     "javascript"
    :
    "D:/nodejs/node.exe"
    ,  
  6.    
  7.     "css"
    :
    "D:/nodejs/node.exe"
      
  8.    
  9. }  

  这里是配置 JavaScript 和 CSS 校验需要用到的 JS 引擎(这里用的是 Node.js)的安装路径。

  (3)JSHint 选项

  SublimeLinter 使用 JSHint 作为默认的 JavaScript 校验器,也可以配置为 jslint 和 gjslint(closure linter)。下面我使用的 jshint 校验选项,大家可以根据自己的编码风格自行配置,选项的含义可以参考这里:点我进入
  

  1. "jshint_options"
    :  
  2.    
  3. {  
  4.    
  5.     "strict"

    true
    ,  
  6.    
  7.     "noarg"

    true
    ,  
  8.    
  9.     "noempty"

    true
    ,  
  10.    
  11.     "eqeqeq"

    true
    ,  
  12.    
  13.     "undef"

    true
    ,  
  14.    
  15.     "curly"

    true
    ,  
  16.    
  17.     "forin"

    true
    ,  
  18.    
  19.     "devel"

    true
    ,  
  20.    
  21.     "jquery"

    true
    ,  
  22.    
  23.     "browser"

    true
    ,  
  24.    
  25.     "wsh"

    true
    ,  
  26.    
  27.     "evil"

    true
      
  28.    
  29. }  

(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"
 
}
 


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images