SublimeText3系列（2）-运用SublimeLinter搜检Javascript与CSS代码

2019年8月30日 176次阅读 来源: 铛铛铛铛

1.什么是linter？

linter是用来搜检代码是不是相符划定规矩的东西，比方搜检Javascript代码的jshint东西，你能够设置其划定规矩”eqeqeq”:true，那末假如在你的代码文件中运用了==而不是===，那末搜检的时刻就会给出提醒。

2.什么是SublimeLinter

SublimeLinter是SublimeText的插件，它只是一个举行代码搜检的框架，能够包含其他代码搜检插件。
SublimeLinter能够包容许多linter插件，如SublimeLinter-jshint、SublimeLinter-csslint。SublimeLinter相当于一个插件容器，而详细的插件则担任挪用详细的linter东西举行代码搜检，如jshint、csslint。
关于差别的代码文本，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-jshint与SublimeLinter-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融会栈中一切的设置，末了构成代码搜检时的设置。

Inline overrides
Inline settings
.sublimelinterrc settings
Project settings
User settings
Default settings

SublimeLinter的设置可分为三种范例:Global、Linter、Meta。
Global范例的设置用来掌握SublimeLinter的行动和显现，比方”error_color”用来设置毛病标记的色彩
Linter范例的设置针对详细的linter东西，Linter范例的设置悉数放在linters这个设置中，运用object示意，object中的子项用来设置详细的linter。如

"linters": {
   "csslint": {
      "@disable": false,
      "args": [],
      "errors": "",
      "excludes": [],
      "ignore": "",
      "warnings": ""
   },
   "jshint": {
     "@disable": false,
     "args": [],
     "excludes": []
   }
}

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文件的查找。

Projects/
    Foobar/
        build/
            out.py
        src/
            foo/
                foo.py
                foobar.py
                baz/
                    baz.py
            bar/
                bar.py
        test/
            footest.py
            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就会举行搜检了。结果以下
《SublimeText3系列（2）-运用SublimeLinter搜检Javascript与CSS代码》
黄色代表正告，赤色代表毛病。
只要色彩和标记提醒还不够，能够Ctrl+Shift+P翻开命令行窗口，输入Show All Errors，那末就会在一个窗口中给出一切的毛病提醒了~以下图
《SublimeText3系列（2）-运用SublimeLinter搜检Javascript与CSS代码》
能够在每次保留时显现毛病提醒窗口。经由过程Tools->Sublime Linter->Show Errors On Save设置，也可在User Settings或许.sublimelinterrc settings中设置

7. jshint与csslint设置

jshint与csslint能够在.jshintrc与.csslintrc中设置，我的设置以下：
.jshintrc文件设置

{
  "bitwise": true,//不能运用位运算符&
  "curly": true,//不能省略轮回和前提语句的大括号
  "forin":true,//for in须要hasOwnProperty搜检
  "latedef":"nofunc",//先定义变量,函数声明除外
  "undef":true,//变量未定义
  "unused":"strict",//搜检未运用的变量与函数参数，跳过函数
  "noarg":true,//制止运用 arguments.caller 和 arguments.callee
  "maxparams": 4,//最多参数个数
  "browser":true,//许可与浏览器相干的关键字,如document、history、clearIntreval等
  "devel":true,//许可与开辟相干的关键字,像alert,console等
  "indent": 2,//缩进2空格
  "maxerr":50,//凌驾50个毛病,jslint停止工作
  "newcap":true,//许可组织器函数首字母非大写
  "nomen": true,//不许可在双方(最前或末了)吊挂下划线标记(_)
  "plusplus": false,//许可++和--
  "eqeqeq": true,//运用===做推断
  "maxlen": 120,//行最大长度
  "strict":true,//函数级别必须有"use strict"指令
  //"maxstatements": 5,//限定函数内声明语句的个数
  "node": true,//node环境
  "jquery":true//jquery环境
}

.csslintrc文件设置

{
  "adjoining-classes": false,
  "box-sizing": false,
  "box-model": false,
  "compatible-vendor-prefixes": false,
  "floats": false,
  "font-sizes": false,
  "gradients": false,
  "important": false,
  "known-properties": false,
  "outline-none": false,
  "qualified-headings": false,
  "regex-selectors": false,
  "shorthand": false,
  "text-indent": false,
  "unique-headings": false,
  "universal-selector": false,
  "unqualified-attributes": false
}
    原文作者：铛铛铛铛
    原文地址: https://segmentfault.com/a/1190000004401704
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