learn-nuxt-ts

Code control: formatter and linter

Prettier

Prettier is an opinionated formatter.

yarn add --dev prettier

VS Code users, don’t forget the VS Code Prettier extension.

Add a .prettierrc file to configure prettier. Options can be found on Prettier documentation:

{
  "semi": true,
  "singleQuote": true
}

ESLint

At first, I planned to use TSLint but TypeScript ecosystem is moving from TSLint to ESLint so let’s move as well.

Let’s add ESLint some plugins:

• @typescript-eslint/eslint-plugin
• eslint-config-prettier due to our Prettier usage
• eslint-plugin-vue per Nuxt documentation

yarn add --dev eslint @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-vue

Configure ESLint with the .eslintrc.js file:

module.exports = {
  root: true,

  env: {
    browser: true,
    node: true
  },

  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2017,
    sourceType: 'module',
    project: './tsconfig.json'
  },

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/recommended',
    'prettier',
    'prettier/vue',
    'prettier/@typescript-eslint'
  ],

  plugins: ['vue', '@typescript-eslint']
};

Few explanations:

• vue-eslint-parser is required by eslint-plugin-vue (check doc) and as @typescript-eslint/parser is required, it is moved to parserOptions
• Order in extends matters. Prettier configurations are at the end to ensure they override other rules
• env is set to browser and node for SSR reasons (check Nuxt doc)