Help us understand the problem. What is going on with this article?

個人的 ESLint (Standard) + Prettier 環境構築

More than 1 year has passed since last update.

0. お気持ち

毎回同じようなことをやっているのでまとめておくことにした。

現状、prettier の実行方法は、eslint --fix に hook させる方法と、prettier-eslint-cli から実行する方法の2種類がメジャーだと思う。
自分は prettier-eslint-cli から実行する方法を採用している。
これは 「Linter は Linter、Formatter は Formatter であってほしい」みたいな気持ちからそうしている。

ちなみに、git commit するときに、huskyprettier を実行する系のアレは、git add -p に対応していないという理由から設定していない。
詳細は Add better support for partially staged files · Issue #62 · okonet/lint-staged に書いてある。

1. ESLint 周りインストール

$ npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

追記 (2018/07/12)

上記コマンドで入る eslint-config-standard だと ESLint v5.x に追従できておらず、以下のような警告を吐くようになった。
これに対処するためには、以下を実行すると良い。

$ npm uninstall eslint-config-standard
$ npm install eslint-config-standard@next --save-dev

詳細は Warning message with ESLint 5 · Issue #114 · standard/eslint-config-standard に書いてある。

2. .eslintrc.js を書く

eslintrc.js
'use strict'

module.exports = {
  extends: 'standard'
}

3. Prettier 周りインストール

公式ドキュメントでは、prettier 自体は --save-exact でバージョンを完全に固定して入れることが推奨されているが、まあなんかそんなにきっちりしなくていいやということにした。

$ npm install --save-dev prettier prettier-eslint prettier-eslint-cli

4. .prettierrc.js を書く

ココらへんは好みだが、まあ Standard を採用していると、概ねこんな感じになるはず。

prettierrc.js
'use strict'

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  arrowParens: 'always'
}

5. package.json を書く

package.json
{
  ...
  "scripts": {
    ...
    "lint": "eslint .",
    "format": "prettier-eslint --write \"./**/*.js\" --ignore \"./node_modules/**\""
    ...
  },
  ...
}
0x50
コーダーです。インターフェイス周りのデザインや実装をやります。フロントエンドからサーバーサイドまで、色んな領域に足を突っ込んでは引き抜いてを繰り返しています。
http://p1ch.jp
dena_coltd
    Delight and Impact the World
https://dena.com/jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away