15

stardard JS 代码规范及 pre-commit hook

 4 years ago
source link: http://solart.cc/2017/03/18/stardard_js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

stardard JS 代码规范及 pre-commit hook

Mar 18, 2017

作者：blue

版权声明：本文为博主原创，转载请注明出处。

今天主要安利一个 JavaScript 代码规范 standard js ，不论你一开始喜不喜欢这个标准，相信我开使用它，你会爱上这个标准！

是的最近团队一直在 React Native 上进行探索性业务开发，在团队项目的合作中代码规范对于我们是一个相当重要的素质要求，对于注重代码质量注重代码可读性的团队尤其重要。由于缺乏代码规范，不同的人有不同的偏好，代码可读性会随着团队成员的更迭逐渐降低，也因为这样有可能带来线上 bug，而这些完全是可以通过代码检查避免的。

2、是时候强制要求代码规范了

强制两个字是好说不好听，谁也不愿意被强制要求这样那样，但这个事情我觉得懂的人自然懂，没什么好说的，团队合作就应该采用相同的规范，不同的人写的代码应该看起来是出自同一个人之手。

2.1 为什么选择 stardard 作为 js 代码规范

面对各种各样的 js 代码规范我们应该怎么选择呢？在比较了 standard、airbnb、Idiomatic.js、jQuery 等 js 代码规范后 ，极力推荐把 standard 作为团队的 js 代码标准，主要因为：

  1. 简单，无需配置文件
  2. 符合规则的代码相对比较简洁（比如语句不需要分号）
  3. 可以自动修正代码样式（通过 --fix 参数）

当然还有一点，stardard 的重点就是在于避免那些对于编码风格永远不会有答案的争议上。它不允许你自己修改某些规则，就是这么粗暴，所以把时间花在那些真正该解决的问题上吧！

2.2 一些主要的规则

  • 用2个空格缩进
  • 字符串用单引号，除非字符串里有单引号
  • 不能有未使用的变量，这是很多 bug 的来源
  • 语句结束不需要分号，可以少些不少字符 It’s fine. Really!
  • 不要以 (, [, or ` 开头，这是仅有的缺少分号可能带来问题的地方，standard js 会帮你自动检查
  • 关键字后面加空格 if (condition) { ... }
  • 函数名后面加空格 function name (arg) { ... }
  • 永远使用 === 代替 ==，但 obj == null 是允许的，用来检查 null || undefined.
  • 永远处理错误 nodejs 类型的错误 function(err) {}
  • 浏览器全局变量永远加上 window，document 和 navigator 除外
  • 查看更多规则

3、pre-commit hook

不管是什么规范得不到有效的执行那都是没有意义，只靠苦口婆心的强调很难确保所有人都能完全按照规范执行，我们是什么人，技术工种耶，能用技术手段的解决的问题我们从来不浪费嘴皮子。利用 Git 提供的 pre-commit hook 可以很好的确保在提交代码时进行规范性检查，从而优雅的保证了自己的体面（骄傲脸）。

#!/bin/sh
# Ensure all javascript files staged for commit pass standard code style
git diff --name-only --cached --relative | grep "\.jsx\?$" | xargs standard --verbose | snazzy
if [ $? -ne 0 ]; then exit 1; fi
  • 文件位于.git/hooks/pre-commit
  • standard 和 snazzy 需要通过 npm 全局安装 npm install -g standard snazzy

pre-commit 文件可以通过执行以下脚本自动创建。

#!/bin/sh
if [ "`which standard`" = "" ]; then
    npm install standard -g
fi

if [ "`which snazzy`" = "" ]; then
    npm install snazzy -g
fi

hookDir=./.git/hooks
if [ ! -d $hookDir ]; then
    mkdir -p $hookDir
fi

echo '#!/usr/bin/env bash

# Ensure all javascript files staged for commit pass standard code style
if [ "$CHECK" = "0" ]; then
	echo "ignore pre commit check"
	exit
fi

git diff --name-only --cached --relative | grep "\.jsx\?$" | xargs standard --verbose | snazzy

if [ $? -ne 0 ]; then exit 1; fi
' > .git/hooks/pre-commit

chmod +x .git/hooks/pre-commit

如果你需要忽略某些文件的代码检查，你可以在 package.json 中进行简单的配置：

"standard": {
    "ignore": [
      "/node_modules"
    ],
    "globals": [
      "__DEV__",
      "fetch"
    ]
  }

如果你在使用 WebStorm 的话推荐你通过 Eslint 进行静态代码检查，配置非常简单，同样可以在 package.json 中进行如下配置：

"devDependencies": {
    "eslint": "^3.15.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-plugin-promise": "^3.4.1",
    "eslint-plugin-standard": "^2.0.1",
    "eslint-config-standard-jsx": "^3.3.0",
    "eslint-plugin-react":"^6.10.0"
  }

通过执行 npm install 安装这些依赖，然后在设置中开启 Eslint 即可（Languages & Frameworks > JavaScript > Code Quality Tools > Eslint）。

如果你的团队中还没有一个固定的代码规范，亦或想替换一个更适合的代码规范， standard js 绝对是不二之选，用起来吧！

↓↓↓ update 2017.03.23

今天把 WebStorm 版本升级到了 2017.1 ，发现 WebStorm 官方已经在这个版本中加入了 stardard code style ，用起来更加简单方便了，还有什么理由不用起来呢？


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK