[NUXT.JS]How to set up ESLint and Prettier

We will introduce ESLint to unify the code within the team with NUXT.JS and to keep it clean according to the coding rules.
ESLint also has a --fix that can automatically format the code,
Recently, it seems to be popular to use Prettier for code formatters without using ESLint itself.
It works without Prettier, but I will explain it in the direction of using it because it will save extra settings.

Install ESLint and Prettier

I will explain based on the information published officially of Nuxt.js.
Nuxt.js development tools

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

Install the required packages from npm above.

Setting ESLint

Once installed, put .eslintrc.js in the root directory of your project.
Side note: It is recommended to add .js after confirming the ESLint formula.
The basic settings are as follows.

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',
    'prettier/prettier':['error', { semi: false }]
  }
}

In the extends part, the base rule is set.
Various patterns are prepared for both prettier and vue.

vue

→ Vue Available rules
Starting from Base, all rules below it apply to the higher rules.

Prettier

→eslint-plugin-prettier git hub
The settings of the above Prettier are as follows.
・Eslint-plugin-prettier enabled
・Prettier/prettier rule application (error level)
・Call eslint-config-prettier setting

Additional rule settings

I will add it to the rules part additionally.
For example, if you want to change the default indentation of vue file from 2 to 4, use the following.

rules: {
    'vue/html-indent':['error', 4],
    ....
}

Run ESLint

The following is described in package.json of npm.

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

npm run lint Display of errors, warnings, etc.
npm run lintfix Modify/update files according to set rules
With the above settings, the file settings to be ignored from lint target are set to .gitignore.
If you do not set --ignore-path, reference the .eslintignore file.
How to write .eslintignore is the same as .gitignore.

As mentioned above, it was easy, but it was how to set up ESLint in Nuxt.js.

NUXT.JS Recommended Books

I think that you can understand most of the questions and how to use it by searching on Google or by searching the documents on the NUXT.JS homepage, but if you try to learn systematically, I think books are good. The following are recommended books.
The book version is expensive, but it also covers Vue.js and is easy to understand.
Building and Testing Vue 2 Apps with Vue Router, Vuex, and Nuxt: A Guide on Building Client Side and Server Side Rendered Front End Web Apps