Vue3 + ESLint 9.13.0 + Prettier +TypeScript and VSCode Autoformat on Save

Visaka Devi Chaves — Tue, 05 Nov 2024 16:50:44 +0000

This guide will walk you through configuring a Vue.js project with ESLint 9.13.0, Prettier, and TypeScript, to enable automatic code formatting and linting on save in Visual Studio Code.

1. Create a New Vue Project

Start by creating a new Vue project:

npm create vue@latest

Navigate into the project directory:

cd your-project-directory

2. Install and Update Dependencies

Install the project dependencies:

npm install

Then, use ncu (Node Check Updates) to update the project dependencies:

npx ncu -u
npm install

3. Prerequisites Add ESLint, Prettier, and TypeScript Packages

This configuration requires the following NPM packages to be installed either locally or globally:

prettier
eslint prettier-eslint
@typescript-eslint/parser
typescript 
vue-eslint-parser
@vue/eslint-config-typescript 
@vue/eslint-config-prettier

Install the necessary development dependencies with pnpm or npm:

pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier

4. Initialize ESLint Configuration

Run the following command to set up your ESLint configuration:

npm init @eslint/config@latest

When prompted, make the following selections to configure ESLint:

How would you like to use ESLint?: To check syntax and find problems.
What type of modules does your project use?: CommonJS (require/exports).
Which framework does your project use?: Vue.js.
Does your project use TypeScript?: Yes.
Where does your code run?: Browser.
When asked if you'd like to install dependencies (eslint, globals, @eslint/js, @typescript-eslint, eslint-plugin-vue), choose Yes and use npm or your preferred package manager.

5. Add ESLint Flat Config

To ensure ESLint works with the new Flat Config format, make sure to include the necessary configuration in your eslint.config.mjs file. Adjustments for this might depend on your specific setup.

// eslint.config.mjs

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  // js
  pluginJs.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'off',
      'no-undef': 'off',
    },
  },
  // ts
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  // vue
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },
  {
    rules: {
      ...vueConfigTypescript.rules,
      ...vueConfigPrettier.rules,
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true,
        },
      ],
      'vue/multi-word-component-names': 'off',
      'vue/attribute-hyphenation': 'off',
      'vue/no-v-html': 'off',
      'vue/v-on-event-hyphenation': 'off',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/no-require-imports': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    ignores: ['node_modules', '.nuxt', '.output', 'dist'],
  },
  // prettier
  prettier,
  {
    rules: {
      'prettier/prettier': ['warn', { singleQuote: true }],
    },
  },
];

// package.json
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"

6. Install VSCode Extension for Prettier-ESLint Integration

To enable auto-formatting on save with Prettier and ESLint, install the following Visual Studio Code extension:

Prettier ESLint: Download here

7. Add Extension Recommendations

To recommend the extension for your project, add it to the .vscode/extensions.json file:

{
  "recommendations": [
    "rvest.vs-code-prettier-eslint"
  ]
}

8. Restart VSCode

After configuring your project and installing the extension, restart Visual Studio Code to ensure that autosave and autoformat work as expected.

Summary

Your project should now be set up with:

ESLint 9.13.0 with TypeScript and Vue.js support
Prettier integration for consistent code formatting
Autoformatting on save in VSCode using the Prettier ESLint extension ESLint Flat Config

DEV Community: Visaka Devi Chaves