atom中使用JSHint

水深无声 2022-06-16 06:18 168阅读 0赞

在开发的过程中代码的编程风格是一个非常特别问题，大家都知道一个好的编程风格对阅读程序的重要性，但是代码的编程风格是没有个固定的标准，很难说哪种编程风格好哪种不好，但是它们之间有些通用的准则。

在JavaScript中有两个比较常用的代码检查工具JSLint和JSHint，JSLint的可配置性比较差，很多选项是无法修改的，所以出现了JSLint的分支项目JSHint，JSHint几乎可以配置所有的编程风格检查。

如果你比较认可JSLint的编程风格可以直接使用，如果有些不太符合你的习惯，那么可以使用JSHint自定义自己的编程风格。这里就介绍如何在Atom中使用JSHint，先上效果图：

![效果图][28201121_TbAw.png]

### 安装步骤： ###

#### 方法一： ####

1.  安装atom编辑器，
2.  apm install linter
3.  apm install linter-jshint

#### 方法二： ####

1.  安装atom编辑器
2.  安装node js,别忘了配置环境变量
3.  从github上下载linter的源码，解压后放到`~/.atom/package`中，在windows中`~`代表`C:/Users/用户名`
4.  打开命令行进入到
    
        cd ~/.atom/package/linter
        npm install
5.  从github中下载linter-jshint，同样解压到`~/.atom/package`中，然后`npm install`

别忘了重启atom编辑器，接下来就是配置JSHint，我们可以在建一个文件`~/.jshintrc`,作为全局配置，我们也可以在某个具体项目设置不同规则，放在项目根目录下。 下面是个demo，参考修改，如果想知道更多的配置选项，下面有链接。

{
        /*禁用位运算符，位运算符在JavaScript中使用较少，经常是把&&错输成&*/
        "bitwise": true,
        /*循环或者条件语句必须使用花括号包围*/
        "curly": true,
        /*强制使用三等号*/
        "eqeqeq": true,
        /*使用ES3标准， 主要为了兼容IE 6/7/8/9*/
        "es3": true,
        /*使用ES5标准*/
        "es5":true,
        /*上面两个 es3 和 es5 已过时，接下来的版本不再支持，
        使用以下三个标签代替,*/
        /*ECMAScript 3 的规范，保证兼容老的浏览器*/
        "esversion":3,
        /*ECMAScript 5.1 的规范*/
        "esversion":5,
         /*ECMAScript 6 的规范，注意浏览器支不支持ES6*/
        "esversion":6,
        /*禁止重写原生对象的原型，比如 Array ， Date*/
        "freeze": true,
        /*代码缩进*/
        "indent": true,
        /*禁止定义之前使用变量，忽略 function 函数声明*/
        "latedef": "nofunc",
        /*构造器函数首字母大写*/
        "newcap": true,
        /*
         * 禁止使用 arguments.caller 和 arguments.callee ，
         * 未来会被弃用， ECMAScript 5 禁止使用 arguments.callee
         */
        "noarg": true,
        /*严格模式*/
        "strict": true,
        /*最大参数*/
        "maxparams": 4,
        /*最大嵌套*/
        "maxdepth": 4,
        /*复杂度检测*/
        "maxcomplexity": true,
        /*禁止单引号和双引号混用*/
        "quotmark": false,
        /*变量必须定义*/
        "undef": true,
        /*变量必须使用*/
        "unused": true,
        /*预定义全局变量 document ， navigator ， FileReader 等*/
        "browser": true,
        /*定义用于调试的全局变量： console ， alert*/
        "devel": true,
        /*jQuery全局变量*/
        "jquery": true,
        /*node全局变量*/
        "node": true
    }

#### 参考链接： ####

1.  [linter github地址][linter github]
2.  [linter-jshint github地址][linter-jshint github]
3.  [jshintrc配置选项][jshintrc]

[28201121_TbAw.png]: https://static.oschina.net/uploads/img/201606/28201121_TbAw.png
[linter github]: https://github.com/steelbrain/linter
[linter-jshint github]: https://github.com/AtomLinter/linter-jshint
[jshintrc]: http://jshint.com/docs/options/