SublimeText3系列(2)

1.什么是linter?

linter是用来检查代码是否符合规则的工具,例如检查Javascript代码的jshint工具,你可以设置其规则"eqeqeq":true,那么如果在你的代码文件中使用了==而不是===,那么检查的时候就会给出提示。

2.什么是SublimeLinter

SublimeLinter是SublimeText的插件,它只是一个进行代码检查的框架,可以包括其他代码检查插件。
SublimeLinter可以容纳许多linter插件,如SublimeLinter-jshint、SublimeLinter-csslint。SublimeLinter相当于一个插件容器,而具体的插件则负责调用具体的linter工具进行代码检查,如jshintcsslint
对于不同的代码文本,SublimeLinter可以使用不同的代码检查工具进行检查。例如.js文件使用jshint, .css文件使用csslint。

3.为什么用SublimeLinter?

进行代码检查的实际上是jshint与csslint这些代码检查工具。
例如我们要对JS代码文件myApp.js进行检查,不使用SublimeText编辑器的话,我们需要在windows的命令行窗口输入jshint myApp.js,然后检查结果会输出在命令行窗口,你可以按照一条条的提示修正代码。
而SublimeLinter优化了这个过程,它可以在你编写代码的时候就实时进行代码检查(当然这个时机是可以配置的,可以实时检查,也可以在保存文件的时候检查等)。而且检查的结果会直接在你的代码上进行提示,省去了你每次关闭便捷器,再去命令行窗口检查的麻烦,而且结果更加直观。
当然,SublimeText进行代码检查的插件有很多,你也可以选用其他的代码检查插件。

4.安装SublimeLinter

4.1安装SublimeLinter框架

推荐大家使用PackageControl进行SublimeLinter的安装,使用快捷键Ctrl+Shift+P,输入Install Package, 然后输入SublimeLinter安装。关于PackageControl,前文中已有介绍。

4.2安装linter插件

由于SublimeLinter只是一个linter插件的框架,因此,还需要安装额外的linter插件。
本文中介绍Javascript代码检查插件JSHint,与CSS代码检查插件csslint。
使用PackageControl分别安装SublimeLinter-jshintSublimeLinter-csslint

4.3安装linter工具

这一步安装的是具体的代码检查工具,我们使用jshint与csslint。这两个模块的安装需要node和npm的支持,大家可以到NodeJS官网下载windows的node安装包安装,网上资料很多,就不再讨论。
在安装好node与npm后,使用
npm install jshint -g
npm install csslint -g
将jshint与csslint两个模块安装到全局环境

5.SublimeLinter的设置

SublimeLinter的Settings可使用一个设置栈来表示,栈中位置高的设置可以覆盖位置低的设置,SublimeLinter融合栈中所有的设置,最后形成代码检查时的设置。

1Inline overrides 2Inline settings 3.sublimelinterrc settings 4Project settings 5User settings 6Default settings

SublimeLinter的设置可分为三种类型:Global、Linter、Meta。
Global类型的设置用来控制SublimeLinter的行为和显示,例如"error_color"用来设置错误标记的颜色
Linter类型的设置针对具体的linter工具,Linter类型的设置全部放在linters这个设置中,使用object表示,object中的子项用来配置具体的linter。如

1"linters": { 2 "csslint": { 3 "@disable": false, 4 "args": [], 5 "errors": "", 6 "excludes": [], 7 "ignore": "", 8 "warnings": "" 9 }, 10 "jshint": { 11 "@disable": false, 12 "args": [], 13 "excludes": [] 14 } 15}

Meta类型的设置全部以"@"开头,Meta类型可以在全局范围进行设置,此时可以控制所有的linter,例如设置"@disable":true,那么所有的linter都被禁用;Meta类型如果在单独的linter中设置,就只能用来控制单独的linter。

5.1 Default settings

