SublimeLinter 是 Sublime 的插件,它的作用是检查代码语法是否有错误,并提示。习惯了 IDE 下写代码的人一定需要一款在 Sublime 上类似的语法检查工具。下面我们开始。


安装 SublimeLinter

如同其他插件一样使用 Package Control 来安装。

  1. 按下 Ctrl+Shift+p 进入 Command Palette
  2. 输入install进入 Package Control: Install Package
  3. 输入SublimeLinter。进行安装.

安装完成后可以看到这样一段话:

Welcome to SublimeLinter, a linter framework for Sublime Text 3.

                  * * * IMPORTANT! * * *

         SublimeLinter 3 is NOT a drop-in replacement for
earlier versions. Linters *NOT* included with SublimeLinter 3,
they must be installed separately. The settings are different. * * * READ THE DOCS! * * * Otherwise you will never know how to install linters, nor will
you know about all of the great new features in SublimeLinter 3. For complete documentation on how to install and use SublimeLinter,
please see: http://www.sublimelinter.com

可以看到具体的 Linters 组件被包含在 SublimeLinter 3 中,所以我们要额外独立安装组件。 
可以针对不同的语言安装不同的组件。


JavaScript 语法检查

SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。


安装 SublimeLinter-jshint

为了让 JavaScript 代码有语法检查,我们安装 SublimeLinter-jshint 
同样的方法,我们安装 SublimeLinter-jshint

  1. 按下 Ctrl+Shift+p 进入 Command Palette
  2. 输入install进入 Package Control: Install Package
  3. 输入SublimeLinter-jshint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-jshint
-------------------------------
This linter plugin for SublimeLinter provides an interface to jshint. ** IMPORTANT! ** Before this plugin will activate, you *must*
follow the installation instructions here: https://github.com/SublimeLinter/SublimeLinter-jshint

安装 nodeJS 和 jshint

在插件开始工作之前,我们必须再看一下上述插件的安装说明 
通过 SublimeLinter-jshint 的说明 我们可以看到,这个组件依赖于 nodeJS 下的 jshint,所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。

  1. 安装 Node.js
  2. 通过 npm 安装jshint

在命令行下输入如下代码,完成安装

npm install -g jshint

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\jshint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint\bin\jshint
jshint@2.6.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint
├── strip-json-comments@1.0.2
├── underscore@1.6.0
├── exit@0.1.2
├── shelljs@0.3.0
├── console-browserify@1.1.0 (date-now@0.1.4)
├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1)
├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0)
└── cli@0.6.6 (glob@3.2.11)

可以查看 jshint 版本,已确认安装完成。

C:\Users\Administrator>jshint -v
jshint v2.6.3

现在,恭喜你,我们使用 Sublime 编辑 JavaScript 文件,就会有语法检查了!

在编辑过程中,会有如下提示

点击提示点后,Sublime 状态栏也会有相应的说明


css 语法检查

与 jshint 同理,SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件,实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。


安装 SublimeLinter-csslint

同样的方法。

  1. 按下 Ctrl+Shift+p 进入 Command Palette
  2. 输入install进入 Package Control: Install Package
  3. 输入SublimeLinter-csslint。进行安装.

如下图

安装完成后我们可以看到下面的一段话

SublimeLinter-csslint
-------------------------------
This linter plugin for SublimeLinter provides an interface to csslint. ** IMPORTANT! ** Before this plugin will activate, you *must*
follow the installation instructions here: https://github.com/SublimeLinter/SublimeLinter-csslint

在使用插件之前,必须遵循上述网址中的安装说明


在 nodeJS 下安装 csslint

进入上述的 GitHub 地址,csslint 的说明页。我们知道了和 jshint 一样,csslint 也是基于 nodeJS 下的 csslint 来使用的。

这里安装 nodeJS 过程省略。 
只需用 npm 安装 csslint 即可。

在命令行中输入

npm install -g csslint

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\csslint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint\cli.js
csslint@0.10.0 C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint
└── parserlib@0.2.5

可以查看 csslint 版本,已确认安装完成。

C:\Users\Administrator>csslint --version
v0.10.0

现在,恭喜你,我们使用 Sublime 编辑 css 文件,就会有语法检查了!

在编辑过程中,会有如下提示

