Prettierの導入 - Chiroru's Diary

【目次】

インストール
実行
参考

インストール

// prettierをインストール
$ npm i -D prettier

ESLintと一緒に使うために

prettier-eslint
prettier-eslint-cli

ESLintの記述ルール(JavaScript Standard Style)を反映するために

eslint-config-standard

をインストールします。

$ npm i -D prettier-eslint prettier-eslint-cli eslint-config-standard

package.jsonにPretterのコマンドを追加します。 --writeオプションを指定することで整形後の内容で保存できます。コードフォーマッターを適用する対象をformatに記述します。

// package.json

{
  "scripts": {
    "format": "prettier --write '/**/*.js'"
  },
  "devDependencies": {
    "prettier": "^2.1.1"
  }
}

実行

$ npm run formatで実行できます。ここではeslint自動修正と合わせて実行しています。

$ npx eslint test2.js

/Users/name/xxx/Javascript/test2.js
  1:4   error  Multiple spaces found before 'hoge'                    no-multi-spaces
  1:7   error  'hoge' is assigned a value but never used              no-unused-vars
  1:7   error  'hoge' is never reassigned. Use 'const' instead        prefer-const
  1:11  error  Multiple spaces found before '='                       no-multi-spaces
  1:15  error  'func' is not defined                                  no-undef
  1:19  error  Unexpected whitespace between function name and paren  func-call-spacing
  2:1   error  Expected indentation of 2 spaces but found 4           indent
  2:5   error  'parameter1' is not defined                            no-undef
  2:16  error  Multiple spaces found before 'parameter2'              no-multi-spaces
  2:19  error  'parameter2' is not defined                            no-undef
  2:31  error  'parameter3' is not defined                            no-undef
  2:42  error  Multiple spaces found before 'parameter4'              no-multi-spaces
  2:46  error  'parameter4' is not defined                            no-undef
  3:1   error  Expected indentation of 2 spaces but found 3           indent
  3:4   error  'parameter6' is not defined                            no-undef
  3:15  error  Multiple spaces found before 'parameter7'              no-multi-spaces
  3:17  error  'parameter7' is not defined                            no-undef
  4:1   error  Expected indentation of 2 spaces but found 9           indent
  4:10  error  'parameter8' is not defined                            no-undef
  4:20  error  Unexpected trailing comma                              comma-dangle
  5:1   error  Expected indentation of 0 spaces but found 14          indent
  5:16  error  Extra semicolon                                        semi

✖ 22 problems (22 errors, 0 warnings)
  13 errors and 0 warnings potentially fixable with the `--fix` option.

$ npx eslint test2.js --fix

/Users/name/xxx/Javascript/test2.js
  1:7   error  'hoge' is assigned a value but never used  no-unused-vars
  1:14  error  'func' is not defined                      no-undef
  2:3   error  'parameter1' is not defined                no-undef
  2:15  error  'parameter2' is not defined                no-undef
  2:27  error  'parameter3' is not defined                no-undef
  2:39  error  'parameter4' is not defined                no-undef
  3:3   error  'parameter6' is not defined                no-undef
  3:15  error  'parameter7' is not defined                no-undef
  4:3   error  'parameter8' is not defined                no-undef

✖ 9 problems (9 errors, 0 warnings)

$ npm run format

> javascript@1.0.0 format /Users/name/xxx/Javascript
> prettier-eslint --write '/Users/name/xxx/Javascript/*.js'

success formatting 1 file with prettier-eslint
1 file was unchanged

インストール

実行

参考