Default settings是SublimeLinter与linter默认写入的,在SublimeLinter更新的时候会被覆盖,因此不要修改Default settings

5.2 User settings

User Settings保存在Packages/User/SublimeLinter.sublime-settings文件中,可以通过Preferences->Package Settings->Sublime-Linter->Settings-User打开。
为了让大家知道哪些设置是可用的,每次打开这个文件,SublimeLinter都会列出所有的设置项。
对用户来言,User Settings其实是当做SublimeLinter的全局设置来用的

5.3 Project settings

Project settings用来对项目的代码检查进行配置,可以通过Project->Edit Project打开SublimeText的项目配置文件。
所有的Project settings都放在一个"SublimeLinter"的object中。在"SublimeLinter"对象中配置的Sublime Linter配置对项目中的所有文件都是有效的。

5.4 .sublimelinterrc settings

.sublimelinterrc settings是大家用的比较多的方法。
通过在项目目录下建立.sublimelinterrc文件来控制目录及其子目录中代码文件的SublimeLinter设置。
SublimeLinter会先在文件的当前目录中查找.sublimelinterrc文件,如果找不到,会向上一级目录继续查找。第一个被找到的.sublimelinterrc文件,用作.sublimelinterrc settings的设置,SublimeLinter并不对所有.sublimelinterrc文件的设置进行融合
对.sublimelinterrc文件查找的深度,通过"rc_search_limit"进行设置。默认为3,设置为null表示只对.sublimelinterrc文件的根目录有效,设置为0表示禁止.sublimelinterrc文件的查找。

1Projects/ 2 Foobar/ 3 build/ 4 out.py 5 src/ 6 foo/ 7 foo.py 8 foobar.py 9 baz/ 10 baz.py 11 bar/ 12 bar.py 13 test/ 14 footest.py 15 foobartest.py

如对上面的文件结构,"rc_search_limit"设置为3。那么.sublimelinterrc文件在以下目录将分别影响以下文件:

  • foo – foo.py, foobar.py 和 baz/baz.py

  • src – foo, foo/baz, and bar目录下的所有文件

  • Foobar – build, src/foo, src/bar, 和test目录下的文件, 但是src/foo/baz目录下的文件不受影响,其查找深度应至少为4。

5.5 Inline settings与Inline overrides

Inline settings用来针对单个文件进行设置。
Inline overrides用来针对单个文件进行设置,但与覆盖设置栈中的其他设置不同,它可以添加或删除设置的项。
具体请参考这里

6. SublimeLinter的运行模式

SublimeLinter的运行模式,总共有四种,分别如下:

true - 在用户输入时在后台进行即时校验
false - 只有在初始化的时候才进行校验
"load-save" - 当文件加载和保存的时候进行校验
"save-only" - 只有当文件被保存的时候进行校验
根据个人爱好选择,个人推荐"save-only"
可在Tools->Sublime Linter->Lint Mode中进行设置
错误标记样式(Mark Style)以及侧边栏主题(Gutter Theme)也可在Tools->Sublime Linter中进行设置。大家可以选择自己喜欢的外观。
这样在每次保存文件时,SublimeLinter就会进行检查了。效果如下

黄色代表警告,红色代表错误。
只有颜色和标记提示还不够,可以Ctrl+Shift+P打开命令行窗口,输入Show All Errors,那么就会在一个窗口中给出所有的错误提示了~如下图

可以在每次保存时显示错误提示窗口。通过Tools->Sublime Linter->Show Errors On Save设置,也可在User Settings或者.sublimelinterrc settings中设置

7. jshint与csslint设置

jshint与csslint可以在.jshintrc与.csslintrc中设置,我的设置如下:
.jshintrc文件设置