点击提示点后,Sublime 状态栏也会有相应的说明

代码校验工具 SublimeLinter 的安装与使用的更多相关文章

  1. 代码管理工具Git的安装及使用

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  2. ESLint – 可扩展的 JavaScript & JSX 校验工具

    ESLint 是一个开源的 JavaScript 代码校验工具,最初是由 Nicholas C. Zakas 在2013年创建的.经常被用来发现问题的模式或代码,不符合特定的风格准则. ESLint ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. 在SUBLIME TEXT中安装SUBLIMELINTER进行JS&CSS代码校验

    一:Sublime Text 中需要先安装Package Control.(如果有则无需安装) 安装方法:打开Sublime Text控制台(快捷键Ctrl+`),在控制台粘贴以下代码,按回车执行. ...

  5. sublime上安装c/c++代码分析工具 sublime Linter - cppcheck

    项目官方说明 sublime Linter - cppcheck 理解下sublime Linter - cppcheck, 它是插件的插件,sublime的插件sublimeLinter的插件.网络 ...

  6. Java静态代码分析工具——FindBugs插件的安装与使用

    1 什么是FindBugs FindBugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.有了静态分析工具,就可以在不实际运行程序的情况对软件进行分 ...

  7. 代码静态分析工具PC-LINT安装配置

    代码静态分析工具PC-LINT安装配置--step by step                             作者:ehui928                             ...

  8. SonarQube代码质量管理工具的安装(Linux)

    一.安装配置sonar 1.Sonar介绍 Sonar是一个用于代码质量管理的开源平台,用于管理Java源代码的质量.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具, ...

  9. Eclipse代码规范工具-Checkstyle安装和使用

    您首先可以参考这里:http://www.ibm.com/developerworks/cn/java/j-ap01117/index.html 那么首先您应该下载CheStyle: http://s ...

随机推荐

  1. Android OpenGL 基础入门

    Android 自从2.2 版本之后之后开始支持OpenGL,在没有支持OpenGL 的 GPU的情况下,也可以使用(通过软件来模拟).在Android上使用Opengl操作的对象是GLSurface ...

  2. UNIQUEIDENTIFIER列上的统计信息

    UNIQUEIDENTIFIER列上的统计信息非常有意思,在它上面有一些很令人讨厌的行为.我们来看下. 问题重现(The repro) 为了向你展示我们刚抱怨的行为,我用下列简单的表定义创建了一个数据 ...

  3. js-DOM控制HTML

    一. dom对象控制html    HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML).    HTML DOM ...

  4. LNK1179 无效或损坏的文件: 重复的 COMDAT“_IID_IDispatchEx”

    fatal error LNK1179: invalid or corrupt file: duplicate comdat  "XXX" LNK1179 无效或损坏的文件: 重复 ...

  5. C#创建自定义配置节

    在.Net应用程序中,我们经常看到VS为我们生成的项目工程中都会含有nfig或者nfig这样的文件.这个文件就是我们所说的应用程序配置文件.在这个文件里面记述着一些与我们的应用程序相关的信息,如:数据 ...

  6. Google的分布式关系型数据库F1和Spanner

    F1是Google开发的分布式关系型数据库,主要服务于Google的广告系统.Google的广告系统以前使用MySQL,广告系统的用户经常需要使用复杂的query和join操作,这就需要设计shard ...

  7. 【循序渐进学Python】12.Python 正则表达式简介

    正表达式就是一段匹配文本片段的模式,在Python 中 re 模块包含了对正则表达式(regular expression)的支持. 1. 正则表达式的基本概念 1. 通配符 点号( . )可以匹配换 ...

  8. 重新想象 Windows 8 Store Apps (58) - 微软账号

    [源码下载] 重新想象 Windows 8 Store Apps (58) - 微软账号 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 微软账号 获取微软账号的用户 ...

  9. OAuth2.0 基础概述

    web:http://oauth.net/2/ rfc:http://tools.ietf.org/html/rfc6749 doc:http://oauth.net/documentation/ c ...

  10. yii2.0配置以pathinfo的形式访问

    yii2.0默认的访问形式为:dxr.com/index.php?r=index/list,一般我们都会配置成pathinfo的形式来访问:dxr.com/index/list,这样更符合用户习惯. ...