Nuxt.jsにESLintとPrettierを設定する方法

ツイート
2020年11月02日
2021年03月02日

今回は、Nuxt.jsにESLintとPrettierを設定する方法について解説しています。 ESLintとPrettierを使用すると不要なミスを未然に防ぐことができます。git commint時にLinterを流す方法も紹介します。

ESLint: コードの静的解析ツールです。 Prettier: コードフォーマッターのです。

ライブラリをインストール

  • babel-eslint
  • eslint
  • eslint-config-prettier
  • eslint-loader
  • eslint-plugin-vue
  • eslint-plugin-prettier
  • prettier

をインストールしていきます。

bash
yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

.eslintrc.jsを作る

.eslintrc.jsはESLintの設定ファイルです。

js
module.exports = { root: true, env: { browser: true, node: true, }, parserOptions: { parser: "babel-eslint", }, extends: [ "eslint:recommended", "plugin:vue/recommended", "plugin:prettier/recommended", ], plugins: ["vue"], rules: { semi: [2, "never"], "no-console": "off", "vue/max-attributes-per-line": "off", // ここから下は、このブログで採用しているHTMLの設定です "vue/singleline-html-element-content-newline": "off", "vue/multiline-html-element-content-newline": "off", "vue/no-v-html": "off", "vue/html-self-closing": [ "error", { html: { void: "always", }, }, ], "prettier/prettier": [ "error", { semi: false, htmlWhitespaceSensitivity: "ignore", }, ], }, }

package.jsonにコマンドを追記する

json
{ "scripts": { "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .", "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." } }

上記をpackage.jsonに追加すると、

bash
yarn lint # または yarn lintfix

でESLintが実行されるようになります。

Huskyを導入する

huskyを導入すると、git commit時に、ESLintを実行してくれます。

bash
yarn add -D husky

package.jsonにhuskyの設定を書きます。

js
{ "husky": { "hooks": { "pre-commit": "yarn lint" } } }

上記を設定しておくことで制約が全て通らないとcommitできないようにできます。

ESLintとPrettierは非常に細かく設定できます。自分にあった設定を探してみてください!