Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/popomore/jshint-practice
配置 jshint 的最佳实践
https://github.com/popomore/jshint-practice
Last synced: 2 months ago
JSON representation
配置 jshint 的最佳实践
- Host: GitHub
- URL: https://github.com/popomore/jshint-practice
- Owner: popomore
- Created: 2015-01-18T19:51:46.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-03-31T15:08:50.000Z (almost 10 years ago)
- Last Synced: 2024-11-01T09:33:57.550Z (2 months ago)
- Language: JavaScript
- Size: 159 KB
- Stars: 48
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jshint 最佳实践
## 使用说明
配置 package.json
```
{
"name": "jshint-practice"
"devDependencies": {
"jshint": "*"
},
"scripts": {
"test": "jshint ."
}
}
```
添加 [.jshintrc](https://github.com/popomore/jshint-practice/blob/master/.jshintrc) 配置规则(规则如下)，添加 [.jshintignore](https://github.com/popomore/jshint-practice/blob/master/.jshintignore) 忽略某些目录(配置文件比命令行好用)。
运行校验代码
```
npm install
npm test
```
## 编辑器
### Sublime
安装 [SublimeLinter](http://sublimelinter.readthedocs.org/en/latest/installation.html) 和 [SublimeLinter-jshint](https://github.com/SublimeLinter/SublimeLinter-jshint#installation)。
## 行内配置
有时某些代码希望覆盖全局配置，那么行内配置会帮到你。
```
/* jshint unused:true, eqnull:true */
function main(a, b) {
return a == null;
}
```
使用全局变量
```
/* global document */
document.createElement()
```
## 代码风格
使用 jscs，jshint [已经把很多配置删除了](https://github.com/jshint/jshint/issues/1339)。
TODO：迁移以下配置 trailing, smarttabs, laxbreak, laxcomma, quotmark, indent,
## 配置说明
See [example](https://github.com/popomore/jshint-practice/blob/master/example)
## indent
```
{
"indent": 2
}
```
配置缩进，建议用两个或四个空格代替 tab，tab 唯一的缺点也是优点：编辑器可以自己配置显示的缩进，但不是每个人都会配置，比如 github 上的显示。
我使用两个空格，不然多层缩进很容易到达80个字符，一行看不完。
## latedef
```
{
"latedef": "nofunc"
}
```
变量在使用前必须先声明，废弃的变量要及时清理掉
配置 `nofunc` 可让函数定义在使用下方，因为变量提升。
```
defLate();
function defLate() {}
```
## newcap
```
{
"newcap": true
}
```
`new` 之后的需要首字母大写
```
// Good
new Object();
// Bad
new object();
```
## curly
```
{
"curly": false
}
```
语句块必须使用大括号包裹，**但有时候单行我不喜欢写 {} 所以设成 false**
```
// Good
if (true) {
console.log(true);
}
// Bad
if (true) console.log(true);
```
## eqeqeq
```
{
"eqeqeq": true
}
```
使用恒等(`===`)判断
https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/
```
// Good
'' === 0;
// Bad
'' == 0
```
## eqnull
```
{
"eqnull": true
}
```
当你想判断某个值等于 `null` 或 `undefined` 时非常实用，`== null` 会忽略 `eqeqeq` 的警告
## strict
```
{
"strict": true
}
```
进入 strict mode，文件开头添加 `"use strict;"`，原因可看下面的链接
http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/
## undef
```
{
"undef": true
}
```
如使用未定义的变量会报错，但如果使用的是全局变量可以使用 global
```
a(); // 报错
/* global location */
location.href = 'http://github.com';
```
## unused
```
{
"unused": true
}
```
如果变量定义但未使用会报错，便于优化代码，尤其在 node 中可以删除很多无用的依赖。
## laxcomma
```
{
"laxcomma": false
}
```
在行尾使用逗号，而非行首
```
// Good
{
"name": "jshint-practice",
"version": "1.0.0"
}
// Bad
{
"name": "jshint-practice"
, "version": "1.0.0"
}
```
## asi
```
{
"asi": false
}
```
必须使用分号
## boss
```
{
"boss": true
}
```
在条件判断中允许赋值，**但不建议**
```
// Good, but no recommanded
if (foo = bar) {}
```
## expr
```
{
"expr": true
}
```
支持表达式直接运行
```
// Good
options || (options = {})
```
## sub
```
{
"sub": true
}
```
同时支持 `hash['key']` 和 `hash.key`
## quotmark
```
{
"quotmark": true,
}
```
引号需保持一致，单双都可，**建议在 js 中使用单引号，json 使用双引号**
如使用单引号设置为
```
{
"quotmark": "single",
}
```
## loopfunc
```
{
"loopfunc": false,
}
```
不应该在循环中的定义函数，不然可能造成错误的引用，请看下面的解释
https://jslinterrors.com/dont-make-functions-within-a-loop
```
// Bad
var nums = [];
for (var i = 0; i < 10; i++) {
nums[i] = function (j) {
return i + j;
};
}
nums[0](2); // Prints 12 instead of 2
// Worked, but also Bad
var nums = [];
for (var i = 0; i < 10; i++) {
(function (i) {
nums[i] = function (j) {
return i + j;
};
}(i));
}
// Good
var nums = [];
for (var i = 0; i < 10; i++) {
nums[i] = createFunc(i);
}
function createFunc(i) {
return function (j) {
return i + j;
};
}
```
## lastsemic
```
{
"lastsemic": true
}
```
在单行的情况下，最后一个分号可以省略，当然是在 `asi` 开启的情况下
```
// Good
(function() { return 'Anton' }());
// Bad
(function() {
return 'Anton'
}());
```
## funcscope
```
{
"funcscope": false
}
```
Javascript 虽然只有两个作用域，但为了代码可读性更高，尽量把块都当成一个作用域。
```
// Good
function test() {
var x;
if (true) {
x = 0;
}
x += 1;
}
// Bad
function test() {
if (true) {
var x = 0;
}
x += 1;
}
```
ES6 可以直接使用 let http://es6rocks.com/2014/08/what-you-need-to-know-about-block-scope-let/
## esnext
```
{
"esnext": true,
}
```
支持 es6，这里不多说了
## noyield
```
{
"noyield": true,
}
```
在 generator 中可以没有 yield
```
function* g() {
return '';
}
```
## validthis
```
{
"validthis": false,
}
```
避免在 function 作用域中使用 this，因为一般情况 this 是指向全局域的。
```
// Bad
function named() {
this.call();
}
```
但也有例外，比如使用了 bind，这时使用 this 是正确的。
```
function named() {
/* jshint validthis:true */
this.call();
}.bind(ctx)
```
但这个很容易误判，因为很多匿名函数的上下文是无法探测的，要求不高的可以设成 true。
## env
会根据不同的环境提前定义一些[环境变量](http://jshint.com/docs/options/#environments)
- node: process, …
- browser: document, navigator, …
- nonstandard: escape, unescape, …
- devel: console, alert, …
- jquery: $, …
- mocha: describe, it, …
## global
定义一些 env 中没有的全局变量
```
{
"globals": {
"define": false
}
}
```