Javascript coding convention (コーディング規約)

wiki, tech, tech
Page content

Ruby にもましてまだ模索中です。何かコーディングのルールがあればきれいに統一性持って効率よくかけるようになると信じて… 自分は ruby では rubocop を使っていますが、 Javascript に関しては ESLint を Atom plugin で動くようにして活用しています。しようとしています…

なぜ ESLint なのか？

ほかにも JSLint などあるようですが、 ESLint はカスタマイズしやすいらしいです。 細けえことは公式の about の philosophy あたり を読むと良いかと思います。というか、動かしてから使い続けるか判断するノリです。

ESLint を Atom に 導入

「Atom に ESLint 導入した」 を参考に

  1. プロジェクトに 「ESLint」 をインストールする sh $ npm install --save-dev eslint # --save-dev は package.json の devDependencies に追記される
  2. 入っているか確認 sh $ eslint -v
  3. .eslintrc.yaml ファイルを使いまわしでコピーしてくるか、以下のコマンドで対話式でスタイルを定義して生成: sh $ eslint --init

ESLint のカスタマイズ

  • リファレンス
  • わかったこと
    • globals: 環境依存で予め宣言されているグローバル変数 (postman でいう environment など) に「定義無いよ！」とエラーを出させないためには、 globals キーで宣言
    • rules: 個別のルールを宣言するには rules キー配下で宣言

おれおれサンプル eslintrc

2018/04/11 時点の自分の AWS Lambda 開発用の eslintrc の書き方。 まず、「javascript の linter なんだし json だろ！」という意見もありそうだけど、手書きだとクオーテーションとかめんどいのでなるべく楽したくて yaml にしてみました。

  • 作った .eslintrc.yaml はこちら:
      env:
    es6: true
    node: true

  extends: eslint:recommended

  parserOptions:
    sourceType: module

  rules:
    no-console: [ off ]
    indent: [ warn, 4 ]
    quotes: [ warn, double ]
    no-unused-vars: [ warn ]
    linebreak-style: [ error, unix ]
    semi: [ error, always ]

  globals:
    event: true
    callback: true
    context: true

リストは限られた使い方するので1行にコンパクトにしたくてインライン表記にしてしまいました。気持ち悪い？でも標準で yaml でサポートされてるし許して！ ^^;