借助 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 运行会更加流畅。
1 2 3 4 5 | "sublimelinter_executable_map" : { "javascript" : "D:/nodejs/node.exe" , "css" : "D:/nodejs/node.exe" } |
这里是配置 JavaScript 和 CSS 校验需要用到的 JS 引擎(这里用的是 Node.js)的安装路径。
SublimeLinter 使用 JSHint 作为默认的 JavaScript 校验器,也可以配置为 jslint 和 gjslint(closure linter)。下面我使用的 jshint 校验选项,大家可以根据自己的编码风格自行配置,选项的含义可以参考这里:http://www.jshint.com/docs/#options
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | "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 } |
SublimeLinter 使用 CSSLint 作为 CSS 的校验器,下面是默认配置的校验选项,可以根据个人编码风格修改:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | "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" } |
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 复杂业务系统线上问题排查过程
· 通过抓包,深入揭秘MCP协议底层通信
· 记一次.NET MAUI项目中绑定Android库实现硬件控制的开发经历
· 糊涂啊!这个需求居然没想到用时间轮来解决
· 浅谈为什么我讨厌分布式事务
· 为大模型 MCP Code Interpreter 而生:C# Runner 开源发布
· 面试时该如何做好自我介绍呢?附带介绍样板示例!!!
· 复杂业务系统线上问题排查过程
· 本可避免的P1事故:Nginx变更导致网关请求均响应400
· 独立开发:高效集成大模型,看这篇就够了
2012-05-02 分享最新40款免费的 WordPress 主题(上篇)
2012-05-02 分享18套精美的苹果风格免费图标素材
2011-05-02 20佳惊艳的HTML5应用程序示例
2011-05-02 分享20个优秀的网页表单设计案例
2011-05-02 分享20个很棒的 Photoshop 图标设计教程
2010-05-02 HTML5:实至名归还是言过其实?
2009-05-02 【转】最全的CSS浏览器兼容问题