Coding Rule

Jump to bottom

dynamis edited this page Jun 14, 2018 · 1 revision

Coding Rule, Lint, Auto Format

eslint で自動チェック
- airbnb ルール
  - モダンでメンテナンスされており一番広く使われているルール
- 単一行の無効化: // eslint-disable-line <無効化するルール名> もしくは // eslint-disable-next-line <無効化するルール名>
- 複数行の無効化: /* eslint-disable <無効化するルール名> */ から /* eslint-enable <無効化するルール名> */
- その他の調整 https://eslint.org/docs/user-guide/configuring
Prettier で自動統一
- eslint と一緒に使う場合の手順
- その他の設定: https://prettier.io/docs/en/options.html
- airbnb 標準ルールに近づけるか整形ルールは prettier 標準にするのかはプロジェクト次第

# セットアップなど
# eslint をインストール
npm install -g eslint
# eslint の airbnb ルールをインストール
npm install --save-dev eslint-config-airbnb-base

# prettier をインストール
npm install --save-dev prettier
# eslint のルールのうちコード整形は上書きで無効化して prettier に任せるプラグイン
npm install --save-dev eslint-config-prettier
# prettier のエラーを VS Code 上で表示させたい場合 (optional)
npm install --save-dev eslint-plugin-prettier

# .eslint.yml:
extends: 
  - airbnb-base
  - prettier
env:
  browser: true
plugins: 
  - prettier
#rules:
#  prettier/prettier: 
#    - error

# .prettierrc:
# see: https://prettier.io/docs/en/options.html
printWidth: 120
tabWidth: 2
singleQuote: false