借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

jslint，jshint与eslint的区别

这三个工具各有特色，我只是做一下对比，选择的话，看个人需求就好了。

三个的官网分别是 jslint、eslint、 jshint

jslint

优点：

配置是老道已经定好的，开箱即用。

不足：

有限的配置选项，很多规则不能禁用
规范严格，凡是不符合老道所认为的好的风格的，都会有警告(这一项就看你是否完全认同老道了)
扩展性差
无法根据错误定位到对应的规则

jshint

优点：

有了很多参数可以配置
支持配置文件，方便使用
支持了一些常用类库
支持了基本的ES6

不足：

不支持自定义规则
无法根据错误定位到对应的规则

ESLint

优点：

默认规则里面包含了JSLint和JSHint的规则，易于迁移(这肯定是故意的XD)
可配置为警告和错误两个等级，或者直接禁用掉
支持插件扩展
可以自定义规则
可以根据错误定位到对应的规则
支持ES6
唯一一个支持JSX的工具

缺点：

需要进行一些自定义配置(因为太灵活了嘛，不过文档是很详细的)
慢 (它比其他两个都要慢)

建议用jshint

代码校验工具在 Sublime 中的安装与使用

Javascript 语法检查

1. 安装 SublimeLinter

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

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

SublimeLinter

2. 安装SublimeLinter-jshint

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

SublimeLinter

3. 安装 nodeJS 和 jshint

通过 SublimeLinter-jshint 的说明我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。

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

npm install -g jshint

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

SublimeLinter

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

SublimeLinter

css 语法检查

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

1. 安装 SublimeLinter-csslint

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

SublimeLinter

3. 安装 nodeJS 和 jshint

通过 SublimeLinter-jshint 的说明我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS 下的 jshint。

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

npm install -g csslint

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

SublimeLinter

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

SublimeLinter

jshint 配置

http://jshint.com/docs/options/

在项目根目录下新建一个 .jshintrc 文件

.jshintrc配置文件中的一些常用配置

/**
* 是要求否以 strict 模式检查
*
* 该选项要求文件有 "use strict;" 字符串，而且很多限制有点残酷。不全局要求，需要的模块自行开启
*/
"strict": false,

/**
* 是否阻止修改或拓展基本对象（Array、Date 等）的原型链
*
* 原型链污染比较危险，默认打开
*/
"freeze": true,

/**
* 是否要求变量都使用驼峰命名
*
* 默认开启
*/
"camelcase": true,

/**
* 是否要求 for/while/if 带花括号
*
* 我们建议多行的时候使用花括号，单行强制写在一行。
* 因为这个选项不管单行多行，所以默认关闭
*/
"curly": false,

/**
* 指定缩进大小为 4 个空格
*/
"indent": 4,

/**
* 要求变量在使用前声明
*/
"latedef": true,

/**
* 要求构造函数大写
*/
"newcap": true,

/**
* 不允许空的代码快，默认关闭
*/
"noempty": false,

/**
* 阻止直接使用 new 调用构造函数的语句（不赋值对象）
*
* // OK
* var a = new Animal();
*
* // Warn
* new Animal();
*/
"nonew": true,


/**
* 提示未定义的变量
*
* 未定义的变量会容易造成全局变量，该项开启
*/
"undef": true,

/**
* 字符串不允许以空格加斜杠的形式来换行
*
* // OK
* var str = 'Hello ' +
*     'world';
*
* // No Way
* var str = 'Hello \
*     world';
*/
"trailing": true,

/**
* 对代码中使用的 debugger 语句默认给出警告
*/
"debug": false,

/**
* 变量只能在函数域上定义，在代码块上定义的变量给出警告
*
* // OK
* function test() {
 *    var x;
 *
 *    if (true) {
 *        x = 0;
 *    }
 *
 *    x += 1;
 * }
*
* // No Way
* function test() {
 *
 *    if (true) {
 *        var x = 0;
 *    }
 *
 *    x += 1;
 * }
*/
"funcscope": true,

/**
* 不允许使用 arguments.callee 和 arguments.caller
*/
"noarg": true,

/**
* 提示未使用的变量
*
* 默认开启
*/
"unused": false,

/**
* 设置为浏览器环境
*
* 默认开启
*/
browser: true,

/**
* 这个选项允许你控制哪些变量jshint认为是隐含在环境的定义
*/
"predef": [
    "module",
    "require",
    "__dirname",
    "process",
    "console",
    "it",
    "describe",
    "before",
    "after"
],

// 此选项可以用来指定在源代码中没有正式定义的全局变量。
"globals": {
    "grunt": true,
    "gulp": true,
    "module": true,
    "window": true,
    "jQuery": true,
    "$": true,
    "global": true,
    "document": true,
    "console": true,
    "setTimeout": true,
    "setInterval": true,
    "require": true
  }

eslint 配置

http://eslint.org/docs/rules/

在项目根目录下新建一个 .eslintrc 文件

.eslintrc配置文件中的一些常用配置

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    }// SLint允许你指定你想要支持JavaScript语言选项。
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "commonjs": true
  },
  "globals": {
    "__DEV__": true,
    "__dirname": false,
    "require": true,
    "class": true //添加项目所需没有申明的全局变量
  },
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "react-native",
    "eslint-plugin-react",
    "eslint-plugin-react-native"
  ],
  "rules": {
    // 变量
    "no-undef" : 2,
    "no-console": 1,
    "no-alert": 1,
    "no-empty-function": 2,
    "no-undefined": 2,
    "no-unused-vars": 2,
    "no-use-before-define": 2,
    // 风格
    "array-bracket-spacing": 2,
    "block-spacing": 2,
    "indent": ["error", 2], //  2个空格缩进
    "key-spacing": 2,
    "semi-spacing": 2,
    // 插件
    "react/jsx-no-undef": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/jsx-filename-extension": 0, //关闭jsx不允许.js结尾
    "jsx-quotes": 0,
    "no-dupe-args": 2,
    "comma-dangle": [2, "always-multiline"],
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty": 2,
    "no-extra-parens": 2,
    "no-extra-semi": 2,
    "no-func-assign": 2,
    "no-sparse-arrays": 2,
    "no-unexpected-multiline": 2,
    "no-unreachable": 0,
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 1, //不允许行内样式
    "react-native/no-color-literals": 0
    // "off" or 0 - 关闭
    // "warn" or 1 - 警告
    // "error" or 2 - 错误
  },
  "settings": {
    "import/parser": "babel-eslint",
    "import/resolve": {
      "moduleDirectory": ["node_modules", "src", "image"]
    },
    "react": {
      "createClass": "createClass", // Regex for Component Factory to use, default to "createClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "15.0" // React version, default to the latest React stable release
    }
  }
}

借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

jslint

jshint

ESLint

建议用jshint

代码校验工具在 Sublime 中的安装与使用

Javascript 语法检查

1. 安装 SublimeLinter

2. 安装SublimeLinter-jshint

3. 安装 nodeJS 和 jshint

css 语法检查

1. 安装 SublimeLinter-csslint

3. 安装 nodeJS 和 jshint

jshint 配置

.jshintrc配置文件中的一些常用配置

eslint 配置

.eslintrc配置文件中的一些常用配置

Comments