1{ 2 "bitwise": true,//不能使用位运算符& 3 "curly": true,//不能省略循环和条件语句的大括号 4 "forin":true,//for in需要hasOwnProperty检查 5 "latedef":"nofunc",//先定义变量,函数声明除外 6 "undef":true,//变量未定义 7 "unused":"strict",//检查未使用的变量与函数参数,跳过函数 8 "noarg":true,//禁止使用 arguments.caller 和 arguments.callee 9 "maxparams": 4,//最多参数个数 10 "browser":true,//允许与浏览器相关的关键字,如document、history、clearIntreval等 11 "devel":true,//允许与开发相关的关键字,像alert,console等 12 "indent": 2,//缩进2空格 13 "maxerr":50,//超过50个错误,jslint停止工作 14 "newcap":true,//允许构造器函数首字母非大写 15 "nomen": true,//不允许在两边(最前或最后)悬挂下划线符号(_) 16 "plusplus": false,//允许++和-- 17 "eqeqeq": true,//使用===做判断 18 "maxlen": 120,//行最大长度 19 "strict":true,//函数级别必须有"use strict"指令 20 //"maxstatements": 5,//限制函数内声明语句的个数 21 "node": true,//node环境 22 "jquery":true//jquery环境 23}

.csslintrc文件设置

1{ 2 "adjoining-classes": false, 3 "box-sizing": false, 4 "box-model": false, 5 "compatible-vendor-prefixes": false, 6 "floats": false, 7 "font-sizes": false, 8 "gradients": false, 9 "important": false, 10 "known-properties": false, 11 "outline-none": false, 12 "qualified-headings": false, 13 "regex-selectors": false, 14 "shorthand": false, 15 "text-indent": false, 16 "unique-headings": false, 17 "universal-selector": false, 18 "unqualified-attributes": false 19}
点赞
收藏

评论区

加载中...

相关推荐

解决研发痛点SnoarQube代码检查实战

1.代码质量检查,想知道团队成员代码质量情况,团队人多后每个人的代码风格和代码水平不一通过sonar检测能做到代码基准的一个把控。2.master代码质量是基准,可以理解master分支的sonar检测是通过的,分支代码质量检查和master代码进行比对,我们是master上线。3.sonar检测后把结果发送通知给对应的开发和其TL,开发能及时知道自己开发代码是否有问题

25 个最基本的 JavaScript 面试问题及答案(上)

1.使用typeofbar"object"来确定bar是否是对象的潜在陷阱是什么?如何避免这个陷阱?尽管typeofbar"object"是检查bar是否对象的可靠方法,令人惊讶的是在JavaScript中null也被认为是对象!因此,令大多数开发人员惊讶的是,下面的代码将输出true(而不是f

彻底改变你的代码:JavaScript linter—Oxlint

作为开发人员,总是在寻找能够简化工作流程并提高工作效率的工具。Oxlint是一个用Rust编写的JavaScriptlinter,现在提供了可以替代ESLint的新方案,其性能比ESLint提升了50100倍。在本文中,将学习如何将Oxlint集成到开发流

源代码审计怎么做?有哪些常用工具

源代码审计是一种通过检查源代码来发现潜在的安全漏洞的方法。下面是常用的源代码审计工具:1、Fortify:通过内置的五大主要分析引擎,对源代码进行静态分析,并与特有的软件安全漏洞规则集进行全面地匹配、查找。2、Checkmax:通过虚拟编译器自动对软件源代

关于Codigger之软件项目体检Software Project HealthCheck 为你的软件项目提供快速、可靠的体检

项目体检是Codigger推出的智能代码质量检查工具,集成到您现有的工作流程中并检测代码中的问题,以帮助您对项目执行持续的代码检查

彻底改变你的代码:JavaScript linter—Oxlint

作者:京东保险张洁作为开发人员,总是在寻找能够简化工作流程并提高工作效率的工具。Oxlint是一个用Rust编写的JavaScriptlinter,现在提供了可以替代ESLint的新方案,其性能比ESLint提升了50100倍。在本文中,将学习如何将Oxl

SublimeText3系列(2) - HelloWorld