Nuxt.js における コードフォーマット

Nuxt.js で es-lint や prettier を使用したコードのチェック & 自動整形を行う方法を紹介します。

コードの自動チェックと自動整形

Nuxt.js におけるコードフォーマットでは、es-lintprettier などのツールがよく利用されます。

  • es-lint : コードのフォーマットやルール違反、構文エラーを自動でチェックしてくれるツール
  • prettier : コードのフォーマットを可能な限り自動で整形してくれるツール

es-lint を使ってコードの自動チェックを行うことで、構文的に問題のあるコードや、記述が好ましくないコードを事前に検出出来るほか、
prettier を使って 細かいフォーマットのエラーなどを自動で修正することが出来ます。

スペースやタブ、コーディングスタイルなどのコードフォーマットの問題は、コード実行上は影響がないものの、複数人で開発する際のコードの読みやすさを向上させてくれるため、可能な限り設定しておくほうが良いでしょう。

es-lint を用いたコード検査

Nuxt.js のデフォルトテンプレートには es-lint の設定ファイル .eslintrc.js が標準で付属しています。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {}
}

記述されている plugin:vue/essential は Vue.js 専用の es-lint プラグインで、Vue.js 固有の以下のようなコードチェックを行ってくれるものです。

  • テンプレート内の v-xxx 系のディレクティブが正しく利用されているかのチェック
  • コンポーネントの data プロパティが関数で定義されているかのチェック
  • computeddata , methods間で キーの重複がないかのチェック

他にも様々なコードチェックを行うことが出来ます。

チェックされるルールの一覧は、eslint-plugin-vue のページに詳しくまとまっています。

https://github.com/vuejs/eslint-plugin-vue

実際にこれらのコードチェックを実施する場合以下のようなコマンドを実行します。

$ node_modules/.bin/eslint --ext .js,.vue --ignore-path .gitignore .
# または標準のテンプレートを利用している場合以下のコード
$ npm run lint

これにより拡張子が.js .vue のファイルを対象にコードのチェックが自動的に行います。

チェックの結果見つかったエラーはターミナルに表示され、コマンドは終了コード 1 を返します。エラーが見つからなかった場合は、何も表示されず、終了コードも 0 となります。

prettier によるコードの自動整形

prettier はコードの自動整形を行うツールです。コード内での セミコロンの有無やインデントの統一などを行ってくれます。

prettier を利用するにはまず以下のコマンドで、モジュールをインストールします。

$ npm i prettier eslint-plugin-prettier eslint-config-prettier

次にコードのフォーマットエラーを es-lint 経由でチェックできるよう、 .eslintrc.js を以下のように修正し、 prettier のチェックルールを追加します。

  ...
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended'
  ],
  ...

この状態で、 es-lint を実行してみてください。おそらく 沢山のエラーが表示されるでしょう。

prettier は JavaScript だけでなく HTML や CSS の記法まで含めて、構文チェックを実施してくれます。

これらの検出されたエラーを自動で修正するには以下のコマンドを実行します。

$ node_modules/.bin/eslint --fix --ext .js,.vue --ignore-path .gitignore .

コマンドが実行されると .vue ファイル内の様々な箇所でコードフォーマットの統一が実施され、自動的にファイルが変更されます。

上記コマンド実行後に再度 es-lint を実行してみてください。先程まで表示されていた prettier のエラーはきっと消えているでしょう。

SCSS や HTML ファイルなど Vue コンポーネントや JavaScript以外のファイルでフォーマットの自動成形を実行したい場合どのようにすればよいでしょうか。

prettier には標準でCLIコマンドも付属しているため以下のようのコマンドをファイルの整形を行うことができます。

$ prettier ./assets/**/*.scss --write

上記のコマンドをファイルは自動的に変換されフォーマット統一されます。CIツールなどでコードのフォーマット異常を検出したい場合は以下のコマンドでコードフォーマットのエラーを検出することができます。

$ prettier ./assets/**/*.scss -l

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です