Setting Up ESLint with Prettier, TypeScript, Vue.js, and VSCode Autosave Autoformat

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 as the 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.

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

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

The above is the detailed content of Setting Up ESLint with Prettier, TypeScript, Vue.js, and VSCode Autosave Autoformat. For more information, please follow other related articles on the PHP Chinese website!