JavaScript本格入門(ISBN 978-4774184111)で基礎からJavaScriptを勉強するシリーズです。今回はChapter8よりコーディング規約についてです。
概要
複数人で開発していると、コーディング規約が大切ということについては言わずもがなだと思います。
JavaScriptのコーディング規約については、下記の記事に、有名どころが纏まっていますので参考にさせていただきました。
筆者がNode.jsで開発することが多いので、Felix's Node.js Style Guideのコーディング規約を使って、書いたコードをチェックするようにしてみます。
環境
記事作成時点の環境は以下の通りです。
- Windows 10 Home edition(64bit)
- Node.js 10.15.1
- npm 6.4.1
ESlintのインストール
ESlint（リンター）を使ってコーディング規約に則っているかをチェックしますので入れます。
インストール
$ npm install eslint
バージョン確認
$ eslint --version
v6.0.1
実践
コーディングしてみる
何も考えずに、テキトーに動くサンプルを作ってみました。
さてチェックするとどうなるでしょうか。
main.js
var Main = function(arg1, arg2) {
console.log("Your input is " + arg1 + ".")
}
Main("hoge");
Felix's Node.js Style Guideの設定を持ってくる
ESlintは.eslintrc.jsonファイルをESlintの設定として読み込んでくれます。
今回はFelix's Node.js Style Guideを利用するのでGitHubから持ってきます。
（ほんとはgit clone & バージョン指定して持ってくるべき）
参照：https://github.com/felixge/node-style-guide/blob/master/.eslintrc
.eslintrc.json
{
"env": {
"node": true
},
"rules": {
"array-bracket-spacing": [2, "never"],
"block-scoped-var": 2,
"brace-style": [2, "1tbs"],
"camelcase": 1,
"computed-property-spacing": [2, "never"],
"curly": 2,
"eol-last": 2,
"eqeqeq": [2, "smart"],
"max-depth": [1, 3],
"max-len": [1, 80],
"max-statements": [1, 15],
"new-cap": 1,
"no-extend-native": 2,
"no-mixed-spaces-and-tabs": 2,
"no-trailing-spaces": 2,
"no-unused-vars": 1,
"no-use-before-define": [2, "nofunc"],
"object-curly-spacing": [2, "never"],
"quotes": [2, "single", "avoid-escape"],
"semi": [2, "always"],
"keyword-spacing": [2, {"before": true, "after": true}],
"space-unary-ops": 2
}
}
ESlintでチェックしてみる
$ eslint main.js
1:27 warning 'arg2' is defined but never used no-unused-vars
2:17 error Strings must use singlequote quotes
2:43 error Strings must use singlequote quotes
2:47 error Missing semicolon semi
3:2 error Missing semicolon semi
5:1 warning A function with a name starting with an uppercase letter should only be used as a constructor new-cap
5:6 error Strings must use singlequote quotes
5:14 error Newline required at end of file but not found eol-last
✖ 8 problems (6 errors, 2 warnings)
6 errors and 0 warnings potentially fixable with the `--fix` option.
いっぱい怒られました！直しましょう！
コードを直す
fixed
var main = function(arg1) {
console.log('Your input is ' + arg1 + '.');
};
main('hoge');
警告に従って直しました。
最後にもう一度チェック
$ eslint main.js
何も言われませんでした。これで安心してプルリクエストできます。