もうコードフォーマットを気にしたくない!! ~EmacsでのWeb開発環境~

eslint や prettier を導入して何も気にせずきれいなコードを

環境

私の作業環境はこちらです

• macOS BigSur 11.2.3
• GNU Emacs 27.1
• Node.js v14.4.0

必要なツールのインストール

eslint と prettier はEmacsから呼んで使いたいため、グローバルにインストールします

$ npm install -g eslint
$ npm install -g prettier

Emacsの設定

まずはWebフロントファイルを編集する際の major-mode をインストールします
以下のファイルを編集するときに web-mode に切り替わるように設定しています

• .js
• .vue
• .ts

また、普段はインデントレベルを 4 に設定しているのですが、フロントエンド開発の際はインデントレベルが 2 になるように設定しています

(use-package web-mode
  :mode
  (("\\.js\\'" . web-mode)
   ("\\.vue\\'" . web-mode)
   ("\\.ts\\'" . web-mode))
  :custom
  (web-mode-markup-indent-offset 2)
  (web-mode-css-indent-offset 2)
  (web-mode-code-indent-offset 2)
  (web-mode-part-padding 0)
  )

以下が eslint と prettier を扱うパッケージです
特にパッケージの設定はいじっていません
双方 web-mode になった際に起動されるように設定しています

(use-package flymake-eslint
  :config
  (add-hook 'web-mode-hook
            (lambda ()
              (flymake-eslint-enable))))

(use-package prettier
  :config
  (add-hook 'web-mode-hook
            (lambda ()
              (prettier-mode))))

まとめ

上記の設定でコーディング中はファイル保存契機で eslint と prettier が走り
コードフォーマットやlintチェックを行ってくれます

特に何も気にしなくても、一定のルールでコードが整形されたり、ErrorやWarningに気づけるのでとても楽です