[NUXT.JS] How to Set Up ESLint and Prettier

This article explains how to introduce ESLint in Nuxt.js to standardize code within a team and maintain cleanliness according to coding rules.

While ESLint does have a `--fix` option for automatic code formatting,

it seems to be common practice nowadays to use Prettier as the code formatter instead of ESLint itself.

Although Prettier is not strictly necessary for functionality, it simplifies configuration by handling extraneous settings, so I will explain how to use it.

INSTALL ESLINT AND PRETTIER

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

CONFIGURE ESLINT

After installation, place `.eslintrc.js` in the root directory of your project.

Side note: ESLint's official documentation recommends adding the `.js` extension.

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 }]
  }
}

Both Prettier and Vue offer various configuration patterns.

Vue

Starting from 'Base', higher-level rules apply all rules beneath them.

Prettier

→ eslint-plugin-prettier GitHub

・ Apply `prettier/prettier` rules (error level)

・ Call `eslint-config-prettier` settings

Additional Rule Settings

For example, if you want to change the indentation of Vue files from the default 2 spaces to 4, you would add the following:

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

RUN ESLINT

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

`npm run lintfix`: Modifies and updates files according to the configured rules.

With the settings above, files to be ignored by linting are configured in `.gitignore`.

If `--ignore-path` is not specified, ESLint will refer to the `.eslintignore` file.

The syntax for `.eslintignore` is the same as for `.gitignore`.

This concludes a brief explanation of how to set up ESLint in Nuxt.js.

Recommended Nuxt.js Books

While you can typically understand most questions and usage by searching on Google or consulting the Nuxt.js homepage documentation, I believe books are still the best resource for systematic learning. Below are some recommended titles.

The physical book versions can be expensive, but they are comprehensive and easy to understand, covering Vue.js as well